Ajouter Select2 (Jquery) à Symfony 5 avec Webpack Encore

On va ici découvrir comment ajouter Select2 à Symfony en utilisant Webpack-Encore. On installera également Bootstrap 5. Nous verrons également comment éventuellement changer de version de NodeJS à la vollée, ce qui est plutôt pratique lors de certains tests, sur certains matériels et environnements...

### Symfony ###

$ symfony new monprojet --full --version=lts

### NodeJS ###

$ sudo apt install nodejs

Sous Ubuntu 21.10 : NodeJS v17.1.0

### Nvm ###

Un petit utilitaire hyper pratique poir chnager de version de NodeJS à la volée : NVM

$ sudo apt install curl

$ curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash

$ source ~/.profile

On installe la dernière version de NodeJS :

$ nvm install node

Si vous voulez instgaller une version 16 de NodeJS :

$ nvm install 16

Si vous voulez utiliser la version 16 de NodeJS :

$ nvm use 16

 Now using node v16.4.2 (npm v7.18.1)

### Webpack-Encore ###

$ composer require symfony/webpack-encore-bundle

$ yarn install

Renommer le fichier /assets/styles/app.css en app.scss

 Modifier le fichier /assets/app.js :

../..

 import './styles/app.scss';

 ../..

Décommenter

.enableSassLoader()

dans le fichier webpack.config.js (fichier à la racine du projet)

$ yarn add sass-loader node-sass --save-dev

Vérifiez bien que le fichier /templates/base.html.twig possède les lignes adéquates pour "appeler" Webpack :

{% block stylesheets %}{{ encore_entry_link_tags('app') }}{% endblock %}

et

{% block javascripts %}{{ encore_entry_script_tags('app') }}{% endblock %}

Première compilation :

$ yarn encore dev-server

On installe PostCSS :

$ yarn add postcss-loader autoprefixer --dev

On crée un fichier postcss.config.js à la racine du projet avec :

module.exports = {

     plugins: {

         autoprefixer: {}

     }

 }

### BOOTSTRAP ###

On installe Bootstrap 5 :

$ yarn add bootstrap @popperjs/core

Puis on modifie le fichier /assets/app.js :

import { Tooltip, Toast, Popover } from 'bootstrap';

Fichier custom.css :

On crée un  fichier custom.css dans /assets/style qui servira à y déposer notre CSS perso.

Puis on importe tout ça dans /assets/styles/app.scss (on efface les 2 ou 3 lignes de CSS et on met le code suivant à la place) :

@import "custom";

@import "~bootstrap/scss/bootstrap";

Et on recompile :

$ yarn encore dev-server

Si vous n'avez pas d'erreur de compilation, Boostrap devrait être installé !

### SELECT2 ET JQUERY ###

On installe Jquery et Select2 :

$ yarn add jquery

$ yarn add select2

On "importe" Selerct2 dans le fichier assets/styles/app.scss :

@import "~select2/dist/css/select2.css";

On importe déclare Jquery et Select2 dans le fichier assets/app.app.js :

import $ from 'jquery';

require('select2')

$('select').select2();

Ici on vient d'appliquer Select2 à la balise <select> de tous les fichiers du site.

Et voila !