Framer CI Integration

Overview

Set up CI/CD pipelines for Framer integrations with automated testing.

Prerequisites

• GitHub repository with Actions enabled
• Framer test API key
• npm/pnpm project configured

Instructions

Step 1: Create GitHub Actions Workflow

Create .github/workflows/framer-integration.yml:

name: Framer Integration Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

env:
  FRAMER_API_KEY: ${{ secrets.FRAMER_API_KEY }}

jobs:
  test:
    runs-on: ubuntu-latest
    env:
      FRAMER_API_KEY: ${{ secrets.FRAMER_API_KEY }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm test -- --coverage
      - run: npm run test:integration

Step 2: Configure Secrets

gh secret set FRAMER_API_KEY --body "sk_test_***"

Step 3: Add Integration Tests

describe('Framer Integration', () => {
  it.skipIf(!process.env.FRAMER_API_KEY)('should connect', async () => {
    const client = getFramerClient();
    const result = await client.healthCheck();
    expect(result.status).toBe('ok');
  });
});

Output

• Automated test pipeline
• PR checks configured
• Coverage reports uploaded
• Release workflow ready

Error Handling

Examples

Release Workflow

on:
  push:
    tags: ['v*']

jobs:
  release:
    runs-on: ubuntu-latest
    env:
      FRAMER_API_KEY: ${{ secrets.FRAMER_API_KEY_PROD }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - name: Verify Framer production readiness
        run: npm run test:integration
      - run: npm run build
      - run: npm publish

Branch Protection

required_status_checks:
  - "test"
  - "framer-integration"

Resources

• GitHub Actions Documentation
• Framer CI Guide

Next Steps

For deployment patterns, see framer-deploy-integration.