Deploy Frontend

Walks you through the seven-step process to get a React, Next.js, or static site live on Butterbase, from setting environment variables to verifying the deployment. The real value is in the prescriptive details: it includes a complete Node archiver script because the usual zip methods break MIME types on Windows, has a framework reference table for build commands and output directories, and covers the CORS configuration step most guides skip. If you've ever deployed a frontend only to see a blank page or console errors about incorrect content types, this addresses exactly those issues. The workflow is opinionated but that's the point.

GitHub stars: 532
last updated: Jun 11, 2026

View on GitHub

Install

$ npx -y skills add butterbase-ai/butterbase-skills --skill deploy-frontend --agent claude-code

Installs into .claude/skills of the current project.

Files

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.

{
  "app_id": "app_abc123",
  "action": "set_env",
  "vars": {
    "VITE_API_URL": "https://api.butterbase.ai/v1/app_abc123",
    "VITE_APP_ID": "app_abc123"
  }
}

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly