DEV Community

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

Posted on • Edited on

10 1 1

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

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Heroku

This site is powered by Heroku

Heroku was created by developers, for developers. Get started today and find out why Heroku has been the platform of choice for brands like DEV for over a decade.

Sign Up

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay