You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/how-to/develop-using-vagrant.md
+12-4Lines changed: 12 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -4,6 +4,8 @@ title: How to Develop using Vagrant
4
4
5
5
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.
6
6
7
+
## Configuring the Project
8
+
7
9
To start, make sure that the `Vagrantfile` has a static IP;
8
10
9
11
```ruby
@@ -43,6 +45,8 @@ And create a `index.html` file. The script tag should point to your bundle. If `
43
45
44
46
Note that you also need to create an `app.js` file.
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.
53
57
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.
56
60
57
61
`--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.
58
62
59
63
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.
60
64
61
-
## Advanced usage with nginx
65
+
## Advanced Usage with nginx
62
66
63
67
To mimick a more production-like environment, it is also possible to proxy the webpack-dev-server with nginx.
64
68
@@ -81,7 +85,7 @@ server {
81
85
}
82
86
```
83
87
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.
85
89
86
90
The command to start webpack-dev-server can then be changed to this:
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