Cover photo by Alex Siale on Unsplash.
I am not a fan of having webpack-dev-server configured to open automatically in the browser, in my opinion it comes more handy to configure the browser to open that tab when it is started or to bookmark the dev url. But I think working in a team conventions are very important and if the team feels that it is nice to have it then it is important to configure it so it doesn't get in the way of any developer workflow.
Accept connections from any ip.
The first part is to configure webpack-dev-server to be reachable from outside of the container, often the container can mask the original port the server was running, and to be honest, that is one of the advantages of using containers. That being said, the default configuration is secure by only allowing access on localhost (127.0.0.1) but limiting, so you need to manually set devServer.host to 0.0.0.0 to be externally accessible, you might need to do the same for ws, and that is documented here.
Configure open to a hardcoded string.
This by itself solves the problem of being able to talk to the server but introduces a little nuisance, open stop working since by default it tries to open host:port and host is now 0.0.0.0, you can always type the address manually in the browser but that defeats the purpose of opening it automatically. So you need to set devServer.open to an array containing the string localhost:port or whatever ip address you are using. Open configuration is very flexible and can open more than one page at a time and configure the browser to be used, but you must keep in mind that last thing is OS dependent.
Note: if you are using old webpack versions you set this in two variables, devServer.open that is a boolean and must be true and devServer.openPage that will contain the url to be opened.
Top comments (0)