> ## Documentation Index
> Fetch the complete documentation index at: https://docs.folksbase.joselito.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Vercel Deployment

> How to deploy the folksbase web app to Vercel.

The Next.js frontend (`apps/web`) deploys to Vercel. It auto-deploys on every push to `main` and creates preview URLs for pull requests.

## Prerequisites

* A [Vercel](https://vercel.com) account
* The folksbase repository connected to Vercel
* All external services configured (Supabase, Neon, etc.)

## Step-by-Step Setup

### 1. Import the Repository

1. Go to [vercel.com/new](https://vercel.com/new)
2. Import your folksbase GitHub repository
3. Vercel will auto-detect it as a monorepo

### 2. Configure the Project

Set the following in your Vercel project settings:

| Setting          | Value                                     |
| ---------------- | ----------------------------------------- |
| Framework Preset | Next.js                                   |
| Root Directory   | `apps/web`                                |
| Build Command    | `pnpm build` (Turborepo handles the rest) |
| Output Directory | `.next`                                   |
| Node.js Version  | 24.x                                      |

### 3. Set Environment Variables

Add these in the Vercel dashboard under **Settings → Environment Variables**:

| Variable                               | Example Value                       |
| -------------------------------------- | ----------------------------------- |
| `NEXT_PUBLIC_API_URL`                  | `https://your-api.onrender.com/api` |
| `NEXT_PUBLIC_SUPABASE_URL`             | `https://your-project.supabase.co`  |
| `NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY` | Your Supabase anon key              |

<Warning>
  These are `NEXT_PUBLIC_` variables — they're embedded in the client bundle at build time. Changing them requires a redeploy.
</Warning>

### 4. Deploy

Push to `main` or click "Deploy" in the Vercel dashboard. The first build takes a few minutes as it installs all monorepo dependencies.

## Preview Deployments

Every pull request automatically gets a unique preview URL. This is where Playwright E2E tests run in CI — the `PLAYWRIGHT_BASE_URL` is set to the preview URL.

Preview deployments use the same environment variables as production unless you configure environment-specific overrides in Vercel.

## Monorepo Configuration

Vercel needs to know which app to build. The root directory setting (`apps/web`) tells Vercel to scope the build to the web app, but Turborepo's dependency graph ensures shared packages (`@folksbase/db`, `@folksbase/types`) are built first.

If you're using Vercel's monorepo support, make sure the **Ignored Build Step** is not filtering out changes to `packages/` — those affect the web app too.

## Rollback

If a deployment breaks production:

1. Go to the **Deployments** tab in your Vercel project
2. Find the last working deployment
3. Click the three-dot menu → **Promote to Production**

This is instant — no rebuild required.

## Custom Domain

1. Go to **Settings → Domains** in your Vercel project
2. Add your domain (e.g., `folksbase.joselito.dev`)
3. Configure DNS as instructed by Vercel (CNAME or A record)
4. SSL is provisioned automatically