Installer Symfony avec bootstrap 5

Voici un guide rapide pour installer bootstrap 5 avec sass dans Symfony

Prérequis

• php
• php-mysql
• php-xml
• php-intl
• composer
• symfony-cli
• zip

C'est parti, on reprend depuis le début :

À l'aide de bash WSL (pour la débrouille)

sudo apt install apache2 php php-mysql php-xml php-intl zip

Installer Symfony-cli

wget https://get.symfony.com/cli/installer -O - | bash
sudo mv /home/<user>/.symfony/bin/symfony /usr/local/bin/symfony

Pour commencer

symfony new project2021 --full
composer require symfony/webpack-encore-bundle => dépendances JS
npm install

• Allez dans assets/styles/
• Renommer app.css et en app.scss
• Modifier app.js et corriger le chemin vers app.scss
• Modifier webpack.config.js et décommenter .enableSassLoader()

---

npm install --save-dev node-sass sass-loader

voir également npm install sass-loader@^9.0.1 node-sass --save-dev
Sinon faire npm run build pour connaitre la bonne version

---

modifier templates/base.html.twig => voir https://symfony.com/doc/current/frontend/encore/simple-example.html

​​​​//CSS
​​​​{{ encore_entry_link_tags('app') }}
​​​​//JS
​​​​{{ encore_entry_script_tags('app') }}

---

​​​​npm run build

---

​​​​npm install postcss-loader autoprefixer --dev

---

Créer un fichier postcss.config.js à la racine du projet => voir https://symfony.com/doc/current/frontend/encore/postcss.html

​​​​module.exports = {
​​​​    plugins: {
​​​​        // include whatever plugins you want
​​​​        // but make sure you install these via yarn or npm!

​​​​        // add browserslist config to package.json (see below)
​​​​        autoprefixer: {}
​​​​    }
​​​​}

---

​​​​npm run build

---

​​​​npm install bootstrap@next

---

Ajouter import { Tooltip, Toast, Popover } from 'bootstrap'; dans assets/app.js

Voir : https://getbootstrap.com/docs/4.1/getting-started/webpack/

Si nécessaire installer popperjs

npm install @popperjs/core

---

Créer custom.scss dans assets/styles

puis ajouter les lignes suivantes dans app.scss

​​​​@import "custom";
​​​​@import "~bootstrap/scss/bootstrap";

---

​​​​npm run build

Attention aux erreurs, lire les messages de la console

---

​​​​symfony console make:controller Home

---

Modifier home.html.twig pour tester bootrap 5

---

Créer un controller

symfony console make:controller

Lier feuille de style

{{asset('chemin/vers/style.css')}}

Créer l'entité User

symfony console make:user

Doctrine est un ORM = Object Relational Mapper

Lier la base de données dans .env

symfony console doctrine:database:create

Référence : https://www.youtube.com/watch?v=Q0gBWIvzuEw&list=PL6Q2YG1–yUl9Zi57sm3vr03EvHx7qKJH&index=18&t=3s

Si vous avez ce tuto n'hésitez pas à laisser un commentaire ou visiter mon site.

Bonne chance 😉

www.alternative-rvb.com | Nicolas Malet | GITHUB | CODEPEN