Framer Deploy Integration
Overview
Deploy Framer Server API integrations (CMS sync services, webhook handlers) to cloud platforms. Framer sites themselves are hosted by Framer — this covers deploying your backend services that interact with Framer.
Instructions
Step 1: Vercel Serverless (CMS Sync API)
import type { VercelRequest, VercelResponse } from '@vercel/node';
import { framer } from 'framer-api';
export default async function handler(req: VercelRequest, res: VercelResponse) {
if (req.method !== 'POST') return res.status(405).end();
const client = await framer.connect({
apiKey: process.env.FRAMER_API_KEY!,
siteId: process.env.FRAMER_SITE_ID!,
});
const { items, collectionName } = req.body;
const collections = await client.getCollections();
const col = collections.find(c => c.name === collectionName);
if (!col) return res.status(404).json({ error: 'Collection not found' });
await col.setItems(items);
await client.publish();
res.json({ synced: items.length, published: true });
}
vercel env add FRAMER_API_KEY production
vercel env add FRAMER_SITE_ID production
vercel --prod
Step 2: Fly.io (Long-Running Sync Service)
fly secrets set FRAMER_API_KEY=framer_sk_...
fly secrets set FRAMER_SITE_ID=abc123
fly deploy
Step 3: Webhook Receiver for Content Updates
export default async function handler(req, res) {
const { event, data } = req.body;
if (event === 'content.published') {
const client = await framer.connect({ apiKey: process.env.FRAMER_API_KEY!, siteId: process.env.FRAMER_SITE_ID! });
const col = (await client.getCollections()).find(c => c.name === 'Blog Posts');
if (col) await col.setItems([{ fieldData: data }]);
await client.publish();
}
res.json({ ok: true });
}
Output
- Serverless CMS sync endpoint
- Webhook handler for content update automation
- Platform secrets configured
Resources
Next Steps
For webhook patterns, see framer-webhooks-events.
