gabrielmoreira Framer CI Integration
Prerequisites
Protected CI environments, scoped credentials available only to trusted jobs, synthetic site/CMS fixtures, and a deployment owner.
Error Handling
Stop promotion on failed build, publish, domain, integration, or privacy checks; roll back the canary and preserve redacted evidence for review.
Examples
Run fixture-based tests with no secrets on a pull request, then use a protected staging job to publish a fictional canary. Block production promotion when a route, integration, or access check differs from the approved result.
Overview
Set up CI/CD for Framer plugins and Server API integrations. Plugin builds are tested with Vite + vitest. Server API CMS sync can be triggered from CI for automated content publishing.
Instructions
Step 1: GitHub Actions for Plugin Build
name: Framer Plugin CI
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20', cache: 'npm' }
- run: npm ci
- run: npm run build
- run: npm test
cms-sync:
if: github.ref == 'refs/heads/main'
needs: build
runs-on: ubuntu-latest
env:
FRAMER_API_KEY: ${{ secrets.FRAMER_API_KEY }}
FRAMER_SITE_ID: ${{ secrets.FRAMER_SITE_ID }}
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: '20', cache: 'npm' }
- run: npm ci
- name: Sync CMS and publish
run: node scripts/sync-and-publish.js
Step 2: CMS Sync Script for CI
// scripts/sync-and-publish.ts
import { framer } from 'framer-api';
async function main() {
const client = await framer.connect({
apiKey: process.env.FRAMER_API_KEY!,
siteId: process.env.FRAMER_SITE_ID!,
});
// Fetch content from your CMS/API
const posts = await fetch('https://your-api.com/posts').then(r => r.json());
// Sync to Framer CMS
const collections = await client.getCollections();
const blogCollection = collections.find(c => c.name === 'Blog Posts');
if (blogCollection) {
await blogCollection.setItems(posts.map(p => ({ fieldData: { title: p.title, body: p.content, slug: p.slug } })));
console.log(`Synced ${posts.length} posts`);
}
// Publish site
await client.publish();
console.log('Site published');
}
main().catch(e => { console.error(e); process.exit(1); });
Step 3: Configure Secrets
gh secret set FRAMER_API_KEY --body "framer_sk_..."
gh secret set FRAMER_SITE_ID --body "abc123"
Output
- Plugin builds verified on every PR
- Automated CMS sync and publish on main push
- Secrets configured in GitHub
Resources
Next Steps
For deployment, see framer-deploy-integration.