Installation
On commence par télécharger l'installateur Symfony tel qu'expliqué ici :
Puis on installe l'application Symfony.
Avec cette commande, ce sera la version LTS (long term support) actuelle qui sera installée, ce qui garantit d'avoir un support durable. Mais on peut tout aussi bien choisir une version spécifique. Par exemple :
Pour ceux qui avaient l'habitude d'installer Symfony avec Composer, vous pouvez constater la rapidité accrue de téléchargement et d'installation.
On peut maintenant passer à l'étape suivante : l'installation des outils du front. J'ai nommé React, Babel et Webpack.
Dans le répertoire du projet, on initialise le fichier de configuration NPM qui servira à télécharger les packages nécessaires au projet :
Cela crée un fichier package.json quasiment vide. J'ai ajouté l'option "-f" pour ne pas avoir à répondre aux questions posées par NPM à l'initialisation.
On ajoute les packages du projet. Deux bonnes grosses lignes de commande pour ça :
Qu'est-ce que c'est que tous ces paquets ? De base, on aurait pu se contenter des packets babel et webpack mais les paquets concernant Sass et les loaders sont là pour intégrer Twitter Bootstrap que j'ai ajouté dans le projet.
En tout cas, ces commandes vont compléter le fichier package.json déjà créé. On va aussi ajouter un élément pour les scripts :
L'élément "scripts" du fichier package.json (à la racine du projet donc) est vide, ou bien ne contient qu'une ligne que vous pouvez effacer. Ajoutez le code tel que sur la capture d'écran ci-dessus :
Puis, il faut un fichier de configuration webpack.config.js à la racine du projet avec ce contenu :
Et enfin, un fichier webpack.dev-server.js :
Etant donné que le fichier de configuration (webpack.config.js) mentionne app.js et style.scss dans "entry", créons deux dossiers dans le dossier "app/Resources" :
js
scss
puis deux fichiers vides qui seront utilisés par le serveur webpack et que nous allons remplir plus tard :
dans app/Resources/js, le fichier app.js
dans app/Resources/scss, le fichier style.scss
Tout est prêt pour commencer à coder : un serveur Node webpack.dev-server (basé sur Express en fait) écoute les modifications sur le code, construit et sert le fichier bundle.js selon la configuration définie dans le fichier webpack.config.js.
Il reste donc à démarrer le serveur Symfony, en ligne de commande, à la racine du projet :
et la tâche (dans un deuxième terminal) qui sera utilisée pour le développement :
Cette commande lance, selon le fichier package.json, une commande Node qui démarre le serveur de développement de webpack. Aucun fichier n'est créé, il est en mémoire du serveur webpack et servi tel quel. Inutile donc de chercher le fichier bundle.js défini dans le "output" du fichier webpack.config.js. En revanche, on peut avoir un aperçu du fichier généré en se rendant à l'adresse http://127.0.0.1:3000/static/bundle.js. Ce fichier sera mis à jour à chaque changement dans les fichiers js que nous créerons dans la sous-partie "L'application côté front".
Pour la production, il suffira de lancer la commande
qui lancera webpack en mode production, c'est-à-dire qui créera un fichier js minifié, utilisable sans avoir à démarrer le serveur webpack donc.
Pour l'instant, nous sommes en phase de développement, on se contente donc de "npm start". Vous devez obtenir le message suivant dans votre terminal :
Si c'est bien le cas, on va créer l'application React. Elle sera incorporée à l'application Symfony. On va donc commencer par mettre en place les conditions pour que React puisse s'épanouir dans l'environnement qui l'accueillera.
Last updated