Accessing localhost externally when using webpack-dev-server

11th June 2020 — 2 minute read

Young caucasian woman on leather couch working at a laptop while browsing her phone — Photo by Maxim Ilyahov on Unsplash

When doing web development, it's essential to be able to test and verify your work on different screen-sizes and devices.

For this we can use various tools like: BrowserStack, ngrok or a vitual machine running a different OS.

I have been doing this for years and years, but then something happened a few years ago... It's been a while since it happened, so some of the details are a bit blurry. But what happened was that I suddenly couldn't test my site running on localhost on BrowserStack. It just wouldn't connect... 😲 I thought that BrowserStack had messed something up or something, so I tried testing my MacOS localhost on my virtual machine (Parallels Desktop) running Windows 10, but also this was impossible. I couldn't connect to the IP. At this point, I started getting a little frustrated. I started Googling around for answers. I blamed it on Parallels for not letting the connection go through. And then... suddenly in some weird Parallels forum thread, I found the answer. It wasn't related to Parallels at all, instead the issue was related to webpack-dev-server 🤯 Apparently webpack-dev-server had stopped allowing remote connections. The fix was to set the host option in the devServer object in the config. Like this:

// webpack.config.js

module.exports = {
  //...
  devServer: {
    host: '0.0.0.0' // Allows external connections to localhost
  }
};

Or via CLI like this:

--host 0.0.0.0