Vercel

To deploy Achromatic on Vercel, you need to create 2 new projects for the dashboard and marketing apps. After selecting your repository, change the Root Directory option to the app of choice e.g. apps/dashboard. This should automatically detect the Next.js setup and as such, the build command and output directory.

Dashboard

Connect your repository

Link your GitHub, GitLab or Bitbucket repository to Vercel.

Configure project settings

In the Vercel dashboard:

• Set Framework Preset to Next.js
• Configure Root Directory if needed
• Set Node.js version to 20.x or higher
• Select apps/dashboard

Environment variables

Add necessary environment variables in Vercel project settings:

• Auth provider client id/secret
• Billing keys
• Database connection strings

To build the project we need the routes

NEXT_PUBLIC_DASHBOARD_URL=
NEXT_PUBLIC_MARKETING_URL=

to be set, even if we don't know the marketing URL yet. We will modify them again in the last section.

Deploy

Click "Deploy" in the Vercel dashboard. Vercel will:

• Install dependencies
• Build the project
• Run database migrations (if configured)
• Deploy to the Vercel Network

Marketing

Connect your repository

Link your GitHub, GitLab or Bitbucket repository to Vercel.

Configure project settings

In the Vercel dashboard:

• Set Framework Preset to Next.js
• Configure Root Directory if needed
• Set Node.js version to 20.x or higher
• Select apps/marketing

Environment Variables

To build the project we need the routes

NEXT_PUBLIC_DASHBOARD_URL=
NEXT_PUBLIC_MARKETING_URL=

to be set. We will modify them again in the last section.

Deploy

Click "Deploy" in the Vercel dashboard. Vercel will:

• Install dependencies
• Build the project
• Run database migrations (if configured)
• Deploy to the Vercel Network

Domain

Marketing project

• Go to the Settings of the marketing project in the Vercel dashboard.
• Under the Domains section, add mydomain.com.

Dashboard project

• Go to the Settings of the dashboard project in Vercel.
• Under the Domains section, add dashboard.mydomain.com.

Configure DNS

For example if you bought your domain on Namecheap (can be anywhere).

• Log in to your Namecheap account.
• Navigate to Domain List and click Manage for example.com.
• Set the Nameservers to Custom DNS and add

ns1.vercel-dns.com
ns2.vercel-dns.com

• Save the changes.

Environment variables

For both projects go into the the environment settings, add/modify

NEXT_PUBLIC_MARKETING_URL=mydomain.com
NEXT_PUBLIC_DASHBOARD_URL=dashboard.mydomain.com

and deploy again.

OAuth callbacks

Make sure you have the correct settings in your Google or Microsoft callback settings (in Google Cloud and Microsoft Azure).