Using Encore in a Virtual Machine

Edit this page

Encore is compatible with virtual machines such as VirtualBox and VMWare but you may need to make some changes to your configuration to make it work.

File Watching Issues

When using a virtual machine, your project root directory is shared with the virtual machine using NFS. This introduces issues with files watching, so you must enable the polling option to make it work:

1
2
3
4
5
6
7
8
// webpack.config.js

// ...

// will be applied for `encore dev --watch` and `encore dev-server` commands
Encore.configureWatchOptions(watchOptions => {
    watchOptions.poll = 250; // check for changes every 250 milliseconds
});

Development Server Issues

Configure the Public Path

Note

You can skip this section if your application is running on http://localhost instead a custom local domain-name like http://app.vm.

When running the development server, you will probably see the following errors in the web console:

1
2
3
GET http://localhost:8080/build/vendors~app.css net::ERR_CONNECTION_REFUSED
GET http://localhost:8080/build/runtime.js net::ERR_CONNECTION_REFUSED
...

If your Symfony application is running on a custom domain (e.g. http://app.vm), you must configure the public path explicitly in your package.json:

1
2
3
4
5
6
7
8
{
      ...
      "scripts": {
-        "dev-server": "encore dev-server",
+        "dev-server": "encore dev-server --public http://app.vm:8080",
          ...
      }
  }

After restarting Encore and reloading your web page, you will probably see different issues in the web console:

1
2
GET http://app.vm:8080/build/vendors~app.css net::ERR_CONNECTION_REFUSED
GET http://app.vm:8080/build/runtime.js net::ERR_CONNECTION_REFUSED

You still need to make other configuration changes, as explained in the following sections.

Allow External Access

Add the --host 0.0.0.0 argument to the dev-server configuration in your package.json file to make the development server accept all incoming connections:

1
2
3
4
5
6
7
8
{
      ...
      "scripts": {
-        "dev-server": "encore dev-server --public http://app.vm:8080",
+        "dev-server": "encore dev-server --public http://app.vm:8080 --host 0.0.0.0",
          ...
      }
  }

Caution

Make sure to run the development server inside your virtual machine only; otherwise other computers can have access to it.

Fix "Invalid Host header" Issue

Webpack will respond Invalid Host header when trying to access files from the dev-server. To fix this, set the allowedHosts option:

1
2
3
4
5
6
7
8
9
// webpack.config.js
// ...

Encore
    // ...

    .configureDevServerOptions(options => {
        options.allowedHosts = all;
    })

Caution

Beware that it's not recommended to set allowedHosts to all in general, but here it's required to solve the issue when using Encore in a virtual machine.

This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.
TOC
    Version