Phoenix : changer de bundler

Une version mise à jour de cet article est disponible ici

Phoenix est le framework de référence pour Elixir. Lorsque vous initialisez un projet, il embarque Brunch pour bundler les différentes dépendances. Et si, comme moi vous préférez utiliser un autre outil, nous allons voir qu’il est simple d’en changer.

Cet exercice permet de traiter les points suivants :

• configurer correctement son bundler
• changer le script surveillant les modifications de fichiers
• veiller à ce que le fichiers statiques puissent être servi correctement
• modifier les chemins chargeant nos fichiers dans les templates

Créons un nouveau projet, sans “ecto” pour ne pas avoir besoin de configurer une base de données :

mix phx.new MyApp --no-ecto

Parmi les bundler, il y en a un que j’apprécie particulièrement : Parcel.

Configurer Parcel

Parcel se veut 0 configuration il est donc simple à configurer 😅. Je vous propose d’utiliser l’ES6, nous allons donc avoir besoin de Babel pour traduire notre code.

Depuis le répertoire assets, il faut executer les commandes suivante qui permettent respectivement :

• d’ajouter Parcel et une configuration Babel en dépendances
• supprimer le fichier de configuration de Brunch
• supprimer les dépendances liées à Brunch

yarn add -DE parcel-bundler babel-preset-env
rm -rf brunch-config.js
yarn remove brunch babel-brunch clean-css-brunch uglify-js-brunch

Votre package.json doit maintenant contenir ces dépendances :

Parcel est 0 configuration mais pas Babel, il faut lui indiquer la manière dont il va traduire notre Javascript moderne en Javascript “archaïque”. Pour cela, créez un .babelrc contenant la configuration suivante :

Créez aussi un app.js et un app.css et insérez les fragment de code suivant ou équivalent. Vous pouvez aussi réutiliser les CSS et JS généré par défaut. Le but étant de s’assurer que nos codes CSS et JS sont pris en compte, donc il n’est pas nécessaire de créer un code complexe :

app.js

app.css

L’arborescence de votre répertoire assets doit à minima contenir ces fichiers. Les dossiers css et js ne sont pas nécessaires dans notre exemple je les ai donc supprimé, mais vous pouvez les conserver

Watcher les modifications de fichiers

Il faut maintenant indiquer à Phoenix qu’il doit écouter les changements concernant les fichiers CSS et JS généré avec Parcel. Dans le fichier config/dev.ex, il faut remplacer :

par :

Lancez le serveur depuis le répertoire principal via :

mix phx.server

Vous devez voir le message “ ✨Built in …s”. Si c’est le cas Parcel fonctionne pour vous 😃

Servir les fichiers statiques

La commande que nous venons de lancer a généré des fichiers dans le dossier priv/static. Mais actuellement il ne peuvent pas être utilisé par notre application. Il faut d’abord les autoriser à être servi.

Dans le fichier lib/my_app_web/endpoint.ex, il faut remplacer les valeurs de la clé “only”. Elles représentent les dossiers et/ou fichiers autorisés à être servi statiquement.

Dans notre cas on conservera uniquement les fichiers app.js et app.css.

Charger nos fichier statiques depuis les templates

Enfin dans le fichier app.html.eex il faut changer les chemins permettant d’accéder aux resources statiques. Ces chemins doivent correspondre aux fichiers générés dans le dossier priv/static et être autorisés dans notre endpoint.ex. C’est exactement ce que l’on vient de faire 💪

Anciens chemins :

Nouveaux chemins :

Maintenant si on se rend sur http://localhost:4000. Un “Meeeeeeeeh” doit apparaitre dans la console et la police de caractère doit être “sans-serif” 🎉

Bilan

Peut importe que vous choisissiez de garder Brunch, d’utiliser Rollup, Webpack, Parcel… Si vous choisissez de modifier la configuration de votre bundler, il faut penser à :

• configurer correctement son bundler (facile avec Parcel)
• changer le script surveillant les modifications de fichiers (dev.exs)
• veiller à ce que le fichiers statiques puissent être servi correctement (endpoint.ex)
• modifier les chemins dans les templates (app.html.eex)

Sources

Je me suis inspiré de ce dépôt Github. La base de code reprend la structure d’une ancienne version de Phoenix, ne l’utilisez pas tel quel si vous voulez être à jour.