{%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)

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 :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 console make:controller

## Lier feuille de style

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

## Créer l'entité User

symfony console make:user

:::info
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 😉

{%hackmd @alternative-rvb/contact %}