Skip to content

Commit c784a48

Browse files
javiereguiluzjaviereguiluz
committed
Merge branch '3.4' into 4.2
* 3.4: Encore: add guide to use Encore in a virtual machine
2 parents a5f6f10 + 892bbda commit c784a48

File tree

3 files changed

+122
-13
lines changed

3 files changed

+122
-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

‎frontend/encore/virtual-machine.rst

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
Using Encore in a Virtual Machine
2+
=================================
3+
4+
Encore is compatible with virtual machines such as `VirtualBox`_ and `VMWare`_
5+
but you may need to make some changes to your configuration to make it work.
6+
7+
File Watching Issues
8+
--------------------
9+
10+
When using a virtual machine, your project root directory is shared with the
11+
virtual machine using `NFS`_. This introduces issues with files watching, so
12+
you must enable the `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 milliseconds
23+
});
24+
25+
Development Server Issues
26+
-------------------------
27+
28+
Configure the Public Path
29+
~~~~~~~~~~~~~~~~~~~~~~~~~
30+
31+
.. note::
32+
33+
You can skip this section if your application is running on
34+
``http://localhost`` instead a custom local domain-name like
35+
``http://app.vm``.
36+
37+
When running the development server, you will probably see the following errors
38+
in the web console:
39+
40+
.. code-block:: text
41+
42+
GET http://localhost:8080/build/vendors~app.css net::ERR_CONNECTION_REFUSED
43+
GET http://localhost:8080/build/runtime.js net::ERR_CONNECTION_REFUSED
44+
...
45+
46+
If your Symfony application is running on a custom domain (e.g.
47+
``http://app.vm``), you must configure the public path explicitly in your
48+
``package.json``:
49+
50+
.. code-block:: diff
51+
52+
{
53+
...
54+
"scripts": {
55+
- "dev-server": "encore dev-server",
56+
+ "dev-server": "encore dev-server --public http://app.vm:8080",
57+
...
58+
}
59+
}
60+
61+
After restarting Encore and reloading your web page, you will probably see
62+
different issues in the web console:
63+
64+
.. code-block:: text
65+
66+
GET http://app.vm:8080/build/vendors~app.css net::ERR_CONNECTION_REFUSED
67+
GET http://app.vm:8080/build/runtime.js net::ERR_CONNECTION_REFUSED
68+
69+
You still need to make other configuration changes, as explained in the
70+
following sections.
71+
72+
Allow External Access
73+
~~~~~~~~~~~~~~~~~~~~~
74+
75+
Add the ``--host 0.0.0.0`` argument to the ``dev-server`` configuration in your
76+
``package.json`` file to make the development server accept all incoming
77+
connections:
78+
79+
.. code-block:: diff
80+
81+
{
82+
...
83+
"scripts": {
84+
- "dev-server": "encore dev-server --public http://app.vm:8080",
85+
+ "dev-server": "encore dev-server --public http://app.vm:8080 --host 0.0.0.0",
86+
...
87+
}
88+
}
89+
90+
.. caution::
91+
92+
Make sure to run the development server inside your virtual machine only;
93+
otherwise other computers can have access to it.
94+
95+
Fix "Invalid Host header" Issue
96+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
97+
98+
Webpack will respond ``Invalid Host header`` when trying to access files from
99+
the dev-server. To fix this, add the argument ``--disable-host-check``:
100+
101+
.. code-block:: diff
102+
103+
{
104+
...
105+
"scripts": {
106+
- "dev-server": "encore dev-server --public http://app.vm:8080 --host 0.0.0.0",
107+
+ "dev-server": "encore dev-server --public http://app.vm:8080 --host 0.0.0.0 --disable-host-check",
108+
...
109+
}
110+
}
111+
112+
.. caution::
113+
114+
Beware that `it's not recommended to disable host checking`_ in general, but
115+
here it's required to solve the issue when using Encore in a virtual machine.
116+
117+
.. _`VirtualBox`: https://www.virtualbox.org/
118+
.. _`VMWare`: https://www.vmware.com
119+
.. _`NFS`: https://en.wikipedia.org/wiki/Network_File_System
120+
.. _`polling`: https://webpack.js.org/configuration/watch/#watchoptionspoll
121+
.. _`it's not recommended to disable host checking`: https://webpack.js.org/configuration/dev-server/#devserverdisablehostcheck

0 commit comments

Comments
 (0)