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.
