Symfony : afficher le site en développement sur son PC et son mobile

#Symfony #PHP #CSS

Je plante le décor : je suis entrain de développer un site avec Symfony. Une fois le serveur Symfony lancé, je peux visualiser le rendu du site sur mon écran de PC généralement à l'adresse 127.0.0.1:8000
Mais si je veux vérifier le responsive, je dois passer par la fonction inspecter de mon navigateur (Firefox, Chrome, ...) pour tester le site sous différents formats de mobiles, tablettes, etc. Pas toujours 100% fiable...
Existe t-il une solution pour voir le rendu du site sur son écran ET sur son écran de mobile en même temps ? OUI ! :)

En fait c'est vraiment très simple.
Premièrement, coupez votre 4g/5g sur votre mobile ... et passez sur votre Wifi, celui de votre box par exemple.
Puis, dans votre terminal ou depuis VSCode, etc., lancez le serveur de dev Symfony comme ceci :

symfony local:server:start --listen-ip 192.168.0.45 --port 8000

ou

php bin/console local:server:start --listen-ip 192.168.0.45 --port 8000

1. Ici, j'utilise la CLI Symfony dans le premier exemple mais vous pouvez également utiliser php bin/console
2. Je lance la commande local:server:start
A savoir que la doc Symfony pour Symfony 7.2 propose la commande server:start et non pas local:server:start. Avec server:start, ça fonctionne mais j'ai une erreur dans les logs. Doc pas à jour ? (https://symfony.com/doc/current/setup/symfony_server.html)
3. j'utilise l'option --listen-ip suivie de l'adresse IP du PC qui lance le serveur Symfony. Il faut donc chez vous adapter cette adresse à votre véritable adresse !
4. j'utilise l'option --port pour spécifier le port sur lequel le serveur Symfony va servir les fichiers... Traditionnellement Symfony propose le port 8000.

Et voila. Vérifiez sur votre PC que tout fonctionne, que le site s'affiche.
Puis prenez votre mobile en wifi, ouvrez un navigateur sur votre mobile et sur votre PC et rendez-vous sur http://192.168.0.45:8000 : et Boom! Vous devriez avoir votre site sur votre PC et sur votre mobile. A partir de là, c'est beaucoup plus simple de vérifier votre CSS pour le responsive ;)