Symfony et Vue.Js — Partie 1 : Installation et configuration
Vous maitrisez déjà Symfony mais vous aimeriez ajouter un peu de dynamisme dans votre frontend ? Parfait, cet article est fait pour vous !
Voyons ensemble comment utiliser le Framework Javascript Vue.js avec le Framework PHP Symfony afin de profiter du meilleur des deux mondes.
Si vous utilisez Windows, je vous propose l’un de mes articles précédent qui vous permettra de facilement monter un environnement de développement sous Windows :
Les prérequis
Tout d’abord, commençons par installer tous les prérequis. Je vous les listes et vous laisse le soin de les installer avant de commencer.
Composer : Il va nous permettre de gérer les dépendances PHP.
L’exécutable Symfony : En complément du Framework du même nom, il va nous permettre d’initialiser le projet et simplifier certaines tâches
Node.js : Il va nous permettre d’utiliser Webpack pour activer Vue.js (plus de détails plus tard)
Download | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
Yarn : Un gestionnaire de dépendance comme Composer mais pour du Javascript
C’est bon, tout est installé ? Passons à l’initialisation de notre projet.
La création du projet
Utilisons l’exécutable Symfony pour créer un nouveau projet. En ligne de commande, placez-vous dans le répertoire où vous désirez créer votre projet et tapez :
symfony new --full MyVueProject Un nouveau projet Symfony “MyVueProject” va s’initialiser et le Framework Symfony va se télécharger avec toutes les dépendances nécessaires.
Ici, j’utilise l’argument--full pour télécharger toutes les dépendances de base de Symfony d’un seul coup mais ce n’est pas obligatoire si elles ne vous sont pas toutes nécessaires.
Installation de Webpack-Encore
Webpack est un module “Bundler”. C’est à dire qu’il va nous permettre de gérer nos modules Javascript. Bien qu’ici nous allons l’utiliser avec Symfony c’est un outil que vous pouvez également utiliser en stand-alone.
Nous allons utiliser le Bundle Symfony “Webpack-Encore”. Il comprend Webpack ainsi que Encore qui va nous permettre de faciliter sa configuration et son intégration à Symfony. Pour cela nous allons le récupérer via Composer :
composer require symfony/webpack-encore-bundleNous devons également initialiser un projet Node avec ses modules de base à l’aide de Yarn :
yarn installUne fois ces deux commandes lancées, vérifiez que vous avez bien le fichier webpack.config.js et les répertoires assets/ et node_modules/ . Si ce n’est pas le cas, créez-les manuellement.
Si vous utilisez git, ajoutez node_modules/ à votre .gitignore pour éviter d’encombrer votre repository avec des milliers de modules Node.
Les bases de Webpack
Avant d’installer Vue.js, laissez-moi vous expliquer les bases de Webpack.
Webpack est donc un module Bundler, dans les faits, il va nous permettre d’utiliser des modules Node, de les organiser et d’y appliquer du pré-processing (comme de la mignification de code par exemple). Il va également nous permettre de gérer des feuilles de style CSS ou de compiler des feuilles de Style SCSS. Ce n’est pas tout ce donc Webpack est capable mais cela devrait vous donner un ordre d’idée de son utilité.
Webpack dispose d’un fichier de configuration où nous pourrons lui indiquer ce que nous souhaitons qu’il fasse :
webpack.config.js
Comme vu précédemment nous allons également utiliser Encore. Il s’agit d’un module JS qui va nous permettre de simplifier l’intégration de Webpack en remplaçant les fichiers de configuration par des fonctions Javascript.
Notre première compilation avec Webpack-Encore
A cette étape du projet, vous devriez trouver les fichiers suivants dans le répertoire assets :
assets/app.jsassets/styles/app.css
Si vous les ouvrez, vous devriez y trouver respectivement :
et :
Si ce n’est pas le cas, modifiez le contenu des fichiers.
Dans ce cas, c’est le fichier JS qui va charger le fichier CSS comme s’il s’agissait d’une dépendance. Sur de gros projet, ce fonctionnement va nous permettre d’organiser notre code en “module” ou le code Javascript et le CSS sont groupés de manière structurée.
Enfin, ouvrez le fichier webpack.config.js, il devrait contenir le code suivant à peu de choses près :
J’attire votre attention sur la ligne .addEntry(‘app’, ‘./assets/app.js’), c’est elle qui va indiquer à webpack de charger notre fichier app.js puis de le compiler. Il est possible de créer plusieurs “Entry” mais je ne le détaillerais pas dans cet article.
Pour le moment Vue.js n’est pas encore activé mais nous allons compiler ce code de démo pour vérifier que tout fonctionne correctement.
Pour compiler en mode “dev”
yarn encore devPour compiler en mode “production”
yarn encore productionUne fois compilé, les fichiers son copiés dans le répertoire public/build/
Vous aurez peut-être remarqué que nous compilons Encore au lieu de compiler Webpack. De cette manière, Encore se charge de la configuration de Webpack pour nous puis lance sa compilation de façon transparente.
Maintenant que nos ressources JS et CSS sont correctement compilées, nous voulons les utiliser dans notre application Symfony.
Pour cela, nous allons commencer par modifier le Template de base de notre application : templates/base.html.twig
Les fonctions twig encore_entry_script_tags() et encore_entry_link_tags() permettent d’inclure automatiquement les ressources compilées par Webpack. Le paramètre ‘app’ correspond au nom de l’”entrée” configurée dans Webpack à l’aide de la ligne .addEntry(‘app’, ‘./assets/app.js’).
Ensuite, créons un Controller permettant d’afficher ce Template :
Puis, avec l’aide de l’exécutable Symfony vous pouvez lancer un serveur web de test :
symfony server:startet vous rendre à l’adresse suivante pour voir le résultat :
http://127.0.0.1:8000/index
La page devrait apparaitre avec un fond gris, comme indiqué dans le CSS. Egalement, si vous ouvrez la console de développement de votre navigateur (F12), vous devriez voir le message :
Hello Webpack Encore! Edit me in assets/app.js
Voilà, nous avons compilé nos premières ressources. Si vous maitrisez l’anglais et que vous souhaitez en apprendre plus sur ce dont est capable Webpack-Encore, la documentation Symfony est là pour vous :
Installation de Vue.Js
Entrons dans le cœur du sujet, l’installation et l’activation de Vue.js.
Tout ce que vous avez à faire c’est ajouter la fonction .enableVueLoader() à Encore, comme ci-dessous (ligne 31) :
Maintenant que Vue.js est activé, la compilation de Webpack-Encore va charger toutes les dépendances automatiquement. Tout ce qu’il nous reste à faire c’est créer un peu de code Vue.js.
Modifions assets/app.js comme ci-dessous :
Je ne rentrerais pas trop dans le détail du fonctionnement de Vue.js ici, mais le code ci-dessus va nous permettre de créer une variable “message” utilisable dans un élément html possédant l’id “app”.
Ensuite nous allons modifier notre template templates/base.html.twig pour y ajouter l’élément “app” ainsi que la variable “message” :
Comme vous pouvez le voir, les variables Vue.js utilisent la même syntaxe {{ nomDeVariable }} que Twig. Pour éviter les conflits, nous allons utiliser les balises {% verbatim %} {% endverbatim %} qui indiquent à Twig de ne pas interpréter les balises {{ }} utilisées par Vue.js.
Une fois ceci fait, nous pouvons lancer Encore.
Lorsque vous relancerez Encore il est possible qu’il ne parvienne pas à récupérer les dépendances Vue.js dont il a maintenant besoin seul. Celui-ci vous donnera alors une commande à exécuter :
yarn add vue vue-loader vue-template-compiler --devpuis
yarn encore devSi tout s’est bien passé, lorsque vous retournez sur l’url précédente vous devriez obtenir une page contenant :
Hello Vue!
Allons un peu plus loin
Parfait, nous avons intégré un tout petit peu de Vue.js sur notre micro-application Symfony. En tant que tel, cela ne va pas beaucoup nous servir alors essayons d’aller plus loin.
Nous allons créer et utiliser des composants Vue.js
Commençons par créer un composant assets/DemoComponent.vue :
Une rapide explication de notre composant :
- <template>…</template>: Défini le template HTML que le composant va utiliser
- <script></script> : Défini la configuration et le comportement du composant (dont son nom)
Puis modifions app.js pour utiliser notre nouveau composant :
Au lieu de remplacer le tag {{ message }} comme précédemment, nous implémentons le composant DemoComponent directement sur la div possédant l’id #demoComponent
Enfin nous modifions le template base.html.twig pour inclure la div qui va contenir notre composant :
Relancez Encore et rendez-vous sur l’url précédente pour vérifier que tout à bien fonctionné. Vous devriez voir apparaitre :
Ceci est notre composant de démo !
Félicitation !
Pour aller encore plus loin sur Vue.js
Comme vous avez pu le voir, je me suis concentré sur l’implémentation de Vue.js dans Symfony et je n’ai pas expliqué en détail son fonctionnement en tant que tel. Vous trouverez plus d’information à ce sujet ainsi que quelques exemples dans la suite de cet article.
Je vous invite également à vous renseigner sur la documentation officielle.
Egalement, je vous propose cet autre article qui va un peu plus loin dans l’intégration de Vue.js sur une application Symfony :
Voilà, j’espère que cet article vous a plu ! Si c’est le cas, n’hésitez pas à me le faire savoir et à consulter mes articles précédents.
