Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit69d3aa8

Browse files
committed
minor#11422 Encore: add guide to use Encore in a virtual machine (Kocal)
This PR was squashed before being merged into the 3.4 branch (closes#11422).Discussion----------Encore: add guide to use Encore in a virtual machineHi, ✋As the title says, this PR add a new guide for using Encore in a virtual machine.This is what we use on ours Symfony apps at work which run inside a Vagrant VM.It works really fine and I thought it would be helpful to share it with other people.Also, I've removed a sub-section in the actual doc because according tosymfony/webpack-encore#277, it was not working because some additional configuration was missing (and I can confirm it because I'm one of his co-worker 😛).Commits-------86c897f Encore: add guide to use Encore in a virtual machine
2 parentsbcb245e +86c897f commit69d3aa8

File tree

3 files changed

+113
-13
lines changed

3 files changed

+113
-13
lines changed

‎frontend.rst‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ Guides
7474
*:doc:`webpack-dev-server and Hot Module Replacement (HMR)</frontend/encore/dev-server>`
7575
*:doc:`Adding custom loaders & plugins</frontend/encore/custom-loaders-plugins>`
7676
*:doc:`Advanced Webpack Configuration</frontend/encore/advanced-config>`
77+
*:doc:`Using Encore in a Virtual Machine</frontend/encore/virtual-machine>`
7778

7879
Issues & Questions
7980
..................

‎frontend/encore/dev-server.rst‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,6 @@ by the normal `webpack-dev-server`_. For example:
2626
2727
This will start a server at ``https://localhost:9000``.
2828

29-
Using dev-server inside a VM
30-
----------------------------
31-
32-
If you're using ``dev-server`` from inside a virtual machine, then you'll need
33-
to bind to all IP addresses and allow any host to access the server:
34-
35-
..code-block::terminal
36-
37-
$ ./node_modules/.bin/encore dev-server --host 0.0.0.0 --disable-host-check
38-
39-
You can now access the dev-server using the IP address to your virtual machine on
40-
port 8080 - e.g. http://192.168.1.1:8080.
41-
4229
Hot Module Replacement HMR
4330
--------------------------
4431

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
Using Encore in a Virtual Machine
2+
=================================
3+
4+
You may encounter some issues when using Encore in a virtual machine, like VirtualBox or VMWare.
5+
6+
Fix watching issues
7+
-------------------
8+
9+
When using a virtual machine, your project root directory is shared with the virtual machine with `NFS`_.
10+
This is really useful, but it introduces some issues with files watching.
11+
12+
You must enable `polling`_ option to make it work:
13+
14+
..code-block::javascript
15+
16+
// webpack.config.js
17+
18+
// ...
19+
20+
// will be applied for `encore dev --watch` and `encore dev-server` commands
21+
Encore.configureWatchOptions(watchOptions=> {
22+
watchOptions.poll=250;// check for changes every 250 ms
23+
});
24+
25+
Fix development server
26+
----------------------
27+
28+
Configure public path
29+
~~~~~~~~~~~~~~~~~~~~~
30+
31+
..note::
32+
33+
You can skip this sub-section if your app is running on ``http://localhost``
34+
and not a custom local domain-name like ``http://app.vm``.
35+
36+
When running the development server, you will probably face the following errors in the web console:
37+
38+
..code-block::text
39+
40+
GET http://localhost:8080/build/vendors~app.css net::ERR_CONNECTION_REFUSED
41+
GET http://localhost:8080/build/runtime.js net::ERR_CONNECTION_REFUSED
42+
...
43+
44+
If your Symfony application is running on ``http://app.vm``, you must configure the public path explicitly
45+
in your ``package.json``:
46+
47+
..code-block::diff
48+
49+
{
50+
...
51+
"scripts": {
52+
- "dev-server": "encore dev-server",
53+
+ "dev-server": "encore dev-server --public http://app.vm:8080",
54+
...
55+
}
56+
}
57+
58+
After restarting Encore and reloading your web page, you will probably face different issues:
59+
60+
..code-block::text
61+
62+
GET http://app.vm:8080/build/vendors~app.css net::ERR_CONNECTION_REFUSED
63+
GET http://app.vm:8080/build/runtime.js net::ERR_CONNECTION_REFUSED
64+
65+
Encore understood our modification but it's still not working. There is still two things to do.
66+
67+
Allow external access
68+
~~~~~~~~~~~~~~~~~~~~~
69+
70+
You must configure how you run the `webpack-dev-server`_.
71+
This can easily be done in your ``package.json`` by adding ``--host 0.0.0.0`` argument:
72+
73+
..code-block::diff
74+
75+
{
76+
...
77+
"scripts": {
78+
- "dev-server": "encore dev-server --public http://app.vm:8080",
79+
+ "dev-server": "encore dev-server --public http://app.vm:8080 --host 0.0.0.0",
80+
...
81+
}
82+
}
83+
84+
..warning::
85+
86+
Using ``--host 0.0.0.0`` makes your development server accept all incoming connections.
87+
Be sure to run the development server inside your virtual machine and not outside, otherwise other computers can have access to it.
88+
89+
Fix "Invalid Host header" issue
90+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
91+
92+
Webpack will respond ``Invalid Host header`` when trying to access files from the dev-server.
93+
To fix this, add the argument ``--disable-host-check``:
94+
95+
..code-block::diff
96+
97+
{
98+
...
99+
"scripts": {
100+
- "dev-server": "encore dev-server --public http://app.vm:8080 --host 0.0.0.0",
101+
+ "dev-server": "encore dev-server --public http://app.vm:8080 --host 0.0.0.0 --disable-host-check",
102+
...
103+
}
104+
}
105+
106+
..warning::
107+
108+
This is usually not recommended to disable host checking, `more information here<https://webpack.js.org/configuration/dev-server/#devserverdisablehostcheck>`_.
109+
110+
.. _`NFS`:https://en.wikipedia.org/wiki/Network_File_System
111+
.. _`polling`:https://webpack.js.org/configuration/watch/#watchoptionspoll
112+
.. _`webpack-dev-server`:https://webpack.js.org/configuration/dev-server/

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp