Using webpack-dev-server and HMR

dev-server Options

The dev-server command supports all the options defined by webpack-dev-server. You can set these options via command line options:

1

$ npm run dev-server -- --port 9000

You can also set these options using the Encore.configureDevServerOptions() method in your webpack.config.js file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// webpack.config.js
// ...

Encore
    // ...

    .configureDevServerOptions(options => {
        options.server = {
            type: 'https',
            options: {
                key: '/path/to/server.key',
                cert: '/path/to/server.crt',
            }
        }
    })
;

Enabling HTTPS using the Symfony Web Server

If you're using the Symfony web server locally with HTTPS, you'll need to also tell the dev-server to use HTTPS. To do this, you can reuse the Symfony web server SSL certificate:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// webpack.config.js
  // ...
+ const path = require('path');

  Encore
      // ...

+     .configureDevServerOptions(options => {
+         options.server = {
+             type: 'https',
+             options: {
+                 pfx: path.join(process.env.HOME, '.symfony5/certs/default.p12'),
+             }
+         }
+     })

CORS Issues

If you experience issues related to CORS (Cross Origin Resource Sharing), set the following option:

1
2
3
4
5
6
7
8
9
10
11

// webpack.config.js
// ...

Encore
    // ...

    .configureDevServerOptions(options => {
        options.allowedHosts = 'all';
        // in older Webpack Dev Server versions, use this option instead:
        // options.firewall = false;
    })

Beware that this is not a recommended security practice in general, but here it's required to solve the CORS issue.

Hot Module Replacement HMR

Hot module replacement is a superpower of the dev-server where styles and (in some cases) JavaScript can automatically update without needing to reload your page. HMR works automatically with CSS (as long as you're using the dev-server and Encore 1.0 or higher) but only works with some JavaScript (like Vue.js).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// webpack.config.js
// ...

Encore
    // ...

    .configureDevServerOptions(options => {
        options.liveReload = true;
        options.static = {
            watch: false
        };
        options.watchFiles = {
            paths: ['src/**/*.php', 'templates/**/*'],
        };
    })