Webflow Cloud

Initialisez de nouveaux projets à partir de modèles, construisez des applications et déployez sur Webflow Cloud avec validation et vérification de déploiement complètes.

Note Importante

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

Exécutez les commandes webflow cloud via l'outil Bash
Utilisez l'outil Read pour examiner les fichiers de configuration (ne jamais modifier)
Utilisez l'outil Glob pour découvrir les fichiers du projet
Vérifiez l'installation CLI : webflow --version
Vérifiez l'authentification : Utilisez webflow auth login pour l'authentification du site
N'utilisez PAS les outils Webflow MCP pour les workflows CLI
Toutes les commandes CLI nécessitent des descriptions appropriées (pas de paramètres de contexte)

Déploiement non interactif (CRITIQUE pour les agents et l'automatisation) : Le Webflow CLI est interactif par défaut (invites de sélection d'environnement, invites de chemin de montage, vérifications de mise à jour). Puisque les agents IA et les pipelines CI/CD ne peuvent pas interagir avec des invites interactives, vous DEVEZ toujours utiliser ces drapeaux ensemble pour le déploiement :

--no-input — Désactive toutes les invites interactives (sélection d'environnement, confirmations, etc.)
--mount <MOUNT_PATH> — REQUIS avec --no-input pour éviter les erreurs ENVIRONMENT_MOUNT_MISMATCH. Vous DEVEZ déterminer le chemin de montage correct avant le déploiement — voir ci-dessous.
--skip-mount-path-check — Ignore la validation interactive du chemin de montage
--skip-update-check — Ignore la vérification de mise à jour interactive

Déterminer le chemin de montage (NE PAS supposer une valeur par défaut) : Le chemin de montage varie entre les projets (par ex. /app, /, /blog). Supposer une valeur par défaut courante comme /app CAUSERA des échecs de déploiement si le projet utilise un chemin différent. Le Webflow CLI ne persiste PAS le chemin de montage dans webflow.json après init ou deploy, donc il n'est souvent pas disponible dans la configuration locale. Suivez ces étapes dans l'ordre :

Vérifiez webflow.json — Lisez la section cloud et recherchez un champ mount ou mountPath. Il n'est généralement PAS présent, mais vérifiez de toute façon.
Demandez à l'utilisateur — Si le chemin de montage ne figure pas dans webflow.json (ce qui est le cas courant), vous DEVEZ demander à l'utilisateur avant de déployer : « Quel chemin de montage ce projet utilise-t-il ? (par ex. /app, /, /blog) ». Ne devinez pas, ne supposez pas /app, et ne procédez pas sans un chemin de montage confirmé.

La commande de déploiement non interactif canonique est :

webflow cloud deploy --no-input --mount <MOUNT_PATH> --skip-mount-path-check --skip-update-check

Ajoutez --auto-publish si l'utilisateur souhaite que les modifications soient publiées immédiatement.

Détection du gestionnaire de packages :

Vérifiez les fichiers de verrouillage : package-lock.json (npm), pnpm-lock.yaml (pnpm), yarn.lock (yarn)
Si aucun fichier de verrouillage trouvé, demandez à l'utilisateur quel gestionnaire de packages utiliser (npm/pnpm/yarn)
Utilisez le gestionnaire de packages détecté pour toutes les commandes d'installation/construction

Instructions

Phase 1 : Déterminer le Type d'Opération

Identifier l'intention de l'utilisateur : Que souhaite faire l'utilisateur ?
- Lister les modèles de projet disponibles (cloud list)
- Initialiser un nouveau projet Cloud (cloud init)
- Déployer un projet Cloud existant (cloud deploy)
Vérifier que le CLI est installé : Exécutez webflow --version pour confirmer que le CLI est installé
Vérifier l'état du projet : Déterminez si vous êtes dans un projet existant ou si vous commencez un nouveau projet

Phase 2A : Lister les Modèles (si nécessaire)

Lister les modèles disponibles : Exécutez webflow cloud list
Afficher les options de modèles : Affichez les frameworks disponibles (Astro, Next.js, etc.)
Expliquer les modèles : Description brève de chaque modèle

Phase 2B : Initialiser un Nouveau Projet (si nécessaire)

Exécuter cloud init : Exécutez webflow cloud init avec les options :
- --framework ou -f : Choisir un framework (astro, nextjs)
- --mount ou -m : Chemin de montage (par ex. /app)
- --site-id ou -s : ID du site Webflow à connecter
Surveiller l'initialisation : Afficher la sortie CLI
Vérifier que le projet est créé : Vérifier la présence de webflow.json et la structure du projet
Afficher la configuration : Lire et afficher webflow.json avec la section cloud

Phase 2C : Valider un Projet Existant (si déploiement)

Vérifier l'authentification : Vérifier l'authentification du site (créée via webflow auth login)
Lire la configuration du projet : Examiner la section cloud de webflow.json :
- projectId : Identifiant du projet Cloud (défini automatiquement au premier déploiement)
- framework : Soit "nextjs" soit "astro"
- mount ou mountPath : Chemin de montage (peut ou non être présent)
Déterminer le chemin de montage : Suivez les étapes « Déterminer le chemin de montage » ci-dessus. Si le chemin de montage ne figure pas dans webflow.json, demandez-le à l'utilisateur avant de procéder. NE PAS définir par défaut /app ou toute autre valeur.
Valider la structure du projet :
- Les fichiers requis sont présents
- Les scripts de construction sont configurés
- webflow.json a la configuration cloud

Phase 3 : Exécution de la Construction (pour le déploiement)

Exécuter la commande de construction : Exécutez npm run build ou le script de construction configuré
Surveiller la progression de la construction : Afficher la sortie de construction et détecter les erreurs
Valider la sortie de construction :
- Les artefacts de construction sont créés
- Le répertoire de sortie existe
- Pas d'erreurs critiques

Phase 4 : Aperçu du Déploiement (pour le déploiement)

Afficher le résumé du déploiement :
- Nom et framework du projet
- Emplacement de la sortie de construction
- Configuration de l'environnement (si utilisation de --env)
- Chemin de montage (si spécifié)
- Paramètre auto-publish (si utilisation de --auto-publish)
Expliquer le processus de déploiement : Ce qui se passe pendant le déploiement
Exiger une confirmation explicite : L'utilisateur doit taper "deploy" pour continuer

Phase 5 : Exécution du Déploiement

Exécuter la commande de déploiement : Exécutez webflow cloud deploy avec les drapeaux non interactifs :
- --no-input : REQUIS — désactive toutes les invites interactives
- --mount ou -m : REQUIS — chemin de montage (par ex. /app). Doit correspondre au chemin de montage de l'environnement existant.
- --skip-mount-path-check : REQUIS — ignore la validation interactive du chemin de montage
- --skip-update-check : RECOMMANDÉ — ignore la vérification interactive de mise à jour des packages
- --auto-publish : Optionnel — publier le site après le déploiement
- --project-name ou -p : Nom du projet (pour les nouveaux projets uniquement)
- -e ou --environment : Nom de l'environnement (par défaut le premier disponible avec --no-input)
Surveiller la progression du déploiement : Afficher la sortie CLI et les étapes de déploiement
Vérifier le succès du déploiement : Confirmer que le déploiement est terminé
Fournir les informations post-déploiement :
- Message de succès du déploiement
- URL du site (si publié)
- Prochaines étapes

Exemples

Exemple 1 : Lister les Modèles Disponibles

Invite utilisateur :

Quels modèles Webflow Cloud sont disponibles ?

Réponse :

📋 Modèles Webflow Cloud

Énumération des modèles disponibles...
Exécution : webflow cloud list

Sortie :
Modèles disponibles :
1. astro - Modèle framework Astro
2. nextjs - Modèle framework Next.js

Utilisez ces modèles avec :
webflow cloud init -f <nom-modèle>

Exemple :
webflow cloud init -f astro -m /app

Exemple 2 : Initialiser un Nouveau Projet Cloud

Invite utilisateur :

Créer un nouveau projet Webflow Cloud avec Astro

Étape 1 : Vérifier le CLI

🔍 Vérification du CLI Webflow

Vérification de l'installation du CLI...
✓ CLI Webflow installé : v1.5.2

Prêt à initialiser le projet Webflow Cloud avec Astro.

Options nécessaires :
1. Chemin de montage (où le projet sera accessible, par ex. /app)
2. ID du site (optionnel - Site Webflow à connecter)

Voulez-vous initialiser avec les paramètres par défaut (chemin de montage /app) ?

L'utilisateur confirme : oui

Étape 2 : Initialiser le Projet

🚀 Initialisation du Projet Webflow Cloud

Exécution : webflow cloud init -f astro -m /app

Sortie :
✓ Création d'un nouveau projet Astro
✓ Installation des dépendances
✓ Configuration de Webflow Cloud
✓ Création de webflow.json

Projet initialisé !

📁 Structure du Projet :
/my-cloud-project/
├── webflow.json (Configuration Cloud)
├── package.json
├── src/
│   └── pages/
│       └── index.astro
├── public/
└── astro.config.mjs

📋 Configuration (webflow.json) :
{
  "cloud": {
    "projectId": "", // Sera défini au premier déploiement
    "framework": "astro"
  }
}

✅ Projet Prêt !

Prochaines étapes :
1. Construire votre application : npm run dev
2. Ajouter votre code dans src/
3. Déployer : webflow cloud deploy

Exemple 3 : Initialiser avec ID de Site

Invite utilisateur :

Initialiser le projet Cloud avec Next.js pour l'ID de site abc123

Réponse :

🚀 Initialisation du Projet Webflow Cloud

Framework : Next.js
Chemin de montage : /app
ID du site : abc123

Exécution : webflow cloud init -f nextjs -m /app -s abc123

Sortie :
✓ Création d'un nouveau projet Next.js
✓ Connexion au site : abc123
✓ Installation des dépendances
✓ Configuration de Webflow Cloud
✓ Création de webflow.json
✓ Authentification avec le site

Projet initialisé et connecté au site !

📋 Configuration (webflow.json) :
{
  "cloud": {
    "projectId": "",
    "framework": "nextjs"
  }
}

📁 Environnement (.env) :
WEBFLOW_SITE_ID=abc123
WEBFLOW_SITE_API_TOKEN=************

⚠️ Important : Ajoutez .env à votre fichier .gitignore !

✅ Prêt pour le développement et le déploiement !

Exemple 4 : Premier Déploiement

Invite utilisateur :

Déployer mon application Webflow Cloud

Étape 1 : Vérification de l'Environnement

🔍 Vérification du Déploiement Webflow Cloud

Vérification de l'installation du CLI...
✓ CLI Webflow installé : v1.5.2

Vérification de la configuration du projet...
✓ webflow.json trouvé
✓ Configuration Cloud présente

Configuration :
- Framework : astro
- ID du projet : (sera défini au premier déploiement)
- Chemin de montage : /app

Vérification de l'authentification...
⚠️ Pas d'authentification trouvée - s'authentifiera pendant le déploiement

Vérification de la construction...

Étape 2 : Construction

🔨 Construction de l'Application

Exécution : npm run build

Sortie :
✓ Construction pour la production
✓ Compilation des pages
✓ Optimisation des ressources
✓ Construction terminée

Sortie de construction : ./dist (1,2 MB)

Étape 3 : Aperçu du Déploiement

📋 Aperçu du Déploiement

Projet : Acme Cloud App (nouveau déploiement)
Framework : Astro
Chemin de montage : /app

Premier Déploiement :
⚠️ C'est votre premier déploiement. Le CLI va :
1. S'authentifier avec votre site Webflow
2. Créer le projet dans Webflow Cloud
3. Définir projectId dans webflow.json
4. Déployer l'application

⚠️ Tapez « deploy » pour procéder au déploiement.

L'utilisateur confirme : deploy

Étape 4 : Déploiement

🚀 Déploiement sur Webflow Cloud

Exécution : webflow cloud deploy --no-input --mount <MOUNT_PATH> --skip-mount-path-check --skip-update-check

Sortie :
✓ Authentification avec Webflow...
✓ Site authentifié
✓ Création du projet Cloud
✓ Téléchargement des artefacts de construction (1,2 MB)
✓ Déploiement sur Webflow Cloud
✓ Déploiement terminé

✅ Déploiement Réussi !

ID du projet : proj_abc123xyz (ajouté à webflow.json)
Déploiement : https://acme-site.webflow.io/app

📋 Prochaines Étapes :
1. Visitez votre application déployée à l'URL ci-dessus
2. Les futurs déploiements utiliseront l'ID de projet enregistré
3. Utilisez : webflow cloud deploy (pas de nouvelle authentification nécessaire)
4. Publiez votre site pour rendre les modifications en direct

webflow.json mis à jour :
{
  "cloud": {
    "projectId": "proj_abc123xyz",
    "framework": "astro"
  }
}

Exemple 5 : Mettre à Jour un Déploiement Existant

Invite utilisateur :

Déployer les mises à jour de mon application Cloud

Vérification et Construction :

🔍 Vérification du Projet Cloud

✓ webflow.json trouvé
✓ ID du projet : proj_abc123xyz
✓ Framework : astro
✓ Authentification : Valide

Construction de l'application...
Exécution : npm run build
✓ Construction terminée (1,3 MB)

Aperçu :

📋 Aperçu du Déploiement

Projet : proj_abc123xyz
Framework : Astro
Chemin de montage : /app

Type de déploiement : Mettre à jour le projet existant
Authentification : Utilisation des identifiants enregistrés

⚠️ Tapez « deploy » pour procéder.

L'utilisateur confirme : deploy

Déploiement :

🚀 Mise à Jour du Déploiement Cloud

Exécution : webflow cloud deploy --no-input --mount <MOUNT_PATH> --skip-mount-path-check --skip-update-check

Sortie :
✓ Utilisation du projet : proj_abc123xyz
✓ Téléchargement des artefacts de construction (1,3 MB)
✓ Déploiement sur Webflow Cloud
✓ Déploiement terminé

✅ Déploiement Mis à Jour !

En direct à : https://acme-site.webflow.io/app
Modifications déployées avec succès !

💡 Publiez votre site pour rendre les mises à jour en direct.

Exemple 6 : Déploiement CI/CD

Invite utilisateur :

Comment déployer dans un pipeline CI/CD ?

Réponse :

🤖 Déploiement CI/CD pour Webflow Cloud

Pour les déploiements automatisés, utilisez le mode non interactif avec les options.

### Étapes de Configuration :

1. **S'authentifier Localement D'abord**
   Exécutez une fois pour créer le fichier .env :
   ```bash
   webflow auth login

Ajouter les Identifiants à CI/CD Ajoutez ces variables d'environnement à partir de .env :
- WEBFLOW_SITE_ID
- WEBFLOW_SITE_API_TOKEN

Commande de Déploiement

webflow cloud deploy --no-input --mount <MOUNT_PATH> --skip-mount-path-check --skip-update-check --auto-publish

Exemple : GitHub Actions

name: Déployer sur Webflow Cloud
on:
  push:
    branches: [main]

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

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

      - name: Installation des dépendances
        run: npm install

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

      - name: Construction de l'application
        run: npm run build

      - name: Déploiement sur Webflow Cloud
        run: |
          webflow cloud deploy \
            --no-input \
            --mount /app \
            --skip-mount-path-check \
            --skip-update-check \
            --auto-publish
        env:
          WEBFLOW_SITE_ID: ${{ secrets.WEBFLOW_SITE_ID }}
          WEBFLOW_SITE_API_TOKEN: ${{ secrets.WEBFLOW_SITE_API_TOKEN }}

Options de Déploiement :

Gestion des Environnements :

# Déployer vers un environnement spécifique
webflow cloud deploy --no-input -e staging -m <MOUNT_PATH> --skip-mount-path-check --skip-update-check

# Déployer en production avec auto-publish
webflow cloud deploy --no-input -e production -m <MOUNT_PATH> --skip-mount-path-check --skip-update-check --auto-publish

Déploiement de Nouveau Projet :

# Déployer un nouveau projet avec nom et description
webflow cloud deploy --no-input \
  --project-name "Acme App" \
  --description "Production deployment" \
  --mount <MOUNT_PATH> \
  --skip-mount-path-check \
  --skip-update-check \
  --auto-publish

Options Clés :

--env / -e - Nom de l'environnement
--mount / -m - Chemin de montage (par ex. /app)
--project-name / -p - Nom du projet (nouveaux projets)
--directory / -d - Chemin du répertoire du projet
--description - Description du projet
--skip-mount-path-check - Pas d'invites
--auto-publish - Publier après déploiement

⚠️ Sécurité :

Ne commitez jamais les fichiers .env
Utilisez les secrets CI/CD pour les identifiants
Renouvelez régulièrement les tokens

Directives

Phase 1 : Détection d'Opération

Déterminer l'Intention de l'Utilisateur : Posez des questions de clarification si nécessaire :

« Voulez-vous créer un nouveau projet Cloud ou déployer un projet existant ? »
« Quel framework souhaitez-vous utiliser ? (Exécutez « webflow cloud list » pour voir les options) »

Vérification du CLI :

# Vérifier que le CLI est installé
webflow --version

# S'il n'est pas installé :
npm install -g @webflow/webflow-cli

Phase 2A : Énumération des Modèles

Commande de Liste des Modèles :

# Afficher les modèles disponibles
webflow cloud list

# La sortie affiche les frameworks disponibles (astro, nextjs)

Informations sur les Modèles :

Astro : Générateur de site statique, idéal pour les sites centrés sur le contenu
Next.js : Framework React, supporte SSR et SSG

Phase 2B : Initialisation du Projet

Structure de la Commande Init :

# Init basique avec framework
webflow cloud init -f <framework>

# Avec chemin de montage
webflow cloud init -f astro -m /app

# Avec ID de site (se connecte à un site spécifique)
webflow cloud init -f nextjs -m /app -s <site-id>

Options Init :

--framework / -f (obligatoire) : astro ou nextjs
--mount / -m : Chemin de montage (par défaut invites)
--site-id / -s : Se connecter à un site spécifique

Après Init :

Vérifier que webflow.json est créé
Vérifier la configuration cloud
Afficher la structure du projet
Guider l'utilisateur vers les prochaines étapes (construction, développement, déploiement)

Phase 2C : Validation du Projet

Schéma Cloud de webflow.json :

{
  "cloud": {
    "projectId": "<ID du Projet>",  // Auto-défini au premier déploiement
    "framework": "astro"             // ou "nextjs"
  }
}

Champs de Configuration :

projectId : Identifiant du projet Cloud (automatiquement défini par le CLI au premier déploiement)
framework : Préréglage de framework - soit "nextjs" soit "astro"
chemin de montage : NON stocké dans webflow.json par le CLI. Vous devez le demander à l'utilisateur s'il déploie un projet existant.

Vérification de l'Authentification :

# L'authentification du site crée le fichier .env
# Vérifiez :
cat .env

# Doit contenir :
# WEBFLOW_SITE_ID=votre-id-site
# WEBFLOW_SITE_API_TOKEN=votre-token

# S'il manque, s'authentifier :
webflow auth login

Phase 3 : Processus de Construction

Commande de Construction :

# Utiliser le script de construction du projet
npm run build
# ou
yarn build
# ou
pnpm build

# Vérifier les erreurs
echo $?  # 0 = succès

Validation de la Construction :

Vérifier que le répertoire de sortie de la construction existe
Vérifier l'absence d'erreurs critiques
Confirmer que les ressources sont générées

Phase 4 : Aperçu du Déploiement

Format d'Aperçu :

📋 Aperçu du Déploiement

Projet : [Nom ou « Nouveau Projet »]
Framework : [astro/nextjs]
Chemin de montage : [Chemin si spécifié]
Environnement : [Nom si spécifié]

[Première fois : Expliquer le flux d'authentification]
[Subsequent : Afficher l'ID du projet]

Options :
- Auto-publish : [Oui/Non]
- Environnement : [Nom ou défaut]

⚠️ Tapez « deploy » pour procéder

Premier Déploiement : Expliquez clairement :

Le navigateur s'ouvrira pour l'authentification
Sélectionnez votre site Webflow
L'ID du projet sera créé et enregistré
Les futurs déploiements utiliseront l'ID du projet enregistré

Phase 5 : Exécution du Déploiement

Commande de Déploiement :

IMPORTANT : Le Webflow CLI est interactif par défaut. Utilisez toujours --no-input et --mount ensemble pour éviter les invites interactives que les agents ne peuvent pas gérer.

# Déploiement non interactif standard (utiliser ceci par défaut)
webflow cloud deploy --no-input --mount <MOUNT_PATH> --skip-mount-path-check --skip-update-check

# Avec auto-publish (publie le site après déploiement)
webflow cloud deploy --no-input --mount <MOUNT_PATH> --skip-mount-path-check --skip-update-check --auto-publish

# Nouveau projet avec nom (premier déploiement)
webflow cloud deploy --no-input \
  --project-name "Mon App" \
  --mount <MOUNT_PATH> \
  --skip-mount-path-check \
  --skip-update-check

# Avec environnement spécifique
webflow cloud deploy --no-input \
  -e production \
  --mount <MOUNT_PATH> \
  --skip-mount-path-check \
  --skip-update-check \
  --auto-publish

Options de Déploiement :

--no-input : REQUIS pour les agents — désactive toutes les invites interactives
--mount / -m : REQUIS — chemin de montage du projet. Doit correspondre au chemin de montage de l'environnement existant.
--skip-mount-path-check : REQUIS pour les agents — ignore la validation interactive du chemin de montage
--skip-update-check : RECOMMANDÉ — ignore la vérification interactive de mise à jour des packages
--auto-publish : Publier le site après déploiement
-e / --environment : Nom de l'environnement pour le déploiement
--project-name / -p : Nom du projet (pour les nouveaux projets)
--directory / -d : Chemin du répertoire du projet s'il n'est pas à la racine
--description : Description du projet (pour les nouveaux projets)

Indicateurs de Succès :

Les artefacts de construction sont téléchargés
Le déploiement est terminé
L'ID du projet est enregistré (première fois)
L'URL du site est disponible

Vérification :

Vérifier la sortie CLI pour le succès
Vérifier que l'ID du projet est ajouté à webflow.json (première fois)
Confirmer que l'URL de déploiement fonctionne
Noter si le site doit être publié

Gestion des Erreurs

CLI Non Installé :

❌ CLI Webflow Non Trouvé

Le CLI Webflow est requis pour Webflow Cloud.

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

Après l'installation, vérifiez :
webflow --version

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

Non Authentifié :

❌ Non Authentifié

Vous devez vous authentifier avec Webflow pour déployer sur Cloud.

Étapes :
1. Exécutez : webflow auth login
2. Suivez les invites d'authentification dans le navigateur
3. Sélectionnez votre site quand demandé
4. Vérifiez : le fichier .env créé avec WEBFLOW_SITE_ID et WEBFLOW_SITE_API_TOKEN
5. Recommencez le déploiement

Besoin d'aide ? https://developers.webflow.com/cli/authentication

Pas un Projet Cloud :

❌ Pas un Projet Webflow Cloud

Ce répertoire ne semble pas être un projet Cloud.

Initialiser un Projet Cloud :
1. Lister les modèles : webflow cloud list
2. Initialiser : webflow cloud init -f <framework>
   Exemple : webflow cloud init -f astro -m /app

Ou vérifiez webflow.json pour la configuration cloud :
{
  "cloud": {
    "framework": "astro" ou "nextjs"
  }
}

Échecs de Construction :

❌ Construction Échouée

Erreur : [Message d'erreur spécifique]

Correctifs Courants :
- Dépendances manquantes : Exécutez npm install
- Erreurs de script de construction : Vérifiez le script de construction dans package.json
- Erreurs de framework : Consultez la documentation du framework
- Problèmes de chemins : Vérifiez les chemins de fichiers et les imports

Afficher la sortie de construction pour plus de détails.

Échecs de Déploiement :

❌ Déploiement Échoué

Erreur : [Erreur spécifique du CLI]

Causes Possibles :
- Problèmes de connexion réseau
- Authentification expirée
- Artefacts de construction manquants ou invalides
- Permissions insuffisantes

Solutions :
1. Vérifiez la connexion Internet
2. Réauthentifiez-vous : webflow auth login
3. Reconstituez : npm run build
4. Vérifiez la configuration de webflow.json
5. Vérifiez les permissions du site dans le tableau de bord Webflow

Recommencer le déploiement ? (oui/non)

Framework Invalide :

❌ Framework Invalide

Le framework doit être soit « astro » soit « nextjs ».

Modèles Disponibles :
Exécutez : webflow cloud list

Initialiser avec un framework valide :
webflow cloud init -f astro
webflow cloud init -f nextjs

Opérations sur les Fichiers

Lecture de Fichiers : Utilisez toujours l'outil Read (ne jamais modifier) :

# Afficher la configuration Cloud
Read : webflow.json

# Afficher la configuration du package
Read : package.json

# Afficher l'environnement (s'il existe)
Read : .env

# Afficher la sortie de construction
Read : dist/ ou .next/ ou .output/

Découvrir des Fichiers : Utilisez l'outil Glob pour trouver des fichiers :

# Trouver les fichiers de configuration
Glob : *.json

# Trouver la sortie de construction
Glob : dist/**/*

# Trouver les fichiers source
Glob : src/**/*

Ne Jamais Utiliser les Outils Write/Edit :

Ne pas créer webflow.json avec Write (afficher la structure à l'utilisateur)
Ne pas modifier les fichiers de configuration
Laisser le CLI gérer la création de fichiers
Lire les fichiers uniquement pour afficher le contenu

Indicateurs de Progression

Pour la Construction :

🔨 Construction de l'Application...

Compilation des pages... ✓
Optimisation des ressources... ✓
Génération de la construction... ⏳

Temps écoulé : 15s

Pour le Déploiement :

🚀 Déploiement sur Webflow Cloud...

Téléchargement des artefacts... ✓
Déploiement de l'application... ⏳
Configuration des routes... ⏳

Téléchargé : 1,2 MB
Temps écoulé : 25s

Bonnes Pratiques

Configuration du Projet :

Utilisez cloud list pour voir les modèles disponibles avant init
Choisissez le framework en fonction des besoins du projet
Spécifiez le chemin de montage pendant init
Connectez-vous à l'ID du site s'il est déjà créé

Développement :

Construisez localement avant de déployer
Testez en détail dans l'environnement de développement
Utilisez les variables d'environnement pour la configuration

Déploiement :

Construisez toujours avant de déployer
Utilisez toujours --no-input --mount <MOUNT_PATH> --skip-mount-path-check --skip-update-check pour les déploiements non interactifs
Utilisez --auto-publish pour les déploiements en production
Testez le déploiement avant de publier le site

CI/CD :

Stockez les identifiants dans les secrets
Utilisez toujours --no-input pour désactiver toutes les invites interactives
Spécifiez toujours --mount avec le chemin correct
Activez l'auto-publish pour la production
Utilisez --skip-mount-path-check et --skip-update-check

Gestion de l'Environnement :

Utilisez .env pour le développement local
Ajoutez .env à .gitignore
Utilisez les secrets CI/CD pour la production
Renouvelez régulièrement les tokens

Référence Rapide

Workflow : lister les modèles → initialiser le projet → construire → déployer

Commandes Clés :

webflow cloud list - Lister les modèles disponibles
webflow cloud init - Initialiser un nouveau projet
webflow cloud deploy - Déployer l'application

Options Init :

-f / --framework - Framework (astro, nextjs)
-m / --mount - Chemin de montage
-s / --site-id - ID du site

Options de Déploiement (pour les agents/automatisation, toujours inclure les 4 premiers) :

--no-input - REQUIS : désactiver les invites interactives
-m / --mount - REQUIS : chemin de montage (doit correspondre à l'environnement existant)
--skip-mount-path-check - REQUIS : ignorer la validation du chemin de montage
--skip-update-check - RECOMMANDÉ : ignorer la vérification de mise à jour
--auto-publish - Publier après déploiement
-e / --environment - Nom de l'environnement
-p / --project-name - Nom du projet (nouveaux projets)

Configuration : webflow.json avec section cloud

Schéma :

{
  "cloud": {
    "projectId": "proj_xxx", // auto-défini
    "framework": "astro"      // ou "nextjs"
  }
}

Authentification : Authentification du site via webflow auth login

Environnement : WEBFLOW_SITE_ID et WEBFLOW_SITE_API_TOKEN dans .env

Vérification : Vérifier webflow --version et l'authentification du site en premier

Confirmation : Exiger le mot-clé « deploy » avant le déploiement

Documentation : https://developers.webflow.com/webflow-cloud/intro

webflow-cli:cloud

Webflow Cloud

Note Importante

Instructions

Phase 1 : Déterminer le Type d'Opération

Phase 2A : Lister les Modèles (si nécessaire)

Phase 2B : Initialiser un Nouveau Projet (si nécessaire)

Phase 2C : Valider un Projet Existant (si déploiement)

Phase 3 : Exécution de la Construction (pour le déploiement)

Phase 4 : Aperçu du Déploiement (pour le déploiement)

Phase 5 : Exécution du Déploiement

Exemples

Exemple 1 : Lister les Modèles Disponibles

Exemple 2 : Initialiser un Nouveau Projet Cloud

Exemple 3 : Initialiser avec ID de Site

Exemple 4 : Premier Déploiement

Exemple 5 : Mettre à Jour un Déploiement Existant

Exemple 6 : Déploiement CI/CD

Exemple : GitHub Actions

Options de Déploiement :

Options Clés :

Directives

Phase 1 : Détection d'Opération

Phase 2A : Énumération des Modèles

Phase 2B : Initialisation du Projet

Phase 2C : Validation du Projet

Phase 3 : Processus de Construction

Phase 4 : Aperçu du Déploiement

Phase 5 : Exécution du Déploiement

Gestion des Erreurs

Opérations sur les Fichiers

Indicateurs de Progression

Bonnes Pratiques

Référence Rapide

Skills similaires