Assets¶
The Chill assets (js, css, images, …) can be managed by Webpack Encore, which is a thin wrapper for Webpack in Symfony applications.
Installation¶
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 docker-node.sh set up a Node.js environment with an adequate configuration. Launch this container by typing:
$ bash docker-node.sh
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
Usage¶
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
require('../css/app.css');
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:
<head>
...
<link rel="stylesheet" href="{{ asset('build/app.css') }}">
</head>
<body>
...
<script src="{{ asset('build/app.js') }}"></script>
</body>