deploy-frontend
Use when deploying a frontend (React, Next.js, or static HTML) to a live URL on Butterbase, or when troubleshooting deployment issues like MIME type errors or blank pages
Profile →npx skills add butterbase-ai/butterbase-skills --skill deploy-frontend --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
## Overview 7-step workflow for deploying static frontends to Butterbase. Covers building, CORS, zipping, uploading, and verification. --- ## Framework Reference Table | Framework | Build command | Output dir | Env prefix | Framework flag | |-----------------|-----------------|--------------|-----------------|-----------------| | React (Vite) | `npm run build` | `dist/` | `VITE_` | `react-vite` | | Next.js (static)| `next build` | `out/` | `NEXT_PUBLIC_` | `nextjs-static` | | Plain HTML | (none) | project root | N/A | `static` | > **Note:** Next.js requires `output: 'export'` in `next.config.js` to produce a static export. --- ## Step 1: Set Environment Variables Use `manage_frontend` with `action: "set_env"` to configure the API URL and app ID before building. These variables are injected at build time by the framework. ```json { "app_id": "app_abc123", "action": "set_env", "vars": { "VITE_API_URL": "https://api.butterbase.ai/v1/app_abc123", "VITE_APP_ID": "app_abc123" } } ``` - For Vite, prefix all public variables with `VITE_` - For Next.js, prefix with `NEXT_PUBLIC_` - For Create React App, prefix with `REACT_APP_` `set_env` upserts; you can call it again to add or change varia
- Overview
- Framework Reference Table
- Step 1: Set Environment Variables
- Step 2: Build
- Step 3: Configure CORS
- Step 4: Create Deployment
- Step 5: Create Zip (Node archiver — the only supported method)
- Step 6: Upload
- Step 7: Start & Verify
- Troubleshooting
- Bonus: server-side build (no local build needed)
- Edge SSR (Next.js / Remix with server-side rendering)
For Vite
ls dist/index.html
For Next.js static export
ls out/index.html
npm install --save-dev archiver
mkdir -p scripts
curl -X PUT "{uploadUrl}" \
node scripts/make-zip.mjs . source.zip \What does the deploy-frontend skill do?
Use when deploying a frontend (React, Next.js, or static HTML) to a live URL on Butterbase, or when troubleshooting deployment issues like MIME type errors or blank pages
How do I install it?
Run `npx skills add butterbase-ai/butterbase-skills --skill deploy-frontend --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From butterbase-ai/butterbase-skills, a repository with 532 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.