Vercel
Learn how to deploy on Vercel.
We create and deploy two apps. Both will be able to link between each other. For trying things out you don't need to buy a domain or set up a subdomain.
Marketing
Connect your repository
Link your GitHub, GitLab or Bitbucket repository to Vercel.
Configure project settings
In the Vercel dashboard:
- Framework Preset: Next.js
- Root Directory: apps/marketing
- Build Command: pnpm turbo build --filter=marketing
- Output directory: Default
- Install Command: pnpm install
- Environment Variables:
NEXT_PUBLIC_DASHBOARD_URL=http://localhost:3000NEXT_PUBLIC_MARKETING_URL=http://localhost:3001Note you can copy-paste the environment file contents instead of manually adding each one.
Good to know: Make sure to fill out the environment variables even with wrong URLs. We will change the routes on a second deploy.
Critical: The following variables are required for successful build:
- NEXT_PUBLIC_DASHBOARD_URL
- NEXT_PUBLIC_MARKETING_URL
Deploy
Click "Deploy" in the Vercel dashboard. Vercel will:
- Install dependencies
- Build the project
- Deploy to the Vercel Network
Dashboard
The dashboard is a bit more difficult to deploy because we have more environment variables to set.
Connect your repository
Link your GitHub, GitLab or Bitbucket repository to Vercel.
Configure project settings
In the Vercel dashboard:
- Framework Preset: Next.js
- Root Directory: apps/dashboard
- Build Command: pnpm turbo build --filter=dashboard
- Output directory: Default
- Install Command: pnpm install
- Environment Variables:
# -------------------------- ANALYTICS --------------------------# Select an analytics provider: Console (default), Google Analytics, PostHog or Umami.# Set environment variables based on your choice.# Configuration file: packages/analytics/provider/index.ts# Provider: Google AnalyticsNEXT_PUBLIC_ANALYTICS_GA_MEASUREMENT_ID=NEXT_PUBLIC_ANALYTICS_GA_DISABLE_LOCALHOST_TRACKING=falseNEXT_PUBLIC_ANALYTICS_GA_DISABLE_PAGE_VIEWS_TRACKING=false# Provider: PostHogNEXT_PUBLIC_ANALYTICS_POSTHOG_KEY=phc_1234NEXT_PUBLIC_ANALYTICS_POSTHOG_HOST=https://us.i.posthog.com# Provider: UmamiNEXT_PUBLIC_ANALYTICS_UMAMI_HOST=https://cloud.umami.is/script.jsNEXT_PUBLIC_ANALYTICS_UMAMI_WEBSITE_ID=NEXT_PUBLIC_ANALYTICS_UMAMI_DISABLE_LOCALHOST_TRACKING=false# -------------------------- AUTH --------------------------AUTH_SECRET='G+yQTy4q+qj6VA6K76B5S8zmvpm3BvyXgJzIXhk0JMs=' # run 'npx auth secret' or 'openssl rand -base64 32' to generate a new AUTH_SECRETAUTH_GOOGLE_CLIENT_ID=AUTH_GOOGLE_CLIENT_SECRET=AUTH_MICROSOFT_ENTRA_ID_CLIENT_ID=AUTH_MICROSOFT_ENTRA_ID_CLIENT_SECRET=# -------------------------- BILLING --------------------------NEXT_PUBLIC_BILLING_STRIPE_PUBLISHABLE_KEY=BILLING_STRIPE_SECRET_KEY=BILLING_STRIPE_WEBHOOK_SECRET=BILLING_PRO_PRODUCT_ID=BILLING_PRO_PRODUCT_PRICE_ID=BILLING_UNIT=per_seat # per_seat | per_organization# -------------------------- DATABASE --------------------------DATABASE_URL=postgresql://postgres:password@localhost:5432/database# -------------------------- EMAIL --------------------------EMAIL_FROM=noreply@mailer.mydomain.comEMAIL_FEEDBACK_INBOX=feedback@mydomain.com# Select an email provider: NodeMailer (default) or Resend.# Set environment variables based on your choice.# Configuration file: packages/email/provider/index.ts# Provider: NodeMailerEMAIL_NODEMAILER_URL=smtp://myemail@gmail.com:suyz yeba qtgv xrnp@smtp.gmail.com:465# Provider: ResendEMAIL_RESEND_API_KEY=# -------------------------- MONITORING --------------------------# Select a monitoring provider: Console (default) or Sentry.# Set environment variables based on your choice.# Configuration file: packages/monitoring/provider/index.ts# Provider: SentryMONITORING_SENTRY_ORG='my-org-slug'MONITORING_SENTRY_PROJECT='my-project-name'MONITORING_SENTRY_AUTH_TOKEN='sntrys_ey....'NEXT_PUBLIC_MONITORING_SENTRY_DSN='https://123456789.ingest.de.sentry.io/123456789'SENTRY_SUPPRESS_TURBOPACK_WARNING=1 # https://github.com/getsentry/sentry-javascript/blob/develop/packages/nextjs/src/config/withSentryConfig.ts#L156# -------------------------- ROUTES --------------------------NEXT_PUBLIC_DASHBOARD_URL=http://localhost:3000NEXT_PUBLIC_MARKETING_URL=http://localhost:3001NEXT_PUBLIC_PUBLIC_API_URL=http://localhost:3002Note you can copy-paste the environment file contents instead of manually adding each one.
Good to know: Make sure to fill out the environment variables even with wrong URLs. We will change the routes on a second deploy.
Critical: The following variables are required for successful build:
- AUTH_SECRET
- NEXT_PUBLIC_BILLING_STRIPE_PUBLISHABLE_KEY
- BILLING_UNIT
- DATABASE_URL
- EMAIL_FROM
- NEXT_PUBLIC_DASHBOARD_URL
- NEXT_PUBLIC_MARKETING_URL
Deploy
Click "Deploy" in the Vercel dashboard. Vercel will:
- Install dependencies
- Build the project
- Deploy to the Vercel Network
Routes adjustment
After both applications are deployed:
- Go to the Settings > Environment Variables section for each project.
- Update the
NEXT_PUBLIC_DASHBOARD_URLandNEXT_PUBLIC_MARKETING_URLwith the actual Vercel deployment URLs. - Trigger a redeployment of both applications.
- Update the URLs in your Google or Microsoft OAuth callback settings.
Troubleshooting
Common issues and solutions:
- Build Failures: Ensure all required environment variables are set correctly.
- OAuth Errors: Double-check callback URLs in provider dashboards.
- Database Connection Issues: Verify the database URL and if the db/schema is deployed.