Webpack 5 hot reload from different port (seperate application using the build)

Question

The issue I'm stuck on is hot reload is trying to go to localhost:8000/build (where the application build is being used)

instead of localhost:3000/build which is the webpack-dev-server build location.

I tried to use proxy and spent a lot of time on this. Is this possible to do? Here is my devServer config.

Edit: some of this config is unnecessary as I was trying a lot of things.

Edit2: Everything works fine when liveReload is true, but refreshing the page makes development too slow.

{
  ...,
  devServer: {
      allowedHosts: 'all',
      static: {
        directory: path.join(__dirname, 'build'),
        watch: true,
      },
      port: process.env.LOCAL_PORT,
      host: process.env.LOCAL_HOST,
      compress: true,
      client: {
        logging: 'warn',
        overlay: {
          errors: false,
          warnings: false,
          runtimeErrors: true,
        },
      },
      hot: 'only',
      liveReload: false,
      watchFiles: ['src/**/*'],
      proxy: [
        {
          context: ['/build'],
          target: 'http://localhost:3000',
        },
      ],
    },
}

Answer 1

I was able to figure it out with chatGPT.

Turns out proxy was not the correct thing to use here and I had to configure a bunch of things including:

• publicPath for both output and devServer.devMiddleware
• include the websocket configuration
• add cors config
• ReactRefreshWebpackPlugin
• probably more

Here is what I ended up with working. Note this project was originally started with react-scripts so there may be some additional config needed in a raw scenario (it is not currently ejected).

const path = require('path');
const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = (env) => {
  const envPath = path.resolve(__dirname, '.env');
  const envVars = dotenv.config({ path: envPath }).parsed || {};
  const localHost = process.env.LOCAL_HOST || 'localhost';
  const localPort = process.env.LOCAL_PORT || 3000;
  const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

  return {
    entry: './src/exports/index.js',
    output: {
      filename: 'ui.js',
      path: path.resolve(__dirname, 'build'),
      publicPath: `http://${localHost}:${localPort}/build/`,
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': JSON.stringify(envVars),
      }),
      new ReactRefreshWebpackPlugin(),
    ],
    module: { ... },
    devServer: {
      allowedHosts: 'all',
      static: {
        directory: path.join(__dirname, 'build'),
        watch: true,
        serveIndex: true,
      },
      headers: {
        'Content-Type': 'application/javascript', // Ensure correct MIME type
        'Access-Control-Allow-Origin': '*', // Allow all origins (you can restrict it to specific origins if needed)
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
        'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
      },
      port: process.env.LOCAL_PORT,
      host: localHost,
      compress: true,
      client: {
        logging: 'warn',
        overlay: {
          errors: false,
          warnings: false,
          runtimeErrors: true,
        },
        webSocketURL: {
          hostname: localHost, // The hostname for the WebSocket
          port: localPort, // The port for the WebSocket (matches your dev server)
          protocol: 'ws', // Use 'wss' if you're using HTTPS
          pathname: '/ws',
        },
      },
      hot: true,
      liveReload: false,
      watchFiles: ['src/**/*'],
      devMiddleware: {
        publicPath: `http://${localHost}:${localPort}/build/`,
      },
    },
  };
};