Skip to main content 홈 크리에이터 jeremylongshore claude-code-plugins-plus-skills webflow-multi-env-setup
webflow-multi-env-setup Configure Webflow across development, staging, and production environments with
per-environment API tokens, site IDs, and secret management via Vault/AWS/GCP.
Trigger with phrases like "webflow environments", "webflow staging",
"webflow dev prod", "webflow environment setup", "webflow config by env".
설치로 이동 Skills Marketplace 커뮤니티가 만든 AI 스킬을 발견하고 탐색하세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/jeremylongshore/claude-code-plugins-plus-skills --skill webflow-multi-env-setup명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Zip 다운로드 다운로드 중... 이 저장소의 다른 Skills Implement user sign-up and sign-in flows with Clerk.
Use when building authentication UI, customizing sign-in experience,
or implementing OAuth social login.
Trigger with phrases like "clerk sign-in", "clerk sign-up",
"clerk login flow", "clerk OAuth", "clerk social login".
Implement session management and middleware with Clerk.
Use when managing user sessions, configuring route protection,
or implementing token refresh and custom JWT templates.
Trigger with phrases like "clerk session", "clerk middleware",
"clerk route protection", "clerk token", "clerk JWT".
Configure enterprise SSO, role-based access control, and organization management.
Use when implementing SSO integration, configuring role-based permissions,
or setting up organization-level controls.
Trigger with phrases like "clerk SSO", "clerk RBAC",
"clerk enterprise", "clerk roles", "clerk permissions", "clerk organizations".
jeremylongshore
jeremylongshore/claude-code-plugins-plus-skills
GitHub 저장소 열기 name webflow-multi-env-setup description Configure Webflow across development, staging, and production environments with
per-environment API tokens, site IDs, and secret management via Vault/AWS/GCP.
Trigger with phrases like "webflow environments", "webflow staging",
"webflow dev prod", "webflow environment setup", "webflow config by env".
allowed-tools Read, Write, Edit, Bash(aws:*), Bash(gcloud:*), Bash(vault:*) version 1.5.0 license MIT author Jeremy Longshore <jeremy@intentsolutions.io> tags ["saas","design","no-code","webflow"] compatibility Designed for Claude Code
Webflow Multi-Environment Setup
Overview
Configure Webflow Data API v2 integrations across development, staging, and production
with separate API tokens, site IDs, and secret management. Each environment targets
a different Webflow site for complete isolation.
Prerequisites
Separate Webflow sites for each environment (or at minimum, separate API tokens)
Secret management solution (Vault, AWS Secrets Manager, or GCP Secret Manager)
CI/CD pipeline with environment variable support
Environment Strategy
Environment Webflow Site API Token CMS Data Purpose Development Dev site Dev token Test/seed data Local development Staging Staging site Staging token Copy of prod data Pre-prod validation Production Production site Prod token Real data Live traffic
Instructions
Step 1: Environment Configuration
type Environment = "development" | "staging" | "production" ;
interface WebflowEnvConfig {
accessToken : string ;
siteId : string ;
maxRetries : number ;
webhookSecret : string ;
debug : boolean ;
}
function detectEnvironment ( ): Environment {
const env = process.env .NODE_ENV || "development" ;
: [] = [ , , ];
valid. (env ) ? (env ) : ;
}
( ): {
env = ();
: < , > = {
: ({
: ( ),
: ( ),
: ,
: process. . || ,
: ,
}),
: ({
: ( ),
: ( ),
: ,
: ( ),
: ,
}),
: ({
: ( ),
: ( ),
: ,
: ( ),
: ,
}),
};
config = configs[env]();
. ( );
config;
}
( ): {
value = process. [name];
(!value) ( );
value;
}
const
valid
Environment
"development"
"staging"
"production"
return
includes
as
Environment
as
Environment
"development"
export
function
getWebflowConfig
WebflowEnvConfig
const
detectEnvironment
const
configs
Record
Environment
() =>
WebflowEnvConfig
development
() =>
accessToken
requireEnv
"WEBFLOW_API_TOKEN"
siteId
requireEnv
"WEBFLOW_SITE_ID"
maxRetries
1
webhookSecret
env
WEBFLOW_WEBHOOK_SECRET
""
debug
true
staging
() =>
accessToken
requireEnv
"WEBFLOW_API_TOKEN_STAGING"
siteId
requireEnv
"WEBFLOW_SITE_ID_STAGING"
maxRetries
2
webhookSecret
requireEnv
"WEBFLOW_WEBHOOK_SECRET_STAGING"
debug
false
production
() =>
accessToken
requireEnv
"WEBFLOW_API_TOKEN_PROD"
siteId
requireEnv
"WEBFLOW_SITE_ID_PROD"
maxRetries
3
webhookSecret
requireEnv
"WEBFLOW_WEBHOOK_SECRET_PROD"
debug
false
const
console
log
`[webflow] Environment: ${env} , Site: ${config.siteId.substring(0 , 8 )} ...`
return
function
requireEnv
name : string
string
const
env
if
throw
new
Error
`Missing required env var: ${name} `
return
Step 2: Environment Files
WEBFLOW_API_TOKEN=dev-token-here
WEBFLOW_SITE_ID=dev-site-id-here
WEBFLOW_WEBHOOK_SECRET=dev-webhook-secret
WEBFLOW_API_TOKEN_STAGING=staging-token-here
WEBFLOW_SITE_ID_STAGING=staging-site-id-here
WEBFLOW_WEBHOOK_SECRET_STAGING=staging-webhook-secret
WEBFLOW_API_TOKEN_PROD=prod-token-here
WEBFLOW_SITE_ID_PROD=prod-site-id-here
WEBFLOW_WEBHOOK_SECRET_PROD=prod-webhook-secret
WEBFLOW_API_TOKEN=your-token-here
WEBFLOW_SITE_ID=your-site-id-here
WEBFLOW_WEBHOOK_SECRET=your-webhook-secret
Step 3: Secret Management
AWS Secrets Manager
aws secretsmanager create-secret \
--name webflow/production \
--secret-string '{
"WEBFLOW_API_TOKEN": "prod-token",
"WEBFLOW_SITE_ID": "prod-site-id",
"WEBFLOW_WEBHOOK_SECRET": "prod-webhook-secret"
}'
aws secretsmanager get-secret-value \
--secret-id webflow/production \
--query SecretString --output text | jq .
import { SecretsManagerClient , GetSecretValueCommand } from "@aws-sdk/client-secrets-manager" ;
async function loadWebflowSecrets (env : string ) {
const client = new SecretsManagerClient ({});
const command = new GetSecretValueCommand ({
SecretId : `webflow/${env} ` ,
});
const response = await client.send (command);
const secrets = JSON .parse (response.SecretString !);
process.env .WEBFLOW_API_TOKEN_PROD = secrets.WEBFLOW_API_TOKEN ;
process.env .WEBFLOW_SITE_ID_PROD = secrets.WEBFLOW_SITE_ID ;
}
GCP Secret Manager
echo -n "prod-token" | gcloud secrets create webflow-api-token-prod --data-file=-
echo -n "prod-site-id" | gcloud secrets create webflow-site-id-prod --data-file=-
gcloud run deploy webflow-service \
--set-secrets="WEBFLOW_API_TOKEN_PROD=webflow-api-token-prod:latest,WEBFLOW_SITE_ID_PROD=webflow-site-id-prod:latest"
HashiCorp Vault
vault kv put secret/webflow/production \
api_token="prod-token" \
site_id="prod-site-id" \
webhook_secret="prod-webhook-secret"
vault kv get -field=api_token secret/webflow/production
Step 4: Environment Guards Prevent destructive operations in wrong environment:
function requireProduction (operation : string ): void {
const config = getWebflowConfig ();
if (config.debug ) {
throw new Error (
`${operation} is production-only. Current: ${detectEnvironment()} `
);
}
}
function blockProduction (operation : string ): void {
const env = detectEnvironment ();
if (env === "production" ) {
throw new Error (
`${operation} is blocked in production. Use staging for testing.`
);
}
}
async function publishSite (siteId : string ) {
requireProduction ("publishSite" );
await webflow.sites .publish (siteId, { publishToWebflowSubdomain : true });
}
async function deleteAllItems (collectionId : string ) {
blockProduction ("deleteAllItems" );
const { items } = await webflow.collections .items .listItems (collectionId);
const ids = items!.map (i => i.id !);
await webflow.collections .items .deleteItemsBulk (collectionId, { itemIds : ids });
}
Step 5: CI/CD Environment Matrix
name: Deploy Webflow Integration
on:
push:
branches: [main , staging ]
jobs:
deploy:
runs-on: ubuntu-latest
strategy:
matrix:
include:
- branch: staging
env: staging
token_secret: WEBFLOW_API_TOKEN_STAGING
site_secret: WEBFLOW_SITE_ID_STAGING
- branch: main
env: production
token_secret: WEBFLOW_API_TOKEN_PROD
site_secret: WEBFLOW_SITE_ID_PROD
if: github.ref == format('refs/heads/{0}', matrix.branch)
environment: ${{ matrix.env }}
env:
NODE_ENV: ${{ matrix.env }}
WEBFLOW_API_TOKEN: ${{ secrets[matrix.token_secret] }}
WEBFLOW_SITE_ID: ${{ secrets[matrix.site_secret] }}
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: "20"
- run: npm ci
- run: npm test
- name: Verify Webflow connectivity
run: |
curl -sf -H "Authorization: Bearer $WEBFLOW_API_TOKEN" \
https://api.webflow.com/v2/sites/$WEBFLOW_SITE_ID > /dev/null
- run: npm run deploy
Step 6: Environment Status Dashboard async function environmentReport ( ) {
for (const env of ["development" , "staging" , "production" ]) {
try {
process.env .NODE_ENV = env;
const config = getWebflowConfig ();
const webflow = new WebflowClient ({ accessToken : config.accessToken });
const site = await webflow.sites .get (config.siteId );
console .log (`[${env} ] ${site.displayName} — last published: ${site.lastPublished} ` );
} catch (error : any ) {
console .log (`[${env} ] ERROR: ${error.message} ` );
}
}
}
Output
Per-environment configuration with separate tokens and site IDs
Secret management via AWS/GCP/Vault
Environment guards preventing dangerous cross-environment operations
CI/CD matrix deploying to correct environment per branch
Environment status reporting
Error Handling Issue Cause Solution Wrong site in production Token/site mismatch Verify WEBFLOW_SITE_ID matches expected site Secret not found Wrong path/name Check secret manager path matches env Guard triggered Running prod operation in dev Set NODE_ENV correctly Missing env var .env not loaded dotenv.config({ path: ".env.development" })
Resources
Next Steps For observability setup, see webflow-observability.