Setup Webpack HMR with Express server and React

Programmatically setup an Express server with Webpack's Hot Module Replacement (HMR) to host a React web application.

Setup
Tested with

Setup

Your Express server can become a webpack development server when configuring it the following way:

server.ts

import express from 'express';
import { HotModuleReplacementPlugin, webpack } from 'webpack';
 
const app = express();
 
const webpackCompiler = webpack({
  entry: ['webpack-hot-middleware/client', `${__dirname}/webapp/App.tsx`],
  mode: 'development',
  module: {
    rules: [
      {
        exclude: /node_modules/,
        test: /.[tj]sx?$/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['@babel/plugin-proposal-class-properties'],
            presets: ['@babel/preset-react', '@babel/preset-typescript'],
          },
        },
      },
    ],
  },
  plugins: [new HotModuleReplacementPlugin()],
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
});
 
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
 
app.use(webpackDevMiddleware(webpackCompiler));
app.use(webpackHotMiddleware(webpackCompiler));
 
app.use(express.static(`${__dirname}/webapp`));
 
const port = 3000;
 
app.listen(3000, async () => {
  console.log(`Started server on port "${port}".`);
});

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:

webapp/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="main.js"></script>
  </body>
</html>

If you want to trigger the "Hot Module Replacement" feature from your React web page, you will have to activate "module.hot":

webapp/App.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './page/App';
 
function runApp(): void {
  if (module.hot) {
    module.hot.accept();
    ReactDOM.render(<App />, document.getElementById('root'));
  }
}
 
runApp();

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

Contents

Setup

Tested with