Blog Home  Home Feed your aggregator (RSS 2.0)  
Mayur's Blog - Build client side javaScripts using RequireJS, Grunt, Bower, Node and Visual Studio 2015 for Asp.Net MVC 4/5 multi page application
# Tuesday, October 27, 2015

Earlier there were posts regarding how to build AMD modules with RequierJS and MS Build. Changes were needed to MS Build because there was no direct support from Visual Studio. The MS Build triggered NodeJS to complete the build process and copied required files to the output directory or deployment folder.  

However, Asp.Net MVC vNext (6 or later) web template with Visual Studio 2015 supports client side building tools such Grunt and Bower. Therefore, the client side building has become simpler and does not require a customization to MS Build. But what if you have Asp.Net MVC with version 4 or 5. Older version of MVC templates do not come with support of Bower and Grunt to build required JavaScript. Therefore, you are still stuck with MS Build customization even though you have Visual Studio 2015.

Here I will show one of my experiments where I have implemented client side building of JavaScript. I wanted to build RequireJS AMD modules for multi page Asp.Net MVC 5 using Bower and Grunt.

Again please note that my implementation is based on Visual Studio 2015 but I am using Asp.Net MVC version 5. If you are using vNext then everything is built-in. However, at the time of writing this post the vNext was till in Beta and was not everyone's choice of production development. This approach may not be 100% perfect, however, I believe and hope that it could be a good guiding block to whomsoever wants to implemented a client side build environment for the JavaScript.

Why do we need client side build?

Most of client side libraries are written in JavaScritps and maintained in open source environments. These environments may not necessarily compatible with .NET and Visual Studio. As typical .NET developers we are used to with NuGet packages where we maintain .NET based packages. JavaScritp based packages are available in NuGet too but they are just an extension of the original open source packages. Someone has to volunteer to build NuGet packages. Therefore, it is possible that these packages may not be up to date. Wouldn't it be nicer if we could directly interact with those packages directly instead of getting them through NuGet?

Additionally, good practices such as AMD (asynchronous module) requires modules to be created and served in a certain a way. That includes concatenation of certain modules, minification and cleaning of the modules etc. Essentially it is similar to gathering certain C# files available in a project and creating a DLL by putting them altogether. Moreover, it should not minify when it is in debug/development mode but do it when it is a time for a deployment.

JavaScript development has gathered so much important due to its wide spread usage. Therefore, now days, client side development has taken off a lot. Probably the developers now writing as much JavaScript as much of the managed codes at the server side. Therefore, we need something so that we can manage and maintain client side development.

-- My apology for leaving the post incomplete; something has to be tacked on a priority; I will be back to complete the post as soon as possible; please come again after a few days to read the completed post; thank you -- 


Tuesday, October 27, 2015 12:26:36 AM UTC  #       | 
Copyright © 2022 Mayur Bharodia. All rights reserved.
DasBlog 'Portal' theme by Johnny Hughes.
Pick a theme: