Framer Ci Integration

---
name: framer-ci-integration
description: 'Configure Framer CI/CD integration with GitHub Actions and testing.

  Use when setting up automated testing, configuring CI pipelines,

  or integrating Framer tests into your build process.

  Trigger with phrases like "framer CI", "framer GitHub Actions",

  "framer automated tests", "CI framer".

  '
allowed-tools: Read, Write, Edit, Bash(gh:*)
version: 1.5.0
license: MIT
author: Jeremy Longshore <jeremy@intentsolutions.io>
tags:
- saas
- framer
compatibility: Designed for Claude Code
---
# 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

```yaml
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

```typescript
// 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

```bash
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

- [GitHub Actions](https://docs.github.com/en/actions)
- [Framer Server API](https://www.framer.com/developers/server-api-introduction)

## Next Steps

For deployment, see `framer-deploy-integration`.