Post
Ask Question

ASP.Net 5 (Formerly Known as VNext): Part 3

If vNext or .Net 5 sounds new to you (which of course I believe it is not) or you want to read about the basics of these then please go through the following articles that I posted earlier:

Install Visual Studio 2015 Ultimate Preview

I recommend that you install VS2015 to explore all these utilities and the awesome features provided with ASP.Net 5. To read more about the installation of VS2015, please go through my article: Setup Visual Studio 2015 Preview Quickly Via Azure.

(This was also chosen by ASP.Net as the article of the day.)

ASP.Net 5 Redesign

ASP.Net 5 has undergone a major redesign from existing frameworks. Now we have three choices for choosing the framework:

framework

Let's look at these runtime environments.

  • Create a new ASP.Net Web Application.

    Web Application

  • Select ASP.NET 5 Starter Web

    Starter Web

Click OK and the project structure is ready. The project structure contains MVC folders and configuration files. Let's have a look at these configuration files.

configuration files

  • Project.json. The main project file lists the dependencies, frameworks, modules and so on needed for your application.

    tube Traverse the following link for more details on Project.json: https://github.com/aspnet/Home/wiki/Project.json-file

  • package.json. Lists npm packages.
  • bower.json. Lists Bower packages.
  • gruntfile.js. Configures Grunt tasks.

wwwroot folder

This promotes a separation of code, since your code behind files are separate from the static client files. This new wwwroot folder contains assets that the app will serve directly to clients, including HTML, CSS, image and JavaScript.

Choice of framework

Now that we have an idea of the folder structure and files, it's time to see the effect of these new configuration files:

  • Go to the Project.json file and you'll find two frameworks:

    find two frameworks

  • aspnet50: The full .NET CLR is the default runtime for projects in Visual Studio.

  • aspnetcore50: The Core CLR is a lean and completely modular runtime for ASP.NET 5 projects. It's 11MB vis-a-vis 200MB size of the full .NET CLR.

You can select / switch among frameworks after selecting Project > Properties…

Properties

Other tools/utilities:

These new configuration files use other platform/tools also, let's understand them.

Node jsNode.js® is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

Definition by: NodeJS.

You can install Node.Js from the site or I prefer using: Chocolatey.

    - Install chocolatey using the following command.
    1. @powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin.  
    This is equivalent to sudo-apt-get command in UNIX.

    - choco install nodejs.

    - After node is installed, you can validate whether npm (the package manager) is installed successfully or not.

    npm --version

    npm

twit Bower, manages all these things for you. The web sites are made of many things, frameworks, libraries, assets, utilities and rainbows.

Install bower
npm install -g bower

npm installGrunt is the JS taskrunner. The need to use Grunt is to do automation, it helps in automating many tasks, like minification, compilation, unit testing, linting, and so on, the easier your job becomes. If you visit the site you'll find many plugins available: Gruntjs.

Run the following command to install Grunt.

    - npm install -g grunt-cli
Great!! You've installed the various tools now. Let's revisit the project we've created and understand the structure.

Demo of bower

If you want to install any dependency that you want to use in your project, for example AngularJS, then go to bower.json and add AngularJS. For example:

AngularJS

The full code will look like:

Full code

Now, we've given the reference, you can view this by expanding Solution Explorer Dependencies > Bower.

Bower

It says that AngularJS is not installed. There are two ways to install AngularJS in the project:
  1. Right-click and fire the command Restore Package.

    command Restore

  2. Go to the command prompt and run the bower update.

    command prompt

    The output of both commands will add AngularJS to your project.

Demo of Grunt

As we know Grunt is a taskrunner and this demo will show you the task grunt-contrib-copy.

    - Go to package.json and add the NPN grunt package grunt-contrib-copy.

    package

    - Expand Dependencies and you'll reference to this npm package.

    NPN

    - Right-click grunt-contrib-copy and Restore package.

    or

    - Go to a command prompt and run the command:

    npm install grunt-contrib-copy.

    Good, now this plugin is available in your project. You can read more details regarding this plugin at: grunt-contrib-copy.

    - Create a folder library and add custom.js as in the following:

    1. console.log('hello VS2015');  
    - Now let's leverage this plugin. Add the task to gruntfile.js
    1. copy: {  
    2.   main: {  
    3.     src: ‘library/custom.js',  
    4.     dest: 'wwwroot/',  
    5.   },  
    6. },  
    - Register this task in gruntfile.js.
    1. grunt.loadNpmTasks('grunt-contrib-copy');  
    The final gruntfile.js will look like this:
    1. // This file in the main entry point for defining grunt tasks and using grunt plugins.  
    2. // Click here to learn more. http://go.microsoft.com/fwlink/?LinkID=513275&clcid=0x409  
    3.   
    4. module.exports = function (grunt) {  
    5.     grunt.initConfig({  
    6.         copy: {  
    7.             main: {  
    8.                 src: 'library/custom.js',  
    9.                 dest: 'wwwroot/',  
    10.             },  
    11.         },  
    12.         bower: {  
    13.             install: {  
    14.                 options: {  
    15.                     targetDir: "wwwroot/lib",  
    16.                     layout: "byComponent",  
    17.                     cleanTargetDir: false  
    18.                 }  
    19.             }  
    20.         }  
    21.     });  
    22.   
    23.     // This command registers the default task which will install bower packages into wwwroot/lib  
    24.     grunt.registerTask("default", ["bower:install"]);  
    25.   
    26.     // The following line loads the grunt plugins.  
    27.     // This line needs to be at the end of this this file.  
    28.     grunt.loadNpmTasks("grunt-bower-task");  
    29.     grunt.loadNpmTasks('grunt-contrib-copy');  
    30.   
    31. };  

     

We're all set to use this plugin. You can leverage VS2015.

  1. Right-click on gruntfile.js and run Task Runner Explorer.

    task runner

    You'll notice there are two tasks now:

    copy

    Bower the default one provided by scaffold and copy that that we created in gruntfile.js. Double-click on the copy task to run it and it'll copy the Library>Custom.js file to the destination folder wwwrrroot.

    Custom js

  2. You can do the same operation via command prompt by firing grunt copy.

    result command prompt

    Validate the tree structure or look into Windows Explorer and you'll find the following pattern:

    tree structure

Summary

ASP.Net 5.0 is really powerful and has capabilities of other tools and frameworks too. We've unleashed the power of NPM, bower and grunt. There are many Grunt plugins available that make your life easy, for examle the common tasks linting, minification and obfuscation can be handled easily via Grunt plugins.


Similar Articles