Why does webpack dev server not auto reload page on changes when started from gitpod terminal?

Question

The project is https://github.com/easychessanimations/htmltest .

I studied all the answers related to webpack dev server auto page reload.

When I do npm run start locally, it auto builds / reloads page on source change, so the dev server config must be right:

devServer: { 
    contentBase: path.join(__dirname, "dist"),    
    port: 8080,
    hot: true,
    watchContentBase: true,        
    watchOptions: {
        poll: true
    },
  },

When I do the same from the gitpod terminal, online, the page is auto rebuilt, but not auto reloaded ( no matter whether I open it in a gitpod window or in a full blown browser tab ). If I reload manually, the changes are reflected.

What extra config do I need to make it work under gitpod?

You can play around with it using this link ( of course first you need to authorize gitpod with your github account ):

https://gitpod.io/#https://github.com/easychessanimations/htmltest

in the gitpod terminal type:

npm install
npm run build
npm run start

Answer 1

Webpack HMR needs to be configured accordingly. Adding the following three properties to the webpack.conf does the trick:

  devServer: { 
      // make HMR work - start
      host: '0.0.0.0',
      disableHostCheck: true,
      public: require('child_process').execSync('gp url 8080').toString().trim(),
      // make HMR work - end
      
      contentBase: path.join(__dirname, "dist"),    
      port: 8080,
      hot: true,
      watchContentBase: true,        
      watchOptions: {
          poll: true
      },
    },

Here is a working snapshot:

https://gitpod.io/#snapshot/daa14130-2f44-430d-93ab-2d4ed980fc2c