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 deprecated.
• No, public won't work. Deprecated option.
• No, firewall won't work. Deprecated 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]
}

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']

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 :)