This post is part 1 of a series. Part 2 is here
ASP (A Sea of Packages).NET 5
When you create a new ASP.NET 5 project, you will see all sorts of new-ness. I am going to guide you, the uninitiated ASP.NET 5 web developer, through creating your first ASP.NET 5 MVC application, but we won’t stop there. In the next post of this series, we will then enhance the project with a number of features:
- Bundling and Minification.
- Auto browser refresh (as you make changes to files during development)
In addition, I will touch upon important tooling that you need to be aware of:
- Bower and why we are going to replace it with Jspm
- Gulp - and why is it useful
To be able to do all of this, we will be creating an ASP.NET MVC 5 project, and then we will be using Aurelia to run an Aurelia application on Home page (Index.cshtml)
The first step on our quest is simply to create a new ASP.NET application. I am sure you know the drill:
- In VS 2015, File –> New Project
- “ASP.NET Web Application”
- “Web Application”
At this point, with the project created, let’s stop and appreciate some noteworthy files in our new project.
project.json- this is the new form of the project file. It replaces for example the older
package.json- this file is managed by NPM. It records the dependencies that your application has on NPM packages. More on NPM later.
bower.json- this file is managed by Bower. It records the dependencies that your application has on Bower packages. More on Bower later.
gulpfile.js- this file contains
tasksthat can be executed by Gulp as part of your development workflow, for example, whenever the project is built, cleaned etc. More on this later.
Startup.csthis is the entry point for your application. For the purposes of this article, the default code is fine and we won’t be amending anything in this file. It contains bootstrapping code such as setting up and registering services such as authentication.
NPM - it’s an important citizen
NPM is now a first class citizen of an ASP.NET 5 project. This is why you have a
package.json file in your project.
NPM is a package manager - the Node Package Manager to be precise. Think
NuGet but for NodeJs packages. You could be forgiven for thinking it stands for “Not another Package Manager” - it doesn’t, I checked.
If you aren’t yet familiar with NPM, stop here and do yourself a favour - go get familiar, you will be seeing a lot of it in your ASP.NET 5 projects in the days to come!
Hold on, another Package Manager? But we allready have NuGet?
NuGet is for .NET libraries like log4net silly. Npm has a vast array of packages not available through NuGet. Why wouldn’t you want to tap into those also?
Here is where things get a tiny bit confusing. Bower is a package, that is also another package manager. I am tempted to move on.. but I’ll explain.
Bower is a NodeJs program, and is therefore distributed as a NodeJs package, via
Bower is the package manager to use as Bower specialises for client dependencies - so the ASP.NET 5 project is set up by default to use Bower and you may allready see some Bower packages downloaded into your
bower_components folder within your project. The
bower.json file keeps track of your bower dependencies.
However, in this walkthrough, we shall be scrapping
Bower and using a different package manager for our JQueries and our Bootstraps. One called Jspm. Jspm is recomended for it’s additional capabilities, mainly that it provides not just package management features (at dev time) but package loading features, that your application uses at runtime.
Gulp is what all the cool kids are using to automate their development workflows.
Gulp basically lets you define
Task Runner Explorer window in which you can pick which Gulp tasks (the ones defined in your gulpfile.js) that you would like to run and when. For example, you can have your gulp task executed whenever the project is built, or cleaned etc. You can also execute your gulp task via the command line (see the Gulp docs)
But won’t bundling and minification lead to a poor debugging experience?
In the next post/s, we will begin modifying our ASP.NET 5 project to do the things I have discussed:
- Replace Bower with JSPM
- Bring in Aurelia
- Get an Aurelia application working on the Index.cshtml page
- Enable bundling and minification via a Gulp task
- Enable automatic browser refresh
- Disable bundling when our application is running in development (to maintain an easy debugging experience should your browser not support source maps)
If there is anything else you would like me to cover in this series, drop me a comment below!