{%hackmd @alternative-rvb/main-theme %} # 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](https://getcomposer.org/) - [symfony-cli](https://www.ibexa.co/blog/setting-up-a-php-development-environment-for-symfony-with-windows-and-wsl2) - zip C'est parti, on reprend depuis le début : À l'aide de bash WSL (pour la débrouille) ```shell sudo apt install apache2 php php-mysql php-xml php-intl zip ``` ## Installer Symfony-cli ```shell= wget https://get.symfony.com/cli/installer -O - | bash sudo mv /home/<user>/.symfony/bin/symfony /usr/local/bin/symfony ``` ## Pour commencer ```shell= 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()` --- ```shell 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 :smile: --- 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/ :::warning 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 symfony console make:controller ``` ## Lier feuille de style ```symfony {{asset('chemin/vers/style.css')}} ``` ## Créer l'entité User ```symfony symfony console make:user ``` :::info Doctrine est un **ORM** = Object Relational Mapper ::: Lier la base de données dans `.env` ```symfony 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 😉 {%hackmd @alternative-rvb/contact %}