Assets

Comment sont gérés les fichier JS et CSS dans Symfony ?

Mise en place de Webpack/Encore pour gérer les fichiers JS et CSS. C'est un module Symfony qui utilise Webpack.

Pour compiler les fichiers, il faut lancer la commande suivante :

yarn encore dev --watch

Javascript

Librairies utilisées

Zepto (jQuery-like light)

J'utilise la librairie Zepto qui est un jQuery très léger. Pour l'installer, il faut un package spécifique pour Webpack (webpack-zepto) :

yarn add webpack-zepto --dev

jQuery

Finalement, pour utiliser Select2 par exemple, il faut jQuery…

yarn add jquery

JSRouting

Le bundle FOSJsRoutingBundle permet d'utiliser les routes déclarées dans les controllers Symfony directement dans les fichiers Javascript.

Par contre, lorsqu'on rajoute une route, il ne faut pas oublier de lancer la commande suivante pour exporter les routes dans un fichier JSON :

bin/console fos:js-routing:dump --format=json --target=public/js/fos_js_routes.json

Ce fichier est ensuite utilisé dans le fichier Javascript via les lignes suivantes :

import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
const routes = require('../../public/js/fos_js_routes.json');

# Génération d'une route
Routing.setRoutingData(routes);

CKEditor

Pour le WYSIWYG des textes, j'utilise la librairie CKEditor. Pour le mettre en place :

# Installer le bundle
composer require friendsofsymfony/ckeditor-bundle

# Ajouter à Webpack/Encore
yarn add ckeditor@^4.0.0

Il est possible de créer des plugins pour CKEditor, pour ajouter de nouvelles fonctionnalités (comme l'intégration de champs personnalisés dans le contenu).

CSS

Les fichiers CSS sont générés via Sass. Pour cela, il faut installer les modules correspondants via la commande :

yarn add sass-loader@^7.0.1 node-sass --dev

Icônes

Les icônes de la plateforme sont fournies par Font Awesome.

Pour utiliser la librairie, il faut l'ajouter au projet :

yarn add @fortawesome/fontawesome-free

Puis, il faut mettre les lignes suivantes dans le fichier app.js :

require('@fortawesome/fontawesome-free/css/all.min.css');
require('@fortawesome/fontawesome-free/js/all.js');

Charte graphique

Intégration dans une page

Il est possible de déclarer un fichier Javascript spécifique à une page. Pour cela, il faut définir une "entry" dans le fichier de configuration de Webpack :

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

Puis utiliser le nom de cette entrée dans la page désirée :

{{ encore_entry_script_tags('ma_page') }}

Il est aussi possible de faire ça avec un fichier CSS en utilisant la fonction encore_entry_link_tags('ma_page').