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

#webdev #javascript #webpack #react

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: