Configuration Locale

Configurer un nouveau projet Webflow Code Components à partir de zéro.

Quand Utiliser Cette Compétence

Utiliser quand:

• Démarrage d'un nouveau projet de code components
• L'utilisateur demande de configurer, initialiser ou créer un nouveau projet
• Ajout de code components à un projet React existant
• Configuration de l'environnement de développement pour la première fois

NE PAS utiliser quand:

• Le projet existe déjà et est configuré (répondre directement aux questions)
• Création de composants individuels (utiliser component-scaffold à la place)
• Déploiement de composants (utiliser deploy-guide à la place)

Instructions

Phase 1: Évaluer l'État Actuel

1. Vérifier si le projet existe:

   • Y a-t-il un package.json existant?
   • Y a-t-il un webflow.json existant?
   • Quelle est la structure actuelle du projet?

2. Déterminer le type de configuration:

   • Nouveau projet à partir de zéro
   • Ajout à un projet React existant
   • Ajout à un projet Next.js/Vite existant

Phase 2: Initialisation du Projet

3. Créer la structure du projet (si nouveau):

   • Initialiser le projet npm
   • Configurer TypeScript
   • Créer la structure de dossiers

4. Installer les dépendances:

   • Cœur: React, TypeScript
   • Webflow: CLI, data-types, react utils
   • Optionnel: bibliothèques de style

Phase 3: Configuration

5. Créer webflow.json:

   • Définir le nom de la bibliothèque
   • Configurer le motif glob des composants
   • Configurer les globals si nécessaire

6. Configurer TypeScript:

   • Configurer tsconfig.json
   • Activer le support JSX

Phase 4: Créer les Fichiers de Base

7. Créer un composant d'exemple:

   • Composant Button simple
   • Fichier de définition
   • Style de base

8. Créer un fichier globals (optionnel):

   • Pour les styles partagés
   • Pour les décorateurs

Phase 5: Vérifier la Configuration

9. Vérifier que le bundle se compile:

   • Exécuter npx webflow library bundle --public-path http://localhost:4000/ pour détecter les erreurs de build en local
   • Cela vérifie que vos composants, imports et configuration sont corrects
   • Les tests complets dans le Webflow Designer nécessitent un déploiement avec npx webflow library share

10. Fournir les étapes suivantes:

    • Comment créer plus de composants
    • Comment déployer
    • Flux de travail de développement

Exemples

Pour des exemples détaillés étape par étape, voir references/EXAMPLES.md.

Exemples disponibles:

1. Nouveau Projet à Partir de Zéro - Configuration complète avec React, TypeScript et CSS Modules
2. Ajout à un Projet React Existant - Intégration de code components dans une base de code existante
3. Avec Tailwind CSS - Configuration avec support Tailwind CSS

Démarrage Rapide (Nouveau Projet):

# 1. Créer le projet
mkdir my-webflow-components && cd my-webflow-components
npm init -y

# 2. Installer les dépendances
npm install react react-dom
npm install -D typescript @types/react @types/react-dom
npm install -D @webflow/webflow-cli @webflow/data-types @webflow/react

# 3. Créer webflow.json
echo '{"library":{"name":"My Library","components":["./src/**/*.webflow.tsx"]}}' > webflow.json

# 4. Créer le répertoire des composants
mkdir -p src/components/Button

Créez ensuite vos fichiers de composants (.tsx, .webflow.tsx, .module.css). Voir l'Exemple 1 dans references/EXAMPLES.md pour le contenu complet des fichiers incluant le composant, la définition et les fichiers CSS.

Déployez avec:

npx webflow library share

Validation

Après la configuration, vérifiez que le projet est correctement configuré:

Directives

Configuration Minimale Requise

Chaque projet de code components a besoin de:

1. package.json avec dépendances
2. webflow.json avec configuration de bibliothèque
3. tsconfig.json (pour TypeScript)
4. Au moins un fichier .webflow.tsx

Structure Recommandée

project/
├── src/
│   ├── components/
│   │   └── [ComponentName]/
│   │       ├── [ComponentName].tsx
│   │       ├── [ComponentName].webflow.tsx
│   │       └── [ComponentName].module.css
│   ├── hooks/           # Custom hooks
│   ├── utils/           # Utilities
│   ├── declarations.d.ts # Types CSS modules
│   ├── globals.ts       # Décorateurs/imports globaux
│   └── globals.css      # Styles globaux
├── package.json
├── tsconfig.json
├── webflow.json
└── .gitignore

Flux de Travail de Développement

1. Créer un composant: Utiliser la compétence component-scaffold
2. Développer localement: Exécuter le projet React pour itérer (ex: npm run dev)
3. Valider: Utiliser la compétence pre-deploy-check
4. Déployer: Utiliser la compétence deploy-guide ou exécuter npx webflow library share
5. Tester dans Webflow: Ajouter le composant à une page dans le Designer