Skip to content

Deploy the web app to Vercel

Publish the web app, then point the api and Supabase at its real URL. About 15 minutes; it creates a Vercel project and redeploys the api once.

Before you start

Steps

  1. In Vercel, choose Add New → Project and import the repository. Set Root Directory to services/web; leave the build settings on auto-detect. Vercel reads services/web/vercel.json, which installs and runs pnpm gen && pnpm --filter web build from the workspace root.

  2. Before deploying, add these environment variables:

    KeyValue
    NEXT_PUBLIC_SUPABASE_URLSupabase project URL
    NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEYSupabase publishable key
    NEXT_PUBLIC_API_URLthe api URL
    NEXT_PUBLIC_APP_URLhttps://monark.vercel.app (placeholder)
    SUPABASE_URLSupabase project URL
    SUPABASE_SECRET_KEYSupabase secret key. Server-only: never add it with a NEXT_PUBLIC_ prefix. Admin actions such as uploading the organization logo need it.
  3. Click Deploy and wait for the build to finish. Copy the deployment's URL.

  4. Pin the region under Settings → Functions to match the api's Render region:

    Render regionVercel region
    oregonsfo1 or pdx1
    ohioiad1 or cle1
    frankfurtfra1 or cdg1
  5. In Vercel, set NEXT_PUBLIC_APP_URL to the real URL, then redeploy the latest deployment. NEXT_PUBLIC_* values are compiled into the build, so saving them alone changes nothing.

  6. In Render, open monark-api → Environment and set both WEB_ORIGIN and APP_URL to the web URL. Save; Render redeploys.

  7. In Supabase, under Authentication → URL Configuration, set Site URL to the web URL and add these redirect URLs:

    https://<web-host>/auth/confirm
    https://<web-host>/auth/callback
    

    The change is live immediately.

Verify

Open the web URL. You land on the sign-in page, which reads "Sign in to continue to" followed by your organization's name.

If something goes wrong

SymptomCauseFix
Build fails at pnpm genRoot Directory isn't services/webFix it under Settings → Build and Deployment and redeploy.
Sign-in page loads but every action fails with a network errorNEXT_PUBLIC_API_URL wrong, or the api's WEB_ORIGIN doesn't match the web URLCorrect both; redeploy the web app after changing a NEXT_PUBLIC_ value.
Uploading the organization logo failsSUPABASE_URL or SUPABASE_SECRET_KEY missing on VercelAdd both (no NEXT_PUBLIC_ prefix) and redeploy.
Confirmation link ends on an error pageredirect URLs missing in SupabaseAdd both /auth/ URLs from step 7.

Next: Smoke-test a deployment