This post is part two of a series. For part one see here
Part 2 - Replacing Bower with JSPM
In part 1 of this series we created a shiny new ASP.NET 5 project, and I introduced some fundamentals.
You will notice that your ASP.NET 5 application has a number of bower packages included by default:
First, let’s uninstall Bower. In your project is a
Bower.json file. Delete it! (If you can’t see it in Solution Explorer, you might need to ‘show all files’
When you install
Bower packages, they are installed under the “lib” folder within your
wwwroot directory. So, let’s now delete this lib folder which will delete all of these packages.
After those changes, your project should look something like this:
To fix this situation we’ll need to add these packages back to our application, using
JSPM, and then fix up the way our application is
JSPM can be installed as a local
JSPMand whatever the latest version is:
- Save the file.
NPM package for
JSPM should now be downloaded and installed into your project. You will see that the package is installed into the “node_modules” folder within your project.
Now that the
JSPM package has been installed, we need to configure
The way to do this, is a little bit fiddely, as you have to drop to the command line - there is no fancy support for
JSPM in Visual Studio at the moment like there is for
- Open a
command promptwindow, and
CDto your project directory
jspm initand hit enter.
You will now be asked a series of questions. At the end of answering these questions, the relevent
config will be produced within the project.
Here are the answers. Some of them you can just hit enter without typing anything, and the default value will be used.
I’ll quickly run through each option briefly.. But you should defer to the
JSPM documentation site for further clarifications.
“Would you like jspm to prefix the jspm package.json properties under jspm?“ We answer yes to this (the default) and this just means that JSPM will store its project configuration within a “jspm” section in our existing
“Enter server baseURL (public folder path)“ The word URL is a bit confusing here. This is the relative path to your “public” folder within the project. By public folder, we mean the folder that will serve up static files and is therefore accessible to a browser. We need to set this to the path to our
wwwrootdirectory. So the value we set for this question is
./wwwrootas the value is relative to the current (project) directory.
“Enter jspm packages folder [wwwroot\jspm_packages]“ We accept the default value for this question. Previously, our Bower packages were installed under
wwwroot\libfolder, so if you want to keep this consistent you could change this value to
wwwroot\lib. I however am happy to keep the default.
JSPMis not just a package manager in a the sense of allowing you to adopt packages at
design time. It also has features that are used your application when it runs. This means it has a
“Configuration file wwwroot\config.js doesn’t exist, create it? [yes]” We accept the default which is
yesas we want it to create this config file for us.
“Enter client baseURL (public folder URL) [/]“ This is the URL or path that the browser uses to browse to the public folder (wwwroot). We accept the default value, because our public folder (wwwroot) is served up as the root path (“/”).
“Which ES6 transpiler would you like to use, Babel, Typescript, or Traceur? [babel]“ For the purposes of this blog, I am accepting the default of “Babel”.
Installing JSPM Packages
Now that we have
JSPM configured, it’s time to install those packages that we previously had installed via
Back in the
command prompt run the following commands:
jspm install jquery
jspm install jquery-validation
jspm install github:aspnet/jquery-validation-unobtrusive
jspm install bootstrap
Once that is done, those packages will now be installed under your
Transitioning to Modules.
module loader (
If this sounds overwhelming, don’t worry, it’s simple once you get your head around the basic concept. Hopefully things will become more clear as we continue.
First, we need to include the module loader itself, and it’s configuration file, into our application.
If you open
_Layout.cshtml you will see a section like this:
Let’s comment out that whole section and replace it with this:
At this point, let’s run the application!
Why aren’t we loading JQuery and Bootstrap anymore?
We are no longer directly including the
jquery scripts into our
_Layout.cshtml file, so they aren’t being loaded! So we aren’t seeing any 404’s anymore within the browser console window - which is good, but don’t we need those files for our site to function?
This is the nature of
jquery are modules that will only be loaded, if some other module that we are loading via the module loader, requires them as dependencies.
With that in mind, let’s look at the module we are currently loading via the module loader. It’s one called
This resolves (thanks to the
config.js file) to the
js/site.js file in our
wwwroot directory. This file is currently empty, meaning it also has no dependencies declared in it for any other modules. This is why the module loader no longer bothers to load
Therefore, as our
js/site module is being loaded in our
_Layout.cshtml file - which means it’s going to be loaded on every page, we can “force” JQuery and Bootstrap to be loaded on every page, by decalring them as depencies for our module. This could be viewed as a bit of a cheat as really we don’t want to load dependencies just for the sake of it, we only want to load them if they are actually used.
So, let’s now assume that we are willing to load
Bootstrap as a dependency for every page:
site.jsand insert the following code, then save it an re-run the application:
ES6 syntax for declaring a module dependency.
You should now see that
Bootstrap are loaded on every page:
What about CSS
Well we can use JSPM for CSS too, but we need to install the
Installing the CSS plugin for JSPM
Back in the
command prompt in your project directory, run the following
Now go back to your
site.js file, and add an import for the bootstrap.css. It should now look like this:
_Layout.cshtml, comment out the link to the old - non existent, bootstrap.css file:
Now run your application!
Flash of unstyled content
You may notice that using the CSS plugin, your page is displayed in an unstyled form for a brief moment, whilst the CSS file is loaded asynchronosuly. This is known as a Flash of Unstyled Content and is a problem with using the CSS plugin at present - see here. Hopefully this will be addressed in the future, but in the meantime, feel free not to use the CSS Plugin if this is an issue, you can instead just directly reference the
Bootstrap.css file in the
_Layout.cshtml file as before, but from its new location under the
Finishing Touches -
Our application is running again, but you may notice a few of the pages have errors.
If you click on “Register” link for example you will see these errors in the browser console window:
This is because many of the views within our MVC application are rendering a partial called
For example, if you look at the bottom of
Register.cshtml, you will see the following:
If you look at the contents of
_ValidationScriptsPartial we can see that it is actually including additional scripts onto the page:
As you can see, depending upon the environment that ASP.NET determines your application is running on, this renders some script includes to particular js files, used for forms validation. These were previoulsy located within
Bower packages, that we have deleted.
To correct this, we’ll just need to instruct the module loader to load the
jquery.validate.unobtrusive module instead. Notice that you don’t need to also instruct the module loader to load the
jquery.validate module, because
jquery.validate is a dependency of
jquery.validate.unobtrusive so the module loader will resolve it automatically.
So change the contents of
_ValidationScriptsPartial.cshtml to this:
And now - everything is working!
In this blog post, we took an out of the box ASP.NET 5 MVC application that we created in part 1, and replaced
module loader instead.
We also saw that using the module loader to load CSS currently results in a “flash of unstyled content” issue, and so if that’s an issue for your application then it’s probably best to stick to directly linking to your css files as before, for the time being. That’s a decision for you to make!
In the next blog post/s in this series, I will attempt to cover:
- Creating a basic Aurelia application on the Home page.
- Introducing Linting, Bundling, and Minification into the build process, using Gulp.