Symfony Encore

Out of the box Symfony 4.x comes with some useful tools to help bootstrap the tools required for frontend development.

By making some simple changes to a JS file in the root of the Symfony application you can quickly configure Webpack to handle compilation from SCSS to CSS, ES2015+ to ES5 etc.

Encore Commands

The commands used by Encore are detailed in the package.json file.

``

 {
     "devDependencies": {},
     "license": "UNLICENSED",
     "private": true,
     "scripts": {
         "dev-server": "encore dev-server",
         "dev": "encore dev",
         "watch": "encore dev --watch",
         "build": "encore production --progress"
     },
     "dependencies": {}
 }

There are two ways that Symfony will build the distributable JS/CSS payloads depending on the environment. dev, dev-server and watch build for the development environment and build will bundle things for production and takes the longest to run but produces the smallest and most performant version of the output.

To run the command, ensure yarn is installed and in the terminal call

yarn run dev
yarn run dev-server
yarn run watch
yarn run build

The watch command will observe the source files (as configured in the webpack.config.js file) and trigger a dev build when a change is observed. Watch is faster than running dev repeatedly, it is recommend that you use it at the very least.

The dev-server command sets up a hot reloading webpack dev server that will update the Javascript after a build without requiring a manual refresh of the browser. It does have the limitation that changes to CSS source files will not trigger an update.

Configuring the dev server inside an LXC/Docker container can be difficult but does work when set up correctly. Options for configuration go in to the webpack.config.js file.