1

I'm using webpack's hot reload feature, along with Django.

When I open the webpack dev server to http://127.0.0.1:3000/some/page/. I modify some Javascript to make the page hot reload.

But the hot reload URL that gets fetched ends up being

This is incorrect. The correct URL is always on based on http://127.0.0.1:3000/static:

This is because /some/page/ is done through react-router, and is not an actual path on the server.

Does webpack have an option to set the hot reload base URL?

At the moment I'm just telling Django to redirect it, which works but isn't ideal. Ideally I would not want to write extra code in Django just for webpack's hot reload to work.

P.S. My webpack config is:

The way I integrate it with Django is through:

devServer: {
  // For Webpack dev server. We use Django's static path since our index redirects to Django's index.
  publicPath: 'http://localhost:8000/static/',
  port: 3000,
  hot: true,
  inline: true,
  historyApiFallback: true,
  headers: { 'Access-Control-Allow-Origin': '*' },
  proxy: {
    '/': {
      target: 'http://localhost:8000', // Redirect everything that we don't build to Django
      changeOrigin: true,
    },
  },
},
simonzack
  • 19,729
  • 13
  • 73
  • 118
  • 1
    @KevinFarrugia Thanks for the comment! Yes it does indeed answer my question. I didn't realize that at some point I broke `react-hot-loader` and had to fix it, thanks to your comment yesterday prompting me to test it. This was quite involved, needed to proxy things to Django properly, but that link does answer my original question. – simonzack Jun 27 '20 at 12:38

0 Answers0