diff --git a/source/development/assets.rst b/source/development/assets.rst new file mode 100644 index 000000000..3584ef3f6 --- /dev/null +++ b/source/development/assets.rst @@ -0,0 +1,104 @@ + +.. Copyright (C) 2014 Champs Libres Cooperative SCRLFS + 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". + +.. _forms: + +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: + + +.. code-block:: bash + + $ bash docker-node.sh + +In this NodeJS environment, install all the assets required by Chill with: + +.. code-block:: bash + + 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: + +.. code-block:: bash + + 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`. + +.. code-block:: 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. : + +.. code-block:: js + + // 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: + +.. code-block:: bash + + node@b91cab4f7cfc:/app$ yarn run encore dev + +While developing, you can tell Webpack Encore to continuously watch the files you are modifying: + +.. code-block:: bash + + 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: + +.. code-block:: html + + + ... + + + + ... + + + + + + + + +.. _Webpack Encore: https://www.npmjs.com/package/@symfony/webpack-encore +.. _Webpack: https://webpack.js.org/ diff --git a/source/development/index.rst b/source/development/index.rst index b4b6786c2..245824c4e 100644 --- a/source/development/index.rst +++ b/source/development/index.rst @@ -31,13 +31,14 @@ As Chill rely on the `symfony `_ framework, reading the fram Testing Useful snippets manual/index.rst + Assets Layout and UI ************** .. toctree:: :maxdepth: 2 - + Layout / Template usage Classes and mixins Widgets