Comment utiliser du JS sur votre site Webflow (la bonne façon)

Cela fait un peu plus de 2 ans que j’interviens sur des projets Webflow, pour de l’intégration ou pour coder des fonctionnalités custom. Au début j’utilisais le custom code directement dans Webflow, mais le temps que met le site pour se republier + l‘absence d’auto-complétion et tout le tralala habituel des IDE me faisait perdre pas mal de temps, surtout pour fixer des bugs.

Par la suite, j’ai décidé de ne plus passer par Webflow pour le JS. Je demandais le lien de la pré-production du site et je codais dans la console dévelopeur. Je gagnais du temps + un tout petit peu d’auto-complétion et ça me permettait d’envoyer un code fonctionnel directement au client.

Par contre, pour implémenter des libs externes ou pour organiser un projet un peu plus ambitieux ça commençait à être limite. En plus, utiliser l’historique Slack comme “outil de versionning” c’est vraiment pas une bonne idée.‍

Puis un beau jour, je me suis motivé à trouver la meilleure organisation pour coder en JS. Git, un vrai IDE, Yarn, ViteJs, TypeScript, ESLint et Pettier ENFIN réunis pour Webflow. Ce setup m’a fait gagner un temps inconsidérable ! En plus d’être pratique pour moi, il l’est pour les clients et les intégrateurs Webflow. Il suffit de coller un script dans le custom code de Webflow et de lancer une commande sur notre ordi et pouf vous voilà en capacité de coder n’importe quel projet JS avec vos libs et votre stack préférées.

La cerise sur le gâteau est qu’avec Netlify + GitHub, on a un build automatique de notre code et un lien personnalisable pour le récupérer. Plus besoin d’envoyer des versions du code à votre client. Tout est automatisé.

‍

Les différentes façon d’intégrer du JS sur un projet Webflow

Je pense qu’une petite revue des différentes façons de gérer son JS avec Webflow est importante pour comprendre les soucis que j’ai cherché à régler avec mon template.‍

Utiliser le custom code directement dans Webflow

Pas top car on a pas une bonne coloration syntaxique ni d’auto-complétion. On est limité à un certains nombre de caractères. À chaque modification, il faut republier le site. Si le dev JS n’est pas l’intégrateur sur Webflow il faut envoyer le nouveau code, attendre que la personne le change, publie etc… C’est long et fastidieux.

Utiliser des fichiers JS au format .txt

On peut utiliser un vrai IDE et on a plus de limite de caractères. Par contre, à chaque modification, il faut changer l’extension du fichier JS en .txt, mettre le fichier sur Webflow et republier le site. On peut faire mieux !

Utiliser un bundler (ViteJs), git et un CDN

La perfection !

• On peut utiliser l’écosystème de NodeJs, avoir accès à tous les packages JS disponibles sur NPM, convertir notre code trop moderne en un JS compatible avec la grande majorité des navigateurs, optimiser notre code en production en le minimisant, avoir nos fichiers JS dispos sur un serveur de développement en local lors du développement, ce qui fait qu’on a pas à republier le site à chaque fois qu’une ligne est modifié

• On a le HMR qui actualise la page à chaque fois qu’on sauvegarde nos fichiers

• On peut séparer notre code dans différents fichiers pour une meilleure organisation

• On peut ajouter des plugins à ViteJs pour faire tout un tas de trucs trop cool

• On peut utiliser git et Github pour héberger notre code et le versionner

• On peut plugger tout ça à Netlify pour qu’à chaque push Netlify lance le build du JS et nous le serve sur une URL personnalisée ! On peut même utiliser TypeScript, React, Vue, Preact etc… le tout gratuitement 🔥

Les templates JS et TS avec ViteJs

J’ai créé deux templates, un qui utilise du JS vanilla et l’autre qui utilise Typescript. La documentation FR et EN se trouve dans les ReadMe des projets.

Template ViteJs + JS

https://github.com/armandsalle/vite-javascript-webflow

Template ViteJs + TS

https://github.com/armandsalle/vite-typescript-webflow

J’espère que vous pourrez en profiter autant que moi, et si vous avez des questions n’hésitez pas à me contacter sur Twitter @ArmandSalle 🥨