Permission is granted to copy, distribute and/or modify this document
under the terms of the GNU Free Documentation License, Version 1.3
or any later version published by the Free Software Foundation;
with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
A copy of the license is included in the section entitled "GNU
Free Documentation License".
# 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:
...
...