The Chill assets (js, css, images, …) can be managed by Webpack Encore, which is a thin wrapper for Webpack in Symfony applications.


Webpack Encore needs to be run in a Node.js environment, using the Yarn package manager. This Node.js environment can be set up using a node docker image. The bash script set up a Node.js environment with an adequate configuration. Launch this container by typing:

$ bash

In this NodeJS environment, install all the assets required by Chill with:

node@b91cab4f7cfc:/app$ yarn install

This command will install all the packages that are listed in package.json.

Any further required dependencies can be installed using the Yarn package. For instance, jQuery is installed by:

node@b91cab4f7cfc:/app$ yarn add jquery --dev


Organize your assets

Chill assets usually lives under the /Resources/public folder of each Chill bundle. The Webpack configuration set up in webpack.config.js automatically loads the required assets from the Chill bundles that are used.

For adding your own assets to Webpack, you must add an entry in the webpack.config.js file. For instance, the following entry will output a file main.js collecting the js code (and possibly css, image, etc.) from ./assets/main.js.

.addEntry('main', './assets/main.js')

To gather the css files, simply connect them to your js file, using require. The css file is seen as a dependency of your js file. :

// assets/js/main.js

For finer configuration of webpack encore, we refer to the above-linked documentation.

Compile the assets

To compile the assets, run this line in the NodeJS container:

node@b91cab4f7cfc:/app$ yarn run encore dev

While developing, you can tell Webpack Encore to continuously watch the files you are modifying:

node@b91cab4f7cfc:/app$ yarn run encore dev --watch

Use the assets in the templates

Any entry defined in the webpack.config.js file can be linked to your application using the symfony asset helper:

    <link rel="stylesheet" href="{{ asset('build/app.css') }}">
    <script src="{{ asset('build/app.js') }}"></script>