Webflow est un outil puissant pour concevoir des sites web sans code, mais lorsqu'il s'agit d'ajouter du code personnalisé (JavaScript, TypeScript, etc.), les options natives peuvent être limitées. Pour un développement plus fluide et efficace, nous pouvons utiliser ViteJS en local afin de gérer notre code custom tout en profitant de ses performances et de ses outils modernes.

Dans cet article, nous allons voir comment mettre en place un environnement de développement local avec ViteJS pour Webflow, afin de tester et déployer notre code plus rapidement.

Pourquoi utiliser ViteJS avec Webflow ?

Webflow permet d'ajouter des scripts personnalisés directement dans l'interface, mais cela présente plusieurs inconvénients :

• L'édition et le test du code directement dans Webflow sont fastidieux.

• Aucune gestion avancée des modules JavaScript.

• Pas de hot-reloading pour voir les modifications en temps réel, besoin de déployer tout le site à chaque modification.

• Difficile d'utiliser TypeScript ou d'autres outils modernes sans une compilation manuelle.

En utilisant ViteJS en local, nous bénéficions de :

• Un serveur de développement rapide avec hot-reloading.

• Un support natif pour TypeScript, JSX et les modules ES6.

• Une meilleure organisation du code avec des fichiers séparés et un bundler moderne.

• Une gestion simplifiée des dépendances via npm.

Mise en place de l'environnement local

1. Initialisation d'un projet Vite

Tout d'abord, nous allons créer un projet Vite dans un dossier local :

npm create vite@latest webflow-custom  
cd webflow-custom
npm install

Cette commande initialise un projet avec Vite.

2. Configuration de ViteJS

Dans le fichier vite.config.js, nous allons configurer le serveur pour s'assurer qu'il fonctionne correctement avec notre projet Webflow.

import { defineConfig } from 'vite';  

export default defineConfig({         
  cors: '*',         
  host: 'localhost',         
  hmr: {             
  	host: 'localhost',            
  }, 
}); 

‍

3. Création du code personnalisé

Dans src/main.js, nous allons ajouter un script simple qui modifie le DOM de Webflow :

document.addEventListener("DOMContentLoaded", () => {   
  console.log("Webflow custom script loaded!"); 
}); 

‍

4. Test en local avec Webflow

Nous allons maintenant tester notre code en local avant de l'intégrer à Webflow :

npm run dev

• Ouvrez Webflow dans un onglet.

• Chargez votre script dans Webflow  via Settings > Custom Code > Footer Code en utilisant une balise <script type=”module” src=”http://localhost:5173/main.js”> pointant vers votre fichier local.

5. Déploiement du code vers Webflow

Une fois que votre code fonctionne bien en local, vous devez le compiler et l'ajouter à Webflow :

npm run build

‍

Cela génère un fichier minifié dans dist/main.js. Copiez ce fichier et ajoutez-le dans Webflow via Settings > Custom Code > Footer Code.

Points positifs et négatifs

Avantages

• 🚀 Hot-reloading pour tester rapidement les modifications.

• 🎯 Modularité et organisation du code.

• 🛠 Support des dernières technologies (ES6+, TypeScript, modules, etc.).

• ⚡ Performance améliorée grâce à un bundler moderne.

Inconvénients

• 💻 Nécessite une configuration initiale par rapport à l’éditeur Webflow natif.

• 🔧 Fichiers à importer manuellement après chaque mise à jour.

• 🌐 Pas d’intégration directe avec Webflow, il faut toujours uploader les scripts.

L'utilisation de ViteJS en local pour gérer le code personnalisé dans Webflow est une solution performante et flexible pour les développeurs qui veulent aller plus loin dans la personnalisation. Avec un environnement de développement rapide et moderne, nous pouvons tester, organiser et optimiser notre code avant de le déployer sur Webflow.

Si vous utilisez régulièrement Webflow avec du JavaScript custom, cette méthode peut grandement améliorer votre productivité et la maintenabilité de votre projet ! 🚀

Si vous souhaitez en savoir plus, n’hésitez pas à nous contacter ou découvrir nos expertises techniques.

‍