- Docker
- Docker-compose
- Symfony 7 utilise le asset_mapper. Il n'y a donc plus besoin de webpack et par conséquent plus besoin de NodeJS
- Apache (Accessible en HTTP seulement pour un projet local)
- PHP 8.2
- MySQL 8.0
- PhpMyAdmin
- Mailcatcher
- Composer 2
- Git
- Symfony CLI
Le projet possède l'architecture suivante :
/apache/default.conf
/app (*)
/mysql
/php/Dockerfile
.gitignore
docker-compose.yaml
README.md
(*) Le répertoire /app sera ajouté lors de la création du nouveau projet Symfony.
Le fichier php/Dockerfile
va se charger d'installer "tout ce qu'il faut"...
Le fichier docker-compose.yaml
va créer les containers et attribuer les identifiants
Ajoutez votre e-mail et votre nom pour la configuration Git en fin de fichier.
A la racine du projet, créez un nouveau projet Symfony :
symfony new --webapp app
A la racine du projet, éxécutez dans un terminal :
docker-compose up
- Se connecter au container :
docker-compose exec php /bin/bash
- Utiliser la CLI Symfony comme d'habitude (exemple pour créer un controller) :
symfony console make:controller
Exemple pour SplideJS :
php bin/console importmap:require @splidejs/splide
Exemple pour Bootstrap :
php bin/console importmap:require bootstrap
php bin/console importmap:require monpackageJS
va remplir le fichier importmap.php à la racine de Symfony (/app).
Ce fichier est lu et compilé.
Les fichiers du package JS sont placés dans app/assets/vendor
Pour réinstaller les fichiers JS sur un autre serveur : php bin/console importmap:install
Vérifier les mises à jour éventuelles de tous les packages JS installés : php bin/console importmap:outdated
Vérifier les mises à jour pour un package JS en particulier : php bin/console importmap:outdated @splidejs/splide
Mettre à jour les packages JS : php bin/console importmap:update
... pour un seul package JS : php bin/console importmap:update @splidejs/splide
php bin/console importmap:install
php bin/console sass:build
(si vous utilisez du SCSS)php bin/console asset-map:compile
- est-ce que le serveur utilise HTTP/2 (ou même HTTP/3) ? (A configurer dans Apache)
- est-ce que les assets sont compressés par le serveur web ? Apache devrait utiliser
gzip
(A aconfigurer dans Apache). Un service comme CloudFlare permet également de minifier les fichiers pour réduire la taille - est-ce que les Expire headers sont configurés et est-ce qu'ils sont suffisamment longs ? (jusqu'à 1 an) (A configurer dans Apache)
- Page d'accueil Symfony 7 : http://127.0.0.1:8080
- PhpMyAdmin : http://127.0.0.1:8081
- Mailcatcher : http://127.0.0.1:8082
Host: 127.0.0.1:4306
Login: symfony
Password: symfony
Database: main
MySQL root password: secret
Upload limit: 20 Mb On peut changer cette limite dans le docker-compose.yaml
Le CSS est placé dans app/assets/styles Vous pouvez utiliser directement le fichier app/assets/styles/app.css
Vous pouvez également utiliser du SCSS comme suit dans app/assets/styles :
- renommez le fichier app.css en app.scss
- vous pouvez créer d'autres fichiers CSS tels que variables.css, fonts.css, etc. dans app/assets/styles/ puis vous les importez dans app/assets/app.js, par exemple :
import './styles/fonts.css'
import './styles/variables.css'
import './styles/app.css'
Tous les fichiers seront dans app/assets/styles/
a. composer require symfonycasts/sass-bundle
b. Faites pointer votre style dans votre template base.html.twig :
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('styles/app.scss') }}">
{% endblock %}
Vérifiez que vous avez bien app.scss
ici.
c. Buildez les assets en continu :
php bin/console sass:build --watch
(Omettez le --watch pour builder "à la main")
d. Puis, lors du déploiement en PROD, buildez et compilez :
php bin/console sass:build
php bin/console asset-map:compile
Le "compile" copiera physiquement tous les fichiers de vos répertoires mappés vers public/assets/ afin qu'ils soient servis directement par votre serveur Web.