Skip to content

Commit 986004d

Browse files
committed
Implement PR feedback
1 parent cac8833 commit 986004d

File tree

1 file changed

+12
-4
lines changed

1 file changed

+12
-4
lines changed

content/how-to/develop-using-vagrant.md

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ title: How to Develop using Vagrant
44

55
If you have a more advanced project and use [Vagrant](https://www.vagrantup.com/) to run your development environment in a Virtual Machine, you'll often want to also run webpack in the VM.
66

7+
## Configuring the Project
8+
79
To start, make sure that the `Vagrantfile` has a static IP;
810

911
```ruby
@@ -43,6 +45,8 @@ And create a `index.html` file. The script tag should point to your bundle. If `
4345

4446
Note that you also need to create an `app.js` file.
4547

48+
## Running the Server
49+
4650
Now, let's run the server:
4751

4852
```shell
@@ -51,14 +55,14 @@ webpack-dev-server --host 0.0.0.0 --public 10.10.10.61:8080 --watch-poll
5155

5256
By 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.
5357

54-
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.
55-
The `--public` flag makes sure the script knows where to look for the websocket. The server will use port `8080` by default, so we should also specify that here.
58+
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.
59+
The `--public` flag makes sure the script knows where to look for the WebSocket. The server will use port `8080` by default, so we should also specify that here.
5660

5761
`--watch-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.
5862

5963
The server should be accessible on `http://10.10.10.61:8080` now! If you make a change in `app.js`, it should live reload.
6064

61-
## Advanced usage with nginx
65+
## Advanced Usage with nginx
6266

6367
To mimick a more production-like environment, it is also possible to proxy the webpack-dev-server with nginx.
6468

@@ -81,7 +85,7 @@ server {
8185
}
8286
```
8387

84-
The `proxy_set_header` lines are very important, because they allow the websocket to work correctly.
88+
The `proxy_set_header` lines are very important, because they allow the WebSocket to work correctly.
8589

8690
The command to start webpack-dev-server can then be changed to this:
8791

@@ -90,3 +94,7 @@ webpack-dev-server --public 10.10.10.61 --watch-poll
9094
```
9195

9296
This makes the server only accessible on `127.0.0.1`, which is fine, because nginx takes care of making it available on your host PC.
97+
98+
## Conclusion
99+
100+
We made the Vagrant box accessible from a static IP, and then made webpack-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.

0 commit comments

Comments
 (0)