Table of contents
Programmatically setup an Express server with Webpack’s Hot Module Replacement (HMR) to host a React web application.
Setup
Your Express server can become a webpack development server when configuring it the following way:
1 |
|
The above configuration will server your web application from the static directory “webapp”. Your “webapp” directory must contain the “index.html” file of your React web application:
1 |
|
If you want to trigger the “Hot Module Replacement” feature from your React web page, you will have to activate “module.hot”:
1 |
|
Tested with
- @babel/core 7.12.10
- @babel/plugin-proposal-class-properties 7.12.1
- @babel/preset-react 7.12.10
- @babel/preset-typescript 7.12.7
- @types/express 4.17.9
- babel-loader 8.2.2
- express 4.17.1
- typescript 4.1.3
- webpack 5.10.1
- webpack-dev-middleware 4.0.2
- webpack-hot-middleware 2.25.0