Development - Vagrant
If you have a more advanced project and useVagrant to run your development environment in a Virtual Machine, you'll often want to also run webpack in the VM.
Configuring the Project
To start, make sure that theVagrantfile has a static IP;
Vagrant.configure("2")do|config| config.vm.network:private_network, ip:"10.10.10.61"endNext, installwebpack,webpack-cli,@webpack-cli/serve, andwebpack-dev-server in your project;
npminstall --save-dev webpack webpack-cli @webpack-cli/serve webpack-dev-serverMake sure to have awebpack.config.js file. If you haven't already, use this as a minimal example to get started:
module.exports={ context: __dirname, entry:'./app.js',};And create anindex.html file. The script tag should point to your bundle. Ifoutput.filename is not specified in the config, this will bebundle.js.
<!DOCTYPEhtml><html><head><scriptsrc="/bundle.js"charset="utf-8"></script></head><body><h2>Hey!</h2></body></html>Note that you also need to create anapp.js file.
Running the Server
Now, let's run the server:
webpack serve --host0.0.0.0 --client-web-socket-url ws://10.10.10.61:8080/ws --watch-options-pollBy default, the server will only be accessible from localhost. We'll be accessing it from our host PC, so we need to change--host to allow this.
webpack-dev-server will include a script in your bundle that connects to a WebSocket to reload when a change in any of your files occurs.The--client-web-socket-url flag makes sure the script knows where to look for the WebSocket. The server will use port8080 by default, so we should also specify that here.
--watch-options-poll makes sure that webpack can detect changes in your files. By default, webpack listens to events triggered by the filesystem, but VirtualBox has many problems with this.
The server should be accessible onhttp://10.10.10.61:8080 now. If you make a change inapp.js, it should live reload.
Advanced Usage with nginx
To mimic a more production-like environment, it is also possible to proxy thewebpack-dev-server with nginx.
In your nginx configuration file, add the following:
server{location/{proxy_passhttp://127.0.0.1:8080;proxy_http_version1.1;proxy_set_header Upgrade$http_upgrade;proxy_set_header Connection"upgrade";error_page502 @start-webpack-dev-server;}location @start-webpack-dev-server{default_type text/plain;return502"Please start the webpack-dev-server first.";}}Theproxy_set_header lines are important, because they allow the WebSockets to work correctly.
The command to startwebpack-dev-server can then be changed to this:
webpack serve --client-web-socket-url ws://10.10.10.61:8080/ws --watch-options-pollThis makes the server only accessible on127.0.0.1, which is fine because nginx takes care of making it available on your host PC.
Conclusion
We made the Vagrant box accessible from a static IP, and then madewebpack-dev-server publicly accessible so it is reachable from a browser. We then tackled a common problem that VirtualBox doesn't send out filesystem events, causing the server to not reload on file changes.
4 Contributors
