with JavascriptServices


According to official documentation:

JavaScriptServices is a set of technologies for ASP.NET Core developers. It provides infrastructure that you'll find useful if you use Angular 2 / React / Knockout / etc. on the client, or if you build your client-side resources using Webpack, or otherwise want to execute JavaScript on the server at runtime.

Enabling webpack-dev-middleware for project

Let's say you use Webpack for front end bundling. You can add webpack-dev-middleware to serve your statics through tiny and fast server. It allows you to automatically reload your assets when content has changed, serve statics in memory without continuously writing intermediate versions on disk.



Install-Package Microsoft.AspNetCore.SpaServices


npm install --save-dev aspnet-webpack, webpack-dev-middleware, webpack-dev-server


Extend Configure method in your Startup class

if (env.IsDevelopment())
     app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions()
         ConfigFile = "webpack.config.js" //this is defualt value

Add Hot Module Replacement (HMR)

Hot Module Replacement allows to add, change or delete app module when application is running. Page reloading is not needed in this case.


In addition to webpack-dev-middleware packages:

npm install --save-dev webpack-hot-middleware


Simply update configuration of UseWebpackDevMiddleware with new options:

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions()
    ConfigFile = "webpack.config.js", //this is defualt value
    HotModuleReplacement = true,
    ReactHotModuleReplacement = true, //for React only

You also need to accept hot modules in your app code.

HMR is supported for Angular 2, React, Knockout and Vue.

Generating sample single page application with core

You can use aspnetcore-spa generator for Yeoman to create brand-new single page application with core.

This allows you to choose one of the popular front end frameworks and generates project with webpack, dev server, hot module replacement and server-side rendering features.

Just run

npm install -g yo generator-aspnetcore-spa
cd newproject
yo aspnetcore-spa

and choose your favorite framework

enter image description here