DEV Community

Cover image for Webpack Dev Server External Access - (Fix: Invalid Host Header)
Sana Mumtaz
Sana Mumtaz

Posted on

Webpack Dev Server External Access - (Fix: Invalid Host Header)

While developing a React web app in local development mode, you may want to run the dev mode on mobile or quickly share the web app with another person via a public URL for your localhost (e.g. using ngrok). For security purposes, you cannot externally access your webpack-dev-server.

I faced this issue recently and, while I implemented the solution by reading the docs, I found that majority of the solutions in search results were obsolete.

Obsolete Solutions

  • No, making host: '0.0.0.0' won't work.
  • No, disableHostCheck won't work. It's depreciated.
  • No, public won't work. Depreciated option.
  • No, firewall won't work. Depreciated option.

So, how can you access your webpack-dev-server externally?

Solution:

✨It's all in the documentation.✨ It's so simple now that it made me feel dumb.

devServer: {
    allowedHosts: 'auto' | 'all' | Array[string]
}
Enter fullscreen mode Exit fullscreen mode

Examples:

1. If you're in some hurry, or have no regard for security, or like to live on edge... you may set allowedHosts to 'all'. (Not recommended, though)
2. I use ngrok to make public URLs, hence I listed ngrok sub-domain as follows:

allowedHosts: ['.ngrok.io']
Enter fullscreen mode Exit fullscreen mode

The takeaway from this was to, I guess, read latest docs for something that changes rapidly in documentation, instead of browsing search results.

Share your thoughts. Feedback's always welcome :)

Discussion (0)