/deploy-guide

name: webflow-code-component:deploy-guide
description: Step-by-step guide for deploying Webflow Code Components to a workspace. Covers authentication, pre-flight checks, deployment execution, and verification.
compatibility: Node.js 18+, React 18+, TypeScript, @webflow/webflow-cli
metadata:
  author: webflow
  version: "1.1"

Deploy Guide

Guide users through deploying their code component library to Webflow.

When to Use This Skill

**Use when:**

• User is ready to deploy components to Webflow
• User asks how to share, publish, or deploy their library
• First-time deployment to a workspace
• Step-by-step deployment walkthrough needed

**Do NOT use when:**

• Deployment failed (use troubleshoot-deploy instead)
• Just validating before deploy (use pre-deploy-check instead)
• Setting up local development (use local-dev-setup instead)

**Note:** The CLI command is `webflow library share`. This skill uses "deploy" as the user-facing term.

Instructions

Phase 1: Pre-Flight Checks

1. **Verify project is ready**:

• Check webflow.json configuration
• Ensure all dependencies installed
• Run pre-deploy-check skill checks

2. **Check authentication status**:

• Look for existing .env with API token
• Verify WEBFLOW_WORKSPACE_API_TOKEN if set
• Prepare for authentication if needed

3. **Confirm deployment target**:

• Which workspace?
• New library or update existing?

Phase 2: Authentication

4. **Guide authentication**:

• Interactive: Follow CLI prompts
• CI/CD: Use --api-token flag
• Show how to get workspace API token if needed

Phase 3: Deployment

5. **Execute deployment**:

• Run `npx webflow library share`
• Monitor for errors
• Capture output

Phase 4: Verification

6. **Verify deployment**:

• Check Webflow Designer for components
• Test component functionality
• Confirm all components appear

7. **Provide next steps**:

• How to use components in Designer
• How to update in future
• Common post-deploy tasks
• If deployment fails, use [troubleshoot-deploy](../troubleshoot-deploy/SKILL.md) to diagnose and fix issues

Deployment Workflow

Standard Deployment

📦 Deploying Code Components

Step 1: Pre-flight checks
├── webflow.json ✅
├── Dependencies ✅
└── Build test ✅

Step 2: Authentication
├── Checking for existing auth...
└── Found valid token ✅

Step 3: Deploying
├── Bundling components...
├── Uploading to workspace...
└── Processing...

Step 4: Verification
├── Library registered ✅
└── 4 components available ✅

🎉 Deployment Complete!

CI/CD Deployment

# Set environment variable
export WEBFLOW_WORKSPACE_API_TOKEN=your-token-here

# Deploy without prompts
npx webflow library share --no-input

Examples

**User prompt:**

Deploy my components to Webflow

**Response:**

🚀 Deploy Guide: Code Components

Let me guide you through deploying your component library.

---

## Step 1: Pre-Flight Checks

Running validation...

✅ webflow.json configured
✅ Dependencies installed
✅ Build succeeds
✅ Bundle size: 2.3MB (under 50MB limit)

All checks passed! Ready to deploy.

---

## Step 2: Authentication

**Option A: Interactive (Recommended for first time)**

Run the deploy command:
```bash
npx webflow library share

This will: 1. Open your browser for Webflow login 2. Ask you to authorize the app 3. Save credentials to .env

**Option B: API Token (For CI/CD or returning users)**

1. Get your Workspace API Token:

• Go to Webflow Dashboard
• Navigate to your Workspace Settings
• Find "Apps & Integrations" → "Manage"
• Under "Workspace API Access", click "Generate API Token"
• Copy the token

2. Run with token:

npx webflow library share --api-token YOUR_TOKEN_HERE

Or set environment variable:

export WEBFLOW_WORKSPACE_API_TOKEN=YOUR_TOKEN_HERE
npx webflow library share

---

Step 3: Deploy

Ready to deploy? Run:

npx webflow library share

Expected output:

✓ Bundling components...
✓ Authenticating...
✓ Uploading library...
✓ Processing...

Library "My Component Library" successfully shared!

Components:
- Button
- Card
- Accordion
- Modal

View in Designer: Open any site in your workspace

---

Step 4: Verify in Designer

After deployment:

1. **Open Webflow Designer** for any site in your workspace 2. **Open Add Panel** (A key or + button) 3. **Find "Components"** section 4. **Look for your library** under custom components 5. **Drag a component** onto the canvas to test

---

Step 5: Next Steps

✅ **Your components are live!**

**To update components later:**

# Make your changes, then re-deploy
npx webflow library share

**Important notes:**

• Updates replace the entire library (no partial updates)
• Existing component instances will update automatically
• Don't rename .webflow.tsx files (breaks instances)

---

💡 **Tips:**

• Add .env to .gitignore to protect your token
• Use `--verbose` flag for debugging issues
• Run `npx webflow library log` to see recent deploy logs

---

**Example: First-Time Setup**

🚀 Deploy Guide: First-Time Setup

I see this is your first deployment. Let me walk you through the full setup.

---

Step 1: Get Workspace API Token

You'll need a Workspace API token to deploy:

1. **Open Webflow Dashboard** Go to webflow.com and log in

2. **Navigate to Workspace Settings** Click your workspace name → Settings

3. **Find API Access** Go to "Apps & Integrations" → "Manage"

4. **Generate Token** Under "Workspace API Access":

• Click "Generate API Token"
• Copy the token (you won't see it again!)

5. **Save Token** Add to your .env file:

   WEBFLOW_WORKSPACE_API_TOKEN=your-token-here

⚠️ Add .env to .gitignore:

   echo ".env" >> .gitignore

---

Step 2: Deploy

Now run:

npx webflow library share

The CLI will: 1. Read your token from .env 2. Bundle your components 3. Upload to your wo