Connection reset with webpack-dev-server inside Docker

Josh Sherman
1 min read
Software Development

After a very brief foray into using create-react-app, razzle and next.js recently, I decided that this old dog still prefers to go it alone and just build things out without the aid of frameworks and boilerplates.

With that, I was quickly reminded of an issue that I’ve run into in the past, and never actually wrote about. That issue is getting “The connection was reset” (a/k/a ERR_CONNECTION_RESET in Chromium) when attempting to load a site being served by webpack-dev-server inside of a Docker container.

It’s a bit of a stumper, because webpack-dev-server will work perfectly when run directly, outside of the container. It also doesn’t error in the container. No connection will ever show up in the docker-compose output, so it appears as if the port isn’t properly exposed as well.

All of that was fine though, the issue is with how webpack is being configured, specifically the host property inside of the devServer property. If you don’t have that particular properly defined, things will be fine outside of Docker, but absolutely won’t work inside of it.

The fix is pretty simple, you can either pass in --host 0.0.0.0 to webpack-dev-server or put in in the aforementioned webpack.config.js file as such:

// All your front matter stuff

module.exports = {
  devServer: {
    host: '0.0.0.0',
    // Any other development server stuff
  },
  // Any other configuration stuff
};

Once you do that, your application being served by webpack-dev-server from inside of a Docker container will load properly on either 0.0.0.0, 127.0.0.1, or localhost on whichever port you have configured.

In the past when I had run into this, I also had to set devServer.disableHostCheck to true in the configuration as well. The webpack-dev-server docs advise against this but if you’re routing a domain to your local environment at the DNS level, you’ll probably need this option as well.

Join the Conversation

Good stuff? Want more?

Weekly emails about technology, development, and sometimes sauerkraut.

100% Fresh, Grade A Content, Never Spam.

Related Articles