Cover of the book Symfony 5: The Fast Track

Symfony 5: The Fast Track is the best book to learn modern Symfony development, from zero to production. +300 pages in full color showing how to combine Symfony with Docker, APIs, queues & async tasks, Webpack, Single-Page Applications, etc.

Buy printed version
Buy PDF version
  1. Home
  2. Documentation
  3. Frontend
  4. Using webpack-dev-server and HMR
WARNING: You are browsing the documentation for Symfony 4.1 which is not maintained anymore. Consider upgrading your projects to Symfony 5.1.

Using webpack-dev-server and HMR

4.1 version
Maintained
3.4 4.4 5.1 current 5.2 master
Unmaintained
3.3 4.0 4.2 4.3 5.0

Using webpack-dev-server and HMR

While developing, instead of using yarn encore dev --watch, you can use the webpack-dev-server:

1
$ yarn encore dev-server

This serves the built assets from a new server at http://localhost:8080 (it does not actually write any files to disk). This means your script and link tags need to change to point to this.

If you’re using the encore_entry_script_tags() and encore_entry_link_tags() Twig shortcuts (or are processing your assets through entrypoints.json in some other way), you’re done: the paths in your templates will automatically point to the dev server.

You can also pass options to the dev-server command: any options that are supported by the normal webpack-dev-server. For example:

1
$ yarn encore dev-server --https --port 9000

This will start a server at https://localhost:9000.

Note

This Webpack server is independent from Symfony’s development web server and you need to run both separately.

Using dev-server inside a VM

If you’re using dev-server from inside a virtual machine, then you’ll need to bind to all IP addresses and allow any host to access the server:

1
$ ./node_modules/.bin/encore dev-server --host 0.0.0.0 --disable-host-check

You can now access the dev-server using the IP address to your virtual machine on port 8080 - e.g. http://192.168.1.1:8080.

Hot Module Replacement HMR

Encore does support HMR, but only in some areas. To activate it, pass the --hot option:

1
$ ./node_modules/.bin/encore dev-server --hot

HMR currently works for Vue.js, but does not work for styles anywhere at this time.

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