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)
| Setting | Value |
|---|---|
| Framework | Next.js |
| Root Directory | apps/web |
| Build Command | cd ../.. && pnpm turbo build --filter=web |
| Output Directory | .next |
| Install Command | cd ../.. && pnpm install |
2. User Dashboard (apps/app)
| Setting | Value |
|---|---|
| Framework | Vite |
| Root Directory | apps/app |
| Build Command | cd ../.. && pnpm turbo build --filter=app |
| Output Directory | dist |
| Install Command | cd ../.. && pnpm install |
3. Admin Panel (apps/ops)
| Setting | Value |
|---|---|
| Framework | Vite |
| Root Directory | apps/ops |
| Build Command | cd ../.. && pnpm turbo build --filter=ops |
| Output Directory | dist |
| Install Command | cd ../.. && pnpm install |
Step-by-Step
Create the first project
- Go to vercel.com/new.
- Import your Git repository.
- Set the Root Directory to
apps/web. - Override the Build Command with:
cd ../.. && pnpm turbo build --filter=web - Add environment variables (see below).
- 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.comNote: 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.comapps/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:
| App | Domain |
|---|---|
apps/web | yourdomain.com |
apps/app | app.yourdomain.com |
apps/ops | admin.yourdomain.com |
Configure in Vercel
- Go to your project Settings > Domains.
- Add your custom domain.
- Follow the DNS instructions (add a CNAME or A record).
- 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.comMonorepo Detection
Vercel automatically detects pnpm workspaces. If builds fail:
- Ensure
pnpm-workspace.yamlis at the repository root. - Set the Root Directory correctly in each project.
- 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:
- Run
pnpm turbo loginandpnpm turbo linkin your repo. - Or set the
TURBO_TOKENandTURBO_TEAMenvironment 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 webDone reading? Mark this page as complete.