ASP.NET 5 and AngularJS Part 1, Configuring Grunt, Uglify, and AngularJS

This is the first part in a multiple part blog series on building ASP.NET 5 (ASP.NET vNext) apps with AngularJS. In this series of blog posts, I show how you can create a simple Movie app using ASP.NET 5, MVC 6, and AngularJS.

In this blog post, I explain how to setup your ASP.NET 5 project. In particular, I explain how you can setup Grunt to combine and minify your front-end JavaScript files automatically.

Creating the ASP.NET 5 Project

The very first thing that you need to do is to create a new ASP.NET 5 project. In this blog post, I’ll show you how to create a new ASP.NET 5 project using Visual Studio 2015 on Windows (In a future blog post, I’ll discuss how you can setup an ASP.NET 5 project on a Mac on OSX with Sublime).

You can download Visual Studio 2015 (Preview) from the following address:

http://www.visualstudio.com/en-us/downloads/visual-studio-2015-downloads-vs.aspx

Visual Studio 2015 works fine running side-by-side with earlier versions of Visual Studio.

After you install Visual Studio 2015, select File, New Project. Under the Visual C# templates, select ASP.NET Web Application and name the new project “MovieAngularJSApp”.

Next, select the ASP.NET 5 Empty project template and click the OK button to create the new project.

After you complete these steps, you’ll have an empty ASP.NET 5 project that looks like this:

The layout of an ASP.NET 5 solution is significantly different than earlier versions of ASP.NET. Notice that the solution is divided into two solution folders named Solution Items and src. The src folder contains all of the source code for your project. Currently, the src folder includes our MovieAngularJSApp project.

The MovieAngularJSApp project contains a special folder named wwwroot. The idea here is that the wwwroot folder should contain all of the content of your live website. For example, it includes any HTML files and image assets required for your live website.

You should not place any of your source code in the wwwroot folder. Instead, source code — such as unminified JavaScript files, Less files, MVC controller source code, and C# model classes – should be placed outside of the wwwroot folder.

In particular, you want to create a folder in the root of your MovieAngularJSApp project named Scripts. You’ll create all of your app’s JavaScript files in the Scripts folder. We’ll use Grunt to combine and minify the JavaScript files in the Scripts folder and add the result to the wwwroot folder automatically.

Using NPM to Get the Necessary Packages

Unlike earlier versions of ASP.NET, ASP.NET 5 natively supports three package managers: NuGet, NPM, and Bower.

What is a package manager? A package manager enables you to easily gather together all of the resources that you need to create a project. For example, instead of navigating around the web and downloading project resources such as jQuery, the Entity Framework, Bootstrap, and AngularJS by hand, you can download all of these resources and their dependencies automatically by taking advantage of a package manager.

Previous versions of ASP.NET supported NuGet and you’ll still use NuGet with ASP.NET 5. You’ll use NuGet to manage .NET packages such as ASP.NET MVC and the Entity Framework. You specify the NuGet packages that you need in your project with the project.json file.

ASP.NET 5 also supports NPM packages. This is new and exciting. The NPM package manager was originally created for managing packages for the open-source NodeJS framework (an alternative web app framework to ASP.NET). You use a file named package.json to manage your project’s NPM packages.

Finally, ASP.NET 5 also supports the Bower package manager. Bower is a package manager created by Twitter that is designed to support front-end development. You can use Bower to manage resources such as AngularJS, jQuery, and Bootstrap.

For our Movie app project, we need to use NPM to gather all of the resources that we need to use Grunt. We’ll use NPM to install Grunt and the Grunt plugins that we need. Follow these steps:

1. Right-click your MovieAngularJSApp project and select the menu option Add, New Item.

2. Select NPM configuration file.

3. Click the Add button.

Completing these steps will add a new file to the root of your MovieAngularJSApp project named package.json. Modify the file so that it looks like this:

In our package.json file, we’ve indicated that we need three NPM packages named grunt, grunt-contrib-uglify, and grunt-contrib-watch. After the name of each package, we’ve specified the version of the package that we need.

Notice that you get Intellisense (autocomplete) support while you edit the package.json file. A matching list of NPM package names and version numbers appear as you type.

After you create the package.json file, a new folder named NPM appears under your project’s Dependencies folder. If you expand the NPM folder then you can see a list of all of the NPM packages that you just added to the package.json file.

Right-click the NPM folder and select Restore Packages to download all of the NPM packages. After you complete this step, the grunt, grunt-contrib-uglify, and grunt-contrib-watch packages will all be installed to a folder named node-modules.

What about Bower?

You can use Bower, as I mentioned earlier, to manage all of the packages that you need for front-end development. For example, you can use Bower to install the AngularJS JavaScript library.

I’m not going to use Bower to install AngularJS in this project because I am going to reference AngularJS directly from the Google CDN instead. I am going to add AngularJS to my project Index.html page like this:

This is controversial, but I believe that you should always use a CDN for standard libraries such as AngularJS, Bootstrap, and jQuery. Using a CDN provides you with the best performance.

For example, if you visit multiple websites that all reference AngularJS from the same CDN then your browser does not need to download the AngularJS JavaScript library when you visit each website. The browser can retrieve AngularJS from its cache instead.

So I use a CDN for standard libraries such as AngularJS or jQuery that might be used with multiple websites. For app specific files, such as the AngularJS controller files, I use Grunt to combine and minify the files to improve performance.

Using Grunt to Build Your JavaScript Files

Grunt is an open-source tool that you can use to build all of the frontend resources for your project. For example, you can use Grunt to compile your Less or Sass files into CSS. You can also use Grunt to combine and minify CSS and JavaScript files.

In this blog post, I’ll show you how to use Grunt to combine and minify your JavaScript files. We’ll configure Grunt so that it will take all of the JavaScript files from the Scripts folder, combine and minify the files, and save the results to a file named app.js in the wwwroot folder.

Follow these steps:

1. Right-click your MovieAngularJSApp project and select Add, New Item.

2. Select Grunt Configuration file.

3. Click the Add button.

After you complete these steps, your project will contain a new file named Gruntfile.js. Modify the contents of the Gruntfile.js file so that it looks like this:

Our Gruntfile contains three sections. The first section is used to load each of the Grunt plugins that we need from the NPM packages that we configured earlier. We need to use a Grunt plugin named grunt-contrib-uglify and a Grunt plugin named grunt-contrib-watch.

Next, we enter the configuration information for each plugin. The Uglify plugin is configured so that it combines and minifies all of the files from the Scripts folder and places the results in a file named app.js in the wwwroot folder:

Notice that I use the array [‘Scripts/app.js’, ‘Scripts/**/*.js’] to specify the source files. I want the contents of the app.js JavaScript file to appear in the combined JavaScript file before the contents of any other JavaScript files because the app.js file contains the declaration of my main AngularJS module. In other words, if you want to control the order in which Uglify combines JavaScript files then you need to list the order of your JavaScript files explicitly.

The Watch plugin is configured to watch any changes to the JavaScript files in the Scripts folder with the following code:

If any files in the Scripts folder are changed, then the Watch plugin reruns Uglify to generate a new combined and minified app.js file automatically.

The final section of the Grunt file contains a definitions for your tasks. In our Grunt file, we define a single “default” task that runs Uglify and then watches for changes in our JavaScript files.

After you create a Grunt file, you need to run it by using the Visual Studio Task Runner Explorer. Follow these steps:

1. Select the menu option View, Other Windows, Task Runner Explorer.

2. Click the Refresh button in the Task Runner Explorer window to ensure that the tasks for the MovieAngularJSApp appears.

3. Right-click the Default task and select Run.

After you complete these steps, you can verify that Grunt is working by adding a JavaScript file (any JavaScript file) to the Scripts folder. Whenever you modify any JavaScript file in the Scripts folder then a new app.js file is generated in the wwwroot folder automatically.

Summary

In this blog post, I focused on setting up a new ASP.NET 5 and AngularJS project. I configured NPM and Grunt so that my app specific JavaScript files will be combined and minified automatically. In the next blog post, I’ll explain how you can create AngularJS templates that display movies retrieved from MVC 6 Web API.