ASP.NET Core,  React,  Webpack

Hot Module Replacement (HMR) with React, ASP.NET Core

Hot module replacement (HMR) or hot loading is a feature of webpack allowing real time update of modules while the application is running, which could significantly speed up development.

Enable Hot module replacement

Goal: To enable HMR in the React application in a simple setup.

Base project code: Example code from React with Typescript, Get started with ASP.NET Core serves as starting point. (Rendering a simple HelloWorld typescript component)

Npm packages

Add the following package to “dependencies” in file package.json

and the following 2 packages to “devDependencies”

webpack-hot-middleware and react-hot-loader are packages to support hot module replacement.

Update entry.tsx (bundle entry file)

Update file entry.tsx in folder Scripts with code below:

Use hot() from package react-hot-loader to wrap around the HelloWorld component to support hot loading.

Update Startup.cs

Replace app.UseWebpackDevMiddleware() with the following code:

This adds WebpackDevMiddlewareOptions to enable HMR.

That’s it! The application should run as normal. Now modify HelloWorld and simply save the file will update the application automatically.

Additional Notes

If HMR does not work properly on your project after following the steps here, you may want to try adding react-hot-loader/babel plugin for babel-loader . Check out instructions from react-hot-loader.

Example code is available at Github.

Leave a Reply

Your email address will not be published. Required fields are marked *