With this blogpost I want to show an example of how to set up Angular and Webpack in Visual Studio with ASP.NET Core ready for dev and production builds.
If you read this until the end you will have a picture how to enable webpack and webpack-dev-server with npm and how to use webpack to bundle your angular application and inject files into index.html for your web application.
I had this topic already with my colleague DamienBodhere and a StarterTemplate here (which is using system.js as bootstrapper for your application), but this post is more to show how we get there and which steps you should take to get things going. For Damien and me this was a bit confusing in the beginning so this is the guide how we started actually. I hope you like reading it as much as I liked writing it.
And create a new project. In this case we name it “Angular2WebpackStarter”. After creating you can take the empty template like this:
Make sure you have installed the latest typescript nuget package because we will need it later to work with angular2 and visual studio 2015. A Resharper in the latest version also cannot be a mistake J
Add the necessary files and folders
The next step is to add the files and folders which are needed to keep your application structured and organized.
Add a new folder in your solution and call it “Angular2app”. This where all the client related dependencies are stored and being “compiled” and transferred to the wwwroot folder later on.
Next, add these files to your project and fill it with this data:
Your npm file related to your project. It keeps als dependencies and everything for your client.
Is configuring your tsc compiler. Whenever your run the “tsc” command from the commandline it will be taken as configuration for the typescript-compiler.
Fill the angular2app-folder
Next we are going to fill the angular2 app folder. Here we are going to be lazy. We are taking the quickstart repo from angular.io and copy the files we need form there. For the sake of simplicity we will only take the app.module to get things going. To be structured its best you create an app folder inside to place your code there.
But to start we need an index.html. And for webpack to be prepared we need an entrypoint for the polyfills and the vendor files we need for our app. Lets add these files.
Note that we include nothing here yet. This is on purpose. Read further… :)
I reduced the vendor.ts and polyfills.ts to store only the things we need
Why did we all this and if the wwwroot-folder is the one to be served to the client…why are we doing all this?
This is where webpack comes into play. We will configure webpack now to build our application into the wwwroot folder. Let’s do this…
So…you added the file: Paste the following content:
This file is no magic, don’t be scared:
First we require everything we need to use to kick off webpack. Then we will export our complete configuration. Our entrypoints are pointing to the files we just created (remember?) and of course our entrypoint of our application.
The “resolve”-array tells webpack to look for those file endings. The “output” is what we all were looking for. Here we tell webpack “Hey, what no matter what you are doing and how you are doing it, put it in the ./wwwroot-Folder and please be gentle and name the files like I will tell you later on ([name]) and please put a hash on it at the end, but only 8 digits ([hash:8])”. This is it.
Rules and Loaders are telling webpack how to handle such file endings. So: If you encounter such a file, so this and that. The plugins are telling webpack how to behave generally, to point which files out etc. And this is alle the magic.
Add the webpack-things we need to the “DevDependencies”-section in the package.json:
Run npm install or let VS do this for you.
Now that you’ve done this open up the Task Runner Explorer in Visual Studio and let the “Run - Development” go:
Et voila: our wwwroot-folder got filled with our entire app (or with what we have got so far). But there is one thing missing: The index.html!
Lets tell webpack to take our index.html we already have got and inject the sources into it and copy it too. To do this extend the “plugins”-section like this:
and add the
var HtmlWebpackPlugin = require("html-webpack-plugin");
at the top of the page. We need to include what we want to use ;)
let it run again:
Lets take a look into this index.html:
our files got injected!
Before we actually see our application we have to modify the Startup.cs to behave like we want it to:
to your project.json and in the Startup write:
Now we have an index.html and we can press the play-button in Visual Studio:
So it is working!!
Great so far.
Adding webpack dev server:
Wouldn’t it be nice to get the files refreshed as soon as I start working on them with this webpack construction? Well we already added the webpack dev-server in the package.json as dependency and in the web.config we already configured it in a basic way. So now lets use it:
You can now change the “npm start” command but we will simply make another one like “startWebpackDevServer”. So add the following line into the scripts section of package.json:
Now open a commandline to the level of your package.json and type “npm run startWebpackDevServer”:
Let it open and browse to “localhost:8080”
There your app appears!
So lets take a look how this behaves if we change a file…
Now lets go ahead and build this thing up to use development and production builds, which is our last step:
Development and Production builds
Lets take a closer look to what we did when we first ran our webpack:
There webpack is setting the variable “NODE_ENV” to “development”. Lets use that!!!
rename the “webpack.config.js” to “webpack.dev.js”. Create a new webpack.config.js.
All we need to do now is creating a switch which says “if you are development, use a (new) file (we will create) which takes the dev-thing, otherwise take the production ones”
So THIS is our new entrypoint for webpack, the new webpack.config.json!!
Create a file which is called “webpack.prod.js” which will be our production file in the future. You should now have something like this:
To test this put a simple console.log in the production file like:
and let it run:
So now lets pimp the production a bit. Its mostly the same we have so far for dev, but we need a little more plugins. Maybe the one to uglify the js UglifyJsPlugin and to delete the files in the wwwroot first “Clean for webpack”.
Copy the whole content from the webpack.dev.json to the prod.json and simply add the uglifyjs-plugin like this:
If you now let the prod-task run the files will be treated as ever but they are uglified as well.
To clean the wwwroot-folder first we need to install another plugin “Clean for webpack” and use it:
npm install clean-webpack-plugin --save-dev
and in both webpack-files
Now our folder gets cleaned. You can add this into dev, too.
This is it. This is how you can treat Angular2 with webpack in Visual Studio with an ASPNET Core application. I hope you liked and enjoyed reading.