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
});
}
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.
You can use aspnetcore-spa generator for Yeoman to create brand-new single page application with asp.net 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