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: '' 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?


✨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


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: ['']
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 :)

Top comments (0)