ScaleRocket/Web

Deploy to Vercel

Set up three Vercel projects for web, app, and admin with correct build settings and environment variables.

Overview

ScaleRocket deploys as three separate Vercel projects -- one for each app. Each project points to the same Git repository but uses different root directories and build commands.

Project Setup

1. Marketing Site (apps/web)

SettingValue
FrameworkNext.js
Root Directoryapps/web
Build Commandcd ../.. && pnpm turbo build --filter=web
Output Directory.next
Install Commandcd ../.. && pnpm install

2. User Dashboard (apps/app)

SettingValue
FrameworkVite
Root Directoryapps/app
Build Commandcd ../.. && pnpm turbo build --filter=app
Output Directorydist
Install Commandcd ../.. && pnpm install

3. Admin Panel (apps/ops)

SettingValue
FrameworkVite
Root Directoryapps/ops
Build Commandcd ../.. && pnpm turbo build --filter=ops
Output Directorydist
Install Commandcd ../.. && pnpm install

Step-by-Step

Create the first project

  1. Go to vercel.com/new.
  2. Import your Git repository.
  3. Set the Root Directory to apps/web.
  4. Override the Build Command with: cd ../.. && pnpm turbo build --filter=web
  5. Add environment variables (see below).
  6. Click Deploy.

Create the second and third projects

Repeat the same steps for apps/app and apps/ops, changing the root directory and filter name.

Tip: You can import the same repository multiple times in Vercel. Each import creates a separate project.

Environment Variables

apps/web

NEXT_PUBLIC_WEB_URL            = https://yourdomain.com
NEXT_PUBLIC_APP_URL            = https://app.yourdomain.com

Note: The marketing site does NOT need Supabase or Stripe keys. It only needs to know the URLs so it can link to the dashboard.

apps/app

VITE_SUPABASE_URL              = https://xxx.supabase.co
VITE_SUPABASE_ANON_KEY         = eyJ...
VITE_WEB_URL                   = https://yourdomain.com

apps/ops

VITE_SUPABASE_URL              = https://xxx.supabase.co
VITE_SUPABASE_ANON_KEY         = eyJ...
# ⚠ WARNING: Service role keys must NEVER be prefixed with VITE_ — Vite exposes
# all VITE_ variables to the client bundle. Use a non-prefixed name so the key
# stays server-side only.
SUPABASE_SERVICE_ROLE_KEY      = eyJ...

Set these in each Vercel project under Settings > Environment Variables.

Custom Domains

Recommended domain structure:

AppDomain
apps/webyourdomain.com
apps/appapp.yourdomain.com
apps/opsadmin.yourdomain.com

Configure in Vercel

  1. Go to your project Settings > Domains.
  2. Add your custom domain.
  3. Follow the DNS instructions (add a CNAME or A record).
  4. Vercel automatically provisions an SSL certificate.

Update configuration

After setting domains, update packages/config/src/site.ts:

export const siteConfig = {
  url: "https://yourdomain.com",
  appUrl: "https://app.yourdomain.com",
  opsUrl: "https://admin.yourdomain.com",
  // ...
};

And update Supabase Edge Function secrets:

pnpm supabase secrets set SITE_URL=https://yourdomain.com
pnpm supabase secrets set APP_URL=https://app.yourdomain.com

Monorepo Detection

Vercel automatically detects pnpm workspaces. If builds fail:

  1. Ensure pnpm-workspace.yaml is at the repository root.
  2. Set the Root Directory correctly in each project.
  3. Enable Include source files outside of the Root Directory in project settings (usually auto-detected).

Build Caching

Turborepo's remote caching speeds up CI builds. To enable:

  1. Run pnpm turbo login and pnpm turbo link in your repo.
  2. Or set the TURBO_TOKEN and TURBO_TEAM environment variables in each Vercel project.

This allows Turborepo to skip rebuilding packages that haven't changed.

Deployment Triggers

By default, Vercel deploys on every push to main. Each project only rebuilds when its relevant files change (Vercel detects this via the root directory setting).

To fine-tune, add Ignored Build Step commands in each project:

# apps/web -- only deploy if web or packages changed
npx turbo-ignore web

Done reading? Mark this page as complete.

On this page