Recently the Cloud Construct Boston development team has advocated for using some different tools for building our agency’s new company website. Since our primary development stack is Microsoft.NET, MVC, and Razor, we usually end up building projects using Visual Studio. This doesn't jive well with the process of using some other tools like Grunt and Handlebar templates. Web developers find it very easy to use simple text editors and command line tools to minify and compile templates without needing to run a full IDE. While we don't want to stop them this, we also want the ability to take their code and work with it inside Visual Studio. This is because we need to make certain aspects of it dynamic. Items like rendering blog posts, project information, and form processing are facilitated by having a server side language to generate the final web page. The team could have built out an entire API to call from client side scripts, but the load time and UX for that would not be ideal.

After some discussion with the team, we discovered a way to work in the same environment and still adhere to some of the tooling requested for the front-end developers. We were able to integrate Grunt and Handlebar templates into the project structure so we could do all of the aspects of templating and compiling LESS files in the way that the web developers preferred. We also set up an environment that the ASP.NET MVC engineers would appreciate. This environment would allow for Razor intellisense and highlighting as well as wiring up controllers to return view templates.

As a digital agency, we see many different situations using different types of tools and development processes. The more we can try and integrate these tools together, the better options we have for solving client web design and development challenges.

Our New Website as a Test Bed

We committed our new site setup. The development stack looks like this:

There are a couple of reasons why we built our new site in this way:

1. Web developers can easily work with the tools they like.
2. We don't need to spend time customizing CMS templates for our new website. This is HUGE! It is much more time consuming to do this than to simply make an ODATA call to retrieve content from a CMS and then render it via Razor. The web developer can simply build the markup and the engineer can make it dynamic. We can also cache all the CMS calls and quickly return that information.
3. Content editors can still go in and add/edit content where needed. In new places, we simply add that code in our application to pull from the CMS.
4. Engineers can still use Visual Studio and its tools to deliver quality MVC code.

For more information on how to connect Orchard to an MVC application and query via ODATA, read this post.

Solution

So how do you configure Grunt and Handlebars to work within VSO? Here are the steps we used:

1. Place your normal files in the standard folder structure as you would, but copy them into the "Content" folder of your MVC website.

2. In your templates folder, change the extension of your .html files so they are now .cshtml. This will allow you to have Razor intellisense in them. Awesome!

3. Modify your GruntFile.js to compile .cshtml files instead of .html files and place them in the Views/Home directory so your controllers can find them:

grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),

'compile-handlebars': {
cloudTemplates: {
files: [{
expand: true,
cwd: './templates/',
src: '*.cshtml',
dest: '../Views/Home',
ext: '.cshtml'
}],
templateData: './data/*.json',
helpers: ['templates/helpers/*.js'],
partials: 'templates/shared/*.cshtml',
}
},

4. Setup your "watch" property to work with .cshtml files instead of .html files as well:

watch: {
handlebars: {
files: ['templates/*.cshtml', 'templates/shared/*.cshtml'],
tasks: ['compile-handlebars']
},
js: {
files: ['js/vendor/*.js', 'js/*.js'],
tasks: ['concat:js']
},
less: {
files: ['less/vendor/bootstrap.less', 'less/*.less'],
tasks: ['less:development'],
}
}

5. Add a corresponding .cshtml file for all your templates into your Views/Home directory of your website solution. You will also need to include these files into your project so they're deployed with your website.

6. Your controllers remain the same and just need to be configured to return the view files. So make sure you have controllers for all routes you want.

7. Add a pre-build event to your website project so your templates are compiled and new files are created :

FULL COMMAND : grunt --no-color --gruntfile "$(SolutionDir)CloudConstruct.Web\Content\Gruntfile.js

NOTE : Make sure you always edit code in the template files directory. This will ensure your code is not overwritten when the build event happens.

Using Grunt allows you to add all sorts of cool build items like minification, uglification, template compilation, and much more. It allows front end developers to use tools they prefer instead of using VSO or Microsoft libraries. Secondly, being able to have this all in VSO lets software engineers use the toolset they want as well.

Please contact us if you would like any help employing some of the best practices in your code and development process.

‍

About the Author:

Arra Derderian serves as the President and as a Lead Technical Architect for Cloud Construct. As a founder at Cloud Construct, Arra is involved in all levels of the business from new project engagements, project planning, and development.

He also serves as the founder of the Boston Orchard CMS User Group and is a member of the Windows Azure Insiders group.

Arra graduated from Northeastern University School with a Bachelor of Science degree in Computer Science.