webflow-cli:code-component

Par webflow · webflow-skills

Créez et déployez des composants React réutilisables pour Webflow Designer. Configurez des projets React existants avec `webflow.json`, compilez et bundlez le code, validez la sortie, puis déployez dans un workspace via le partage de bibliothèque. À utiliser pour créer des composants personnalisés destinés aux designers.

npx skills add https://github.com/webflow/webflow-skills --skill webflow-cli:code-component

Composant de Code

Créez, générez et déployez des composants React vers Webflow Designer avec une validation complète et une vérification du déploiement.

Note Importante

TOUJOURS utiliser l'outil Bash pour toutes les opérations CLI Webflow :

  • Exécuter les commandes CLI webflow via l'outil Bash
  • Utiliser l'outil Read pour examiner les fichiers générés (jamais les modifier)
  • Utiliser l'outil Glob pour découvrir les fichiers du projet
  • Vérifier l'installation CLI : webflow --version
  • Vérifier l'authentification : lors du premier webflow library share, l'authentification de l'espace de travail se fait automatiquement
  • NE PAS utiliser les outils MCP Webflow pour les workflows CLI
  • Toutes les commandes CLI nécessitent des descriptions appropriées (pas de paramètres de contexte)

Détection du gestionnaire de paquets :

  • Vérifier les fichiers de verrouillage : package-lock.json (npm), pnpm-lock.yaml (pnpm), yarn.lock (yarn)
  • Si aucun fichier de verrouillage trouvé, demander à l'utilisateur quel gestionnaire de paquets utiliser (npm/pnpm/yarn)
  • Utiliser le gestionnaire de paquets détecté pour toutes les commandes d'installation/compilation

Instructions

Phase 1 : Vérification de l'environnement

  1. Vérifier que CLI est installé : Exécuter webflow --version pour confirmer que CLI est installé
  2. Vérifier l'état du projet : Déterminer si l'utilisateur a un projet React existant ou a besoin de conseils
  3. Identifier l'espace de travail : Expliquer que l'authentification de l'espace de travail se fait lors du premier partage
  4. Réviser la configuration : Vérifier si webflow.json existe avec la configuration de la bibliothèque

Phase 2 : Configuration du projet

  1. Demander le type d'opération : Clarifier ce que l'utilisateur souhaite faire :
    • Configurer un projet React existant pour Code Components
    • Ajouter des composants à un projet déjà configuré
    • Générer et partager une bibliothèque existante
  2. Configurer webflow.json : Ajouter la configuration de la bibliothèque à webflow.json :
    • Nom de la bibliothèque (apparaît dans Webflow Designer)
    • Motif glob pour les composants (ex. : ./src/**/*.webflow.tsx)
    • bundleConfig optionnel pour webpack personnalisé
  3. Lire les fichiers de configuration : Utiliser l'outil Read pour afficher :
    • webflow.json - Configuration de la bibliothèque
    • package.json - Dépendances et scripts
    • Structure des fichiers de composants
  4. Vérifier les dépendances : S'assurer que React est installé et que les scripts de compilation existent

Phase 3 : Validation de la génération et du bundling

  1. Exécuter la compilation : Exécuter la commande de compilation de l'utilisateur (ex. : npm run build, yarn build)
  2. Valider la sortie de compilation : Vérifier les erreurs ou avertissements de compilation
  3. Exécuter la commande bundle : Exécuter webflow library bundle pour la validation locale
  4. Analyser le bundle :
    • Taille du bundle (doit être < 2 Mo)
    • Dépendances incluses
    • Emplacement de sortie (par défaut : ./dist)
    • Avertissements de validation
  5. Afficher les détails du bundle : Afficher un résumé du bundle avec le statut de validation

Phase 4 : Aperçu et approbation

  1. Afficher l'aperçu du déploiement :
    • Nom de la bibliothèque depuis webflow.json
    • Fichiers de composants inclus
    • Taille du bundle et statut de validation
    • Espace de travail cible (sera sélectionné lors du premier partage)
    • Expliquer l'authentification de l'espace de travail si première fois
  2. Expliquer le déploiement : Ce qui se passe quand la bibliothèque est partagée
  3. Exiger une confirmation explicite : L'utilisateur doit taper « share » ou « deploy » pour continuer
  4. Confirmer l'espace de travail : Expliquer que le navigateur s'ouvrira pour la sélection de l'espace de travail (première fois uniquement)

Phase 5 : Déploiement et vérification

  1. Exécuter la commande share : Exécuter webflow library share
  2. Surveiller le déploiement : Afficher la sortie et la progression du CLI
  3. Gérer l'authentification de l'espace de travail : Si première fois, guider l'utilisateur à travers l'authentification du navigateur
  4. Vérifier le succès du déploiement : Confirmer que la bibliothèque apparaît dans l'espace de travail
  5. Afficher les mises à jour .env : Expliquer que WEBFLOW_WORKSPACE_ID et WEBFLOW_WORKSPACE_API_TOKEN ont été ajoutés
  6. Fournir les étapes suivantes :
    • Comment utiliser les composants dans Designer
    • Comment mettre à jour les composants
    • Recommandations de test
    • Utiliser webflow library log pour le débogage

Exemples

Exemple 1 : Configurer un projet React existant

Invite utilisateur :

I have a React project with some components I want to share to Webflow

Étape 1 : Vérification de l'environnement

🔍 Webflow CLI Environment Check

Checking CLI installation...
✓ Webflow CLI installed: v1.5.2

Current directory: /Users/user/projects/my-components
✓ Found package.json with React project
✓ Found src/ directory with components

Checking webflow.json...
⚠️ No webflow.json found - needs configuration

Ready to configure for Code Components? (yes/no)

L'utilisateur confirme : yes

Étape 2 : Configuration du projet

📋 Configure Code Components Library

I'll help you add the library configuration to webflow.json.

Questions:
1. What should your library be called in Webflow Designer?
   Example: "My Component Library"

2. Where are your component files located?
   Pattern examples:
   - "./src/**/*.webflow.tsx" (components with .webflow.tsx extension)
   - "./src/components/**/*.tsx" (all components in src/components/)
   - "./src/Button.tsx" (specific files)

Let me know the library name and component pattern.

*L'utilisateur fournit : « Acme Components » et « ./src/*/.webflow.tsx »*

Creating webflow.json configuration...

{
  "library": {
    "name": "Acme Components",
    "components": ["./src/**/*.webflow.tsx"]
  }
}

✓ Configuration ready

Found component files:
- src/Button.webflow.tsx
- src/Card.webflow.tsx
- src/Hero.webflow.tsx

Next: Build your components and run bundle command.

Étape 3 : Validation de la génération et du bundling

🔨 Building Components

What build command do you use? (e.g., npm run build, yarn build)

L'utilisateur répond : npm run build

Executing: npm run build

Output:
✓ TypeScript compilation successful
✓ Components built to dist/

Creating bundle for validation...
Executing: webflow library bundle

Output:
✓ Analyzing 3 components
✓ Bundling dependencies
✓ Creating bundle
✓ Bundle created: dist/bundle.js

📦 Bundle Analysis:
- Size: 287 KB (✓ within 2MB limit)
- Components: 3 (Button, Card, Hero)
- Dependencies: react@18.2.0, react-dom@18.2.0
- Output: ./dist
- Validation: ✅ All checks passed

Étape 4 : Aperçu et approbation

📋 Deployment Preview

Library: Acme Components
Components: 3 (Button, Card, Hero)
Bundle Size: 287 KB

Workspace Authentication:
⚠️ This appears to be your first deployment. When you run 'share':
1. Browser will open for workspace authentication
2. Select your target Webflow workspace
3. Grant access to deploy components
4. CLI will create .env with credentials:
   - WEBFLOW_WORKSPACE_ID
   - WEBFLOW_WORKSPACE_API_TOKEN

Validation Status: ✅ Ready to deploy
- Bundle size: ✓ 287 KB (< 2MB limit)
- Dependencies: ✓ Valid (React 18.2.0)
- Configuration: ✓ webflow.json valid
- Components: ✓ 3 components found

⚠️ Type "share" to deploy this library to your workspace.

L'utilisateur confirme : share

Étape 5 : Déploiement et vérification

🚀 Deploying Library

Executing: webflow library share

Output:
✓ Bundling library (287 KB)
✓ Opening browser for workspace authentication...

[Browser opens - user authenticates and selects workspace]

✓ Workspace authenticated: Acme Corp
✓ Uploading bundle
✓ Validating components
✓ Registering with workspace
✓ Library deployed successfully

✅ Library Deployed: Acme Components

Workspace: Acme Corp
Components: 3 (Button, Card, Hero)
Version: Latest
Status: Active

📁 Environment Updated:
Created .env file with:
- WEBFLOW_WORKSPACE_ID=workspace_abc123
- WEBFLOW_WORKSPACE_API_TOKEN=************

⚠️ Important: Add .env to your .gitignore file!

📋 Next Steps:
1. Open Webflow Designer
2. Go to Add Elements → Code Components
3. Find "Acme Components" in the list
4. Drag components onto canvas to use

💡 To update components:
1. Make changes to your component files
2. Run: npm run build
3. Run: webflow library share
   (No re-authentication needed - uses .env credentials)

🔍 For debugging:
- View logs: webflow library log
- Bundle locally: webflow library bundle
- Check bundle size: webflow library bundle --verbose

Component Library URL: https://webflow.com/dashboard/workspaces/acme-corp/components

Exemple 2 : Mettre à jour une bibliothèque existante

Invite utilisateur :

Update my Code Components library with new changes

Étape 1 : Vérification de l'environnement

🔍 Code Components Library Check

Checking configuration...
✓ webflow.json found with library config
✓ Library name: Acme Components
✓ Components pattern: ./src/**/*.webflow.tsx

Checking authentication...
✓ Found .env with workspace credentials
✓ Workspace: Acme Corp

Found components:
- src/Button.webflow.tsx (modified)
- src/Card.webflow.tsx
- src/Hero.webflow.tsx
- src/Form.webflow.tsx (new)

Ready to build and share updates? (yes/no)

Étapes 2-3 : Compilation et bundling

🔨 Building Components

Executing: npm run build
✓ Build complete

Bundling for validation...
Executing: webflow library bundle

📦 Bundle Analysis:
- Size: 312 KB (✓ within 2MB limit)
- Components: 4 (Button, Card, Hero, Form) [+1 new]
- Changes: Button updated, Form added
- Validation: ✅ All checks passed

Étape 4 : Aperçu

📋 Update Preview

Library: Acme Components
Workspace: Acme Corp (already authenticated)

Changes:
✓ Button component (updated)
✓ Form component (new)
  Card component (unchanged)
  Hero component (unchanged)

Bundle Size: 312 KB (+25 KB from 287 KB)

No re-authentication needed - using existing workspace credentials.

⚠️ Type "share" to update the library.

Étape 5 : Déploiement

🚀 Updating Library

Executing: webflow library share

Output:
✓ Bundling library (312 KB)
✓ Using workspace: Acme Corp
✓ Uploading bundle
✓ Validating components
✓ Updating library
✓ Library updated successfully

✅ Library Updated: Acme Components

Changes deployed:
- Button: Updated ✨
- Form: Added 🆕
- Card: Unchanged
- Hero: Unchanged

💡 Refresh Webflow Designer to see changes:
1. Open Designer
2. Components may auto-refresh
3. Or refresh browser if needed

Components updated in workspace!

Exemple 3 : Test de bundle en local pour la première fois

Invite utilisateur :

I want to test my bundle locally before sharing

Étapes 1-2 : Vérification et configuration

🔍 Local Bundle Testing

✓ webflow.json configured
✓ Library: My Components
✓ Components: ./src/**/*.webflow.tsx

Running local bundle only (no deployment)...

Étape 3 : Validation du bundle

🔨 Building Components

Executing: npm run build
✓ Build complete

Creating local bundle...
Executing: webflow library bundle

Output:
✓ Analyzing components
✓ Bundling dependencies
✓ Optimizing output
✓ Bundle created: dist/bundle.js

📦 Bundle Details:

Size: 1.2 MB (✓ within 2MB limit)

Components (5):
├── Button.webflow.tsx (25 KB)
├── Card.webflow.tsx (18 KB)
├── Hero.webflow.tsx (45 KB)
├── Form.webflow.tsx (32 KB)
└── Modal.webflow.tsx (28 KB)

Dependencies:
├── react@18.2.0 (included)
├── react-dom@18.2.0 (included)
└── classnames@2.3.1 (included)

Output Directory: ./dist/
- bundle.js (1.2 MB)
- manifest.json

Validation: ✅ All checks passed

💡 Bundle is valid and ready to share!
   Run: webflow library share (when ready to deploy)

Exemple 4 : Bundle trop volumineux

Invite utilisateur :

Share my components library

Erreur de validation du bundle :

🔨 Building and Bundling

Executing: npm run build
✓ Build complete

Executing: webflow library bundle

Output:
✓ Analyzing components
✓ Bundling dependencies
⚠️ Bundle size check...

📦 Bundle Analysis:
- Size: 2.4 MB (❌ exceeds 2MB limit)
- Components: 6
- Dependencies: react@18.2.0, react-dom@18.2.0, lodash@4.17.21, moment@2.29.4
- Validation: ❌ Issues found

❌ Bundle Too Large

Current size: 2.4 MB
Maximum allowed: 2 MB
Exceeded by: 400 KB

📊 Size Breakdown:
- React + React DOM: ~800 KB
- lodash: ~500 KB ⚠️
- moment: ~350 KB ⚠️
- Your components: ~750 KB

💡 Recommendations:
1. Remove lodash (use native JS instead)
   - Replace _.map with Array.map
   - Replace _.filter with Array.filter
   - Or use lodash-es and import specific functions

2. Replace moment with lighter alternative
   - Use date-fns (~15 KB vs 350 KB)
   - Or use native Intl.DateTimeFormat

3. Optimize component code
   - Remove unused imports
   - Enable tree-shaking
   - Split large components

4. Use external assets
   - Host large images externally
   - Use CDN for static assets

Would you like to:
1. Continue anyway (using --force flag, not recommended)
2. Review component imports to optimize
3. Cancel and fix manually

Exemple 5 : Déploiement CI/CD

Invite utilisateur :

How do I deploy in CI/CD pipeline?

Réponse :

🤖 CI/CD Deployment Setup

For automated deployments, use non-interactive mode with API tokens.

### Setup Steps:

1. **Get Workspace API Token**
   - Open Workspace Settings in Webflow
   - Go to Integrations → Workspace API Token
   - Generate new token
   - Copy token securely

2. **Add to CI/CD Secrets**
   - Add as environment variable: WORKSPACE_API_TOKEN
   - Never commit tokens to version control

3. **Deployment Command**
   ```bash
   webflow library share --api-token $WORKSPACE_API_TOKEN --no-input

Example: GitHub Actions

name: Deploy Components
on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Install Webflow CLI
        run: npm install -g @webflow/webflow-cli

      - name: Build components
        run: npm run build

      - name: Deploy to Webflow
        run: |
          webflow library share \
            --api-token ${{ secrets.WORKSPACE_API_TOKEN }} \
            --no-input \
            --force
        env:
          WORKSPACE_API_TOKEN: ${{ secrets.WORKSPACE_API_TOKEN }}

Multiple Workspaces:

# Deploy to workspace 1
webflow library share \
  --api-token $WORKSPACE_1_TOKEN \
  --no-input

# Deploy to workspace 2
webflow library share \
  --api-token $WORKSPACE_2_TOKEN \
  --no-input

Options:

  • --no-input - Disables interactive prompts
  • --force - Continues even with warnings
  • --verbose - Shows detailed output
  • --dev - Bundles in development mode (for testing)

⚠️ Security:

  • Never commit .env files
  • Use secrets management in CI/CD
  • Rotate tokens regularly
  • Limit token permissions

Directives

Phase 1 : Vérification CLI

Vérification d'installation :

# Check if CLI is installed
webflow --version

# If not installed, guide user:
npm install -g @webflow/webflow-cli

Vérification du projet :

# Check for existing configuration
ls webflow.json

# Check for React project
ls package.json

# Check for components
ls src/

Note d'authentification : Contrairement à l'authentification du site, l'authentification de l'espace de travail pour Code Components se fait automatiquement lors du premier webflow library share. Le CLI va :

  1. Ouvrir le navigateur pour l'authentification
  2. Permettre à l'utilisateur de sélectionner l'espace de travail
  3. Créer .env avec WEBFLOW_WORKSPACE_ID et WEBFLOW_WORKSPACE_API_TOKEN

Phase 2 : Configuration du projet

Structure webflow.json :

{
  "library": {
    "name": "<Your Library Name>",
    "components": ["./src/**/*.webflow.@(js|jsx|mjs|ts|tsx)"],
    "bundleConfig": "./webpack.webflow.js"
  }
}

Champs de configuration :

  • name (requis) : Nom de la bibliothèque tel qu'il apparaît dans Webflow Designer
  • components (requis) : Motif glob correspondant aux fichiers de composants
    • Exemple : "./src/**/*.webflow.tsx" - tous les fichiers .webflow.tsx dans src/
    • Exemple : "./src/components/**/*.tsx" - tous les fichiers .tsx dans src/components/
  • bundleConfig (optionnel) : Chemin vers une configuration webpack personnalisée

Convention de nommage des composants :

  • Ajouter .webflow avant l'extension : Button.webflow.tsx
  • Ou utiliser un motif glob pour inclure tous les fichiers dans un répertoire spécifique
  • Les composants doivent être des composants React

Aucune commande Init : Contrairement à d'autres produits CLI, Code Components n'ont pas de commande init. Les utilisateurs configurent les projets React existants en ajoutant webflow.json avec la configuration de la bibliothèque.

Phase 3 : Compilation et bundling

Processus de compilation :

# Use project's build script
npm run build
# or
yarn build
# or
pnpm build

# Check for errors
echo $?  # 0 = success, non-zero = failure

Commande bundle :

# Bundle locally (optional - for testing/validation)
webflow library bundle

# Bundle output: ./dist/ (default)
# Can override: webflow library bundle --output-path ./build

Options de bundling :

  • --output-path <path> - Override output directory (default: ./dist)
  • --public-path <path> - Override public path
  • --force - Force bundling even with warnings
  • --debug-bundler - Show webpack configuration
  • --dev - Bundle in development mode
  • --verbose - Show detailed output

Validation du bundle : Vérifier ces aspects :

  • Limite de taille : Doit être < 2 Mo
  • Dépendances : Versions React compatibles
  • Sortie : Bundle créé dans le répertoire dist/
  • Composants : Tous les fichiers de composants inclus

Erreurs de compilation courantes :

  • Erreurs de compilation TypeScript → Corriger les problèmes de type
  • Dépendances manquantes → Exécuter npm install
  • Erreurs d'importation → Vérifier les chemins de fichiers
  • Bundle trop volumineux → Optimiser les dépendances

Phase 4 : Aperçu du déploiement

Format d'aperçu :

📋 Deployment Preview

Library: [Name from webflow.json]
Components: [Count] ([List of components])
Bundle Size: [Size in KB/MB]

Workspace Authentication:
[First time: Explain browser auth flow]
[Subsequent: Show workspace from .env]

Validation Status:
✓ Bundle size: [X KB] (< 2MB limit)
✓ Dependencies: Valid
✓ Configuration: webflow.json valid
✓ Components: [N] components found

⚠️ Type "share" to proceed

Authentification première fois : Expliquer clairement :

  1. Le navigateur s'ouvrira
  2. L'utilisateur s'authentifie avec Webflow
  3. L'utilisateur sélectionne l'espace de travail cible
  4. Le CLI crée .env avec les identifiants
  5. Les partages futurs utiliseront ces identifiants (pas de ré-authentification)

Phase 5 : Exécution du déploiement

Commande share :

# Standard share (interactive)
webflow library share

# Non-interactive (for CI/CD)
webflow library share --api-token <TOKEN> --no-input

# Force share (ignore warnings)
webflow library share --force

# Development mode
webflow library share --dev

Options de share :

  • --manifest - Path to webflow.json (default: scans current directory)
  • --api-token - Workspace API token (for CI/CD)
  • --no-input - Disable interactive prompts
  • --force - Force bundling even with warnings
  • --debug-bundler - Show bundler configuration
  • --dev - Bundle in development mode
  • --verbose - Show detailed output

Indicateurs de succès :

  • Bundle téléchargé avec succès
  • Bibliothèque enregistrée dans l'espace de travail
  • Composants disponibles dans Designer
  • Fichier .env créé/mis à jour (première fois)

Fichier d'environnement (.env) : Après le premier partage réussi :

WEBFLOW_WORKSPACE_ID=your-workspace-id
WEBFLOW_WORKSPACE_API_TOKEN=your-api-token

⚠️ Critique : Toujours ajouter .env à .gitignore !

Étapes de vérification :

  1. Vérifier la sortie CLI pour le message de succès
  2. Vérifier que le fichier .env a été créé (première fois)
  3. Fournir les instructions d'accès à Designer
  4. Afficher l'URL du tableau de bord de l'espace de travail

Phase 6 : Débogage

Commande log :

# Show latest log file location
webflow library log

# Example output:
# Latest log: /Users/user/.webflow/logs/library-2024-01-20-15-30-45.log

Utiliser cette commande quand :

  • Bundle échoue avec une erreur peu claire
  • Commande share produit des avertissements
  • Besoin de déboguer la configuration webpack
  • Enquête sur les problèmes de dépendances

Problèmes courants :

Problème : « Could not find webflow.json »

❌ Configuration Not Found

The CLI couldn't find webflow.json in the current directory.

Solution:
1. Ensure you're in the project root
2. Create webflow.json with library configuration:
   {
     "library": {
       "name": "Your Library Name",
       "components": ["./src/**/*.webflow.tsx"]
     }
   }
3. Run command again

Problème : « No components found »

❌ No Components Found

The components glob pattern didn't match any files.

Current pattern: "./src/**/*.webflow.tsx"

Solution:
1. Check component files have correct naming
2. Verify glob pattern in webflow.json
3. Common patterns:
   - "./src/**/*.webflow.tsx" (requires .webflow in name)
   - "./src/components/**/*.tsx" (all tsx in folder)
   - "./src/Button.tsx" (specific file)

Found files:
- src/Button.tsx (not matching pattern)
- src/Card.tsx (not matching pattern)

Suggestion: Rename to Button.webflow.tsx or update pattern

Gestion des erreurs

CLI non installé :

❌ Webflow CLI Not Found

The Webflow CLI is required for Code Components.

Installation:
npm install -g @webflow/webflow-cli

After installation, verify:
webflow --version

Documentation: https://developers.webflow.com/cli

Échecs de compilation :

❌ Build Failed

Error: [Specific error message]

Common Fixes:
- TypeScript errors: Review type definitions
- Missing deps: Run npm install
- Import errors: Check file paths
- Syntax errors: Check React component syntax

Show build output for details.
Need help? Run: webflow library log

Échecs de bundling :

❌ Bundle Failed

Error: [Specific error from CLI]

Common Causes:
- Invalid component files
- Webpack configuration errors
- Dependency conflicts
- File path issues

View detailed logs: webflow library log

Possible solutions:
1. Check component file syntax
2. Verify webflow.json configuration
3. Remove bundleConfig to use defaults
4. Check dependencies in package.json

Échecs de déploiement :

❌ Share Failed

Error: [Specific error from CLI]

Possible Causes:
- Network connection issues
- Workspace authentication expired
- Bundle validation failed
- Workspace permissions

Solutions:
1. Check internet connection
2. Re-authenticate: Remove .env and run share again
3. Fix bundle issues: Run webflow library bundle first
4. Verify workspace access in Webflow dashboard

Retry share? (yes/no)

Opérations sur fichiers

Lecture de fichiers : Toujours utiliser l'outil Read (jamais modifier) :

# View library configuration
Read: webflow.json

# View package dependencies
Read: package.json

# View component source
Read: src/Button.webflow.tsx

# View environment (if exists)
Read: .env

Découverte de fichiers : Utiliser l'outil Glob pour trouver des fichiers :

# Find all webflow components
Glob: **/*.webflow.tsx

# Find configuration files
Glob: *.json

# Find source files
Glob: src/**/*

# Find build output
Glob: dist/**/*

Ne jamais utiliser les outils Write/Edit :

  • Ne pas créer webflow.json avec Write (afficher à l'utilisateur la structure)
  • Ne pas modifier les fichiers de composants
  • Ne pas éditer package.json
  • Laisser l'utilisateur faire les changements de fichiers
  • Lire uniquement les fichiers pour afficher le contenu

Indicateurs de progression

Pour le bundling :

🔄 Bundling Components...

Analyzing components... ✓
Resolving dependencies... ✓
Building bundle... ⏳
Optimizing... ⏳

Elapsed: 8s

Pour le déploiement :

🚀 Sharing Library...

Creating bundle... ✓
Uploading to workspace... ⏳
Validating components... ⏳

Uploaded: 287 KB
Elapsed: 12s

Modèles de sécurité

Mots-clés de confirmation :

  • « share » - Partager la bibliothèque à l'espace de travail
  • « deploy » - Alternative à « share »
  • « proceed » - Continuer avec l'opération
  • « cancel » - Annuler l'opération
  • « skip » - Ignorer l'étape optionnelle

Aperçu avant le partage : Toujours afficher :

  • Ce qui sera partagé (nom de la bibliothèque, composants)
  • Où ce sera (espace de travail, ou authentification première fois nécessaire)
  • Taille du bundle et statut de validation
  • Impact des changements (composants nouveaux/mis à jour)

Transparence :

  • Afficher toutes les commandes CLI avant l'exécution
  • Afficher la sortie CLI en intégralité
  • Signaler le succès/l'échec clairement
  • Fournir des conseils de dépannage
  • Afficher l'emplacement du journal pour le débogage

Bonnes pratiques

Développement de composants :

  • Utiliser TypeScript pour la sécurité des types
  • Suivre les meilleures pratiques React
  • Garder la taille du bundle petite (< 1 Mo idéalement)
  • Nommer les fichiers avec l'extension .webflow pour la clarté
  • Documenter les props des composants

Gestion des dépendances :

  • Garder les dépendances au minimum
  • Éviter les grandes bibliothèques (lodash, moment)
  • Utiliser des packages tree-shakeable
  • Vérifier l'impact du bundle : webflow library bundle --verbose
  • Dépendances peer pour React (non bundlées)

Mises à jour et versioning :

  • Compiler avant de partager
  • Tester le bundle en local : webflow library bundle
  • Partager pour mettre à jour : webflow library share
  • Pas de numéros de version nécessaires (toujours « latest »)
  • Tester dans Designer après le déploiement

Gestion de l'espace de travail :

  • Un espace de travail par fichier .env
  • Utiliser --api-token pour plusieurs espaces de travail
  • Ajouter .env à .gitignore
  • Faire tourner les jetons en CI/CD
  • Documenter quel espace de travail est configuré

Configuration :

  • Garder webflow.json dans la racine du projet
  • Utiliser des noms de bibliothèque clairs
  • Utiliser des motifs glob de composants spécifiques
  • Ajouter bundleConfig uniquement si nécessaire
  • Contrôler la version de webflow.json (pas .env)

Cycle de vie des composants

Configuration initiale :

  1. Créer/avoir un projet React
  2. Ajouter webflow.json avec la configuration de la bibliothèque
  3. Nommer les fichiers de composants (ex. : .webflow.tsx)
  4. Compiler : npm run build
  5. Tester le bundle : webflow library bundle
  6. Partager : webflow library share (authentifie la première fois)

Faire des mises à jour :

  1. Éditer les fichiers source des composants
  2. Compiler : npm run build
  3. Partager : webflow library share (utilise les identifiants sauvegardés)
  4. Rafraîchir Designer pour voir les changements

Test :

  1. Bundler localement : webflow library bundle
  2. Vérifier la taille du bundle et la validation
  3. Corriger tous les problèmes
  4. Partager quand prêt : webflow library share
  5. Ouvrir Webflow Designer
  6. Ajouter des composants à la page
  7. Tester la fonctionnalité

Débogage :

  1. Afficher les journaux : webflow library log
  2. Bundler avec verbose : webflow library bundle --verbose
  3. Vérifier la configuration : cat webflow.json
  4. Vérifier la compilation : npm run build
  5. Tester en mode développement : webflow library share --dev

Référence des commandes CLI

Installation :

# Install CLI globally
npm install -g @webflow/webflow-cli

# Verify installation
webflow --version

Commandes de bibliothèque :

# Bundle locally (testing/validation)
webflow library bundle [options]

# Share to workspace (bundle + deploy)
webflow library share [options]

# View latest log file
webflow library log

Options de bundling :

# Custom output path
webflow library bundle --output-path ./build

# Force bundling (ignore warnings)
webflow library bundle --force

# Development mode
webflow library bundle --dev

# Show bundler config
webflow library bundle --debug-bundler

# Verbose output
webflow library bundle --verbose

Options de share :

# Standard interactive share
webflow library share

# Non-interactive (CI/CD)
webflow library share --no-input --api-token <TOKEN>

# Force share (ignore warnings)
webflow library share --force

# Development mode
webflow library share --dev

# Custom manifest location
webflow library share --manifest ./config/webflow.json

Options globales :

# Show version
webflow --version

# Show help
webflow --help
webflow library --help
webflow library share --help

Référence rapide

Workflow : configurer webflow.json → compiler → bundler → partager

Commandes clés :

  • webflow library bundle - Bundler localement pour le test
  • webflow library share - Bundler et déployer à l'espace de travail
  • webflow library log - Afficher les journaux de débogage

Configuration : webflow.json avec section library

Authentification : Automatique au premier webflow library share (ouvre le navigateur)

Environnement : WEBFLOW_WORKSPACE_ID et WEBFLOW_WORKSPACE_API_TOKEN dans .env

Vérification : Toujours vérifier webflow --version en premier

Aperçu : Afficher les détails du bundle avant le partage

Confirmation : Nécessiter le mot-clé « share » pour procéder

Documentation : https://developers.webflow.com/code-components/introduction

Skills similaires

shopify-hydrogen
shopify / shopify-ai-toolkit

Implémenter des fonctionnalités Hydrogen Shopify via des recettes de cookbook prêtes à l'emploi.

319
shopify-liquid
shopify / shopify-ai-toolkit

Développer des composants Liquid pour thèmes Shopify : sections, blocs et snippets.

319
shopify-liquid
shopify / agent-skills

Développer des composants Liquid pour thèmes Shopify : sections, blocs et snippets.

31
webflow-cli:devlink
webflow / webflow-skills

Synchroniser des composants Webflow Designer vers du code React/Next.js avec validation et guide d'intégratio…

67
webflow-code-component:pre-deploy-check
webflow / webflow-skills

Valider les composants Webflow avant déploiement pour détecter les erreurs en amont.

67