Hosting

Learn how to host your website on a server and make it accessible to the public.

Choose a Hosting Provider

You can host your apps on a variety of hosting providers that supports Next.js.

Here are some popular hosting providers:

I recommend using Vercel, it's the company behind Next.js and offers a seamless deployment experience. I will be using Vercel in this guide.

Deploy to Vercel

Since we're using turborepo and have multiple apps (marketing and dashboard), we need to deploy each app separately.

We're going to deploy the marketing site under your-domain.com and the dashboard under the app subdomain, app.your-domain.com.

This gives a clean separation between the marketing site and the dashboard, and gives a professional look to your website rather than having everything under the same domain.

Make sure to have the keys and secrets ready that you got from the previous steps.

Deploy the Marketing Site

Login to Vercel

Go to the Vercel dashboard and login with your credentials.

Import the repository

On the Overview tab, click on the Add New... dropdown and select Project.

Select your repository and click Import.

Configure the Project

Enter the project name suffixed with -marketing, for example, your-project-name-marketing.

Framework preset should be Next.js.

Override the build command with the following:

cd ../.. && pnpm build --filter=marketing

The root directory should be apps/marketing.

Make sure the include source files outside of the Root Directory in the Build Step is checked.

Node.js version should be 20.x.

Environment Variables

Add the following environment variables:

  • APP_ENV - The environment of the app, set it to production.
  • NEXT_PUBLIC_APP_URL - The URL of the marketing site, set it to https://your-domain.com.
  • NEXT_PUBLIC_TINYBIRD_SRC - Analytics.
  • NEXT_PUBLIC_TINYBIRD_DATA_HOST - Analytics.
  • NEXT_PUBLIC_TINYBIRD_ANALYTICS_MARKETING_TRACKER_TOKEN - Analytics.
  • NEXT_PUBLIC_CRISP_WEBSITE_ID - Optional, if you want to enable the support chat widget.

Deploy

Click on the Deploy button to deploy the marketing site.

Setup Custom Domain

Once the deployment is complete, go to the Settings tab and click on Domains.

In the input field, enter your domain name your-domain.com and click Add.

Follow the instructions to add the necessary DNS records to your domain registrar.

Be patient, it could take a few minutes for the DNS records to propagate.

Done

Once the DNS records have propagated, your marketing site will be live at https://your-domain.com.

You will also be able to check the analytics of the website on the tinybird URL we bookmarked earlier.

Deploy the Dashboard Site

Login to Vercel

Go to the Vercel dashboard and login with your credentials.

Import your repository

On the Overview tab, click on the Add New... dropdown and select Project.

Select your repository and click Import.

Configure the Project

Enter the project name suffixed with -dashboard, for example, your-project-name-dashboard.

Framework preset should be Next.js.

Override the build command with the following:

cd ../.. && pnpm build --filter=dashboard

The root directory should be apps/dashboard.

Make sure the include source files outside of the Root Directory in the Build Step is checked.

Node.js version should be 20.x.

Environment Variables

Add the following environment variables:

  • APP_ENV - The environment of the app, set it to production.
  • NEXT_PUBLIC_APP_URL - The URL of the dashboard site, set it to https:/app.your-domain.com.
  • NEXTAUTH_URL - The URL of the dashboard site, set it to https:/app.your-domain.com.
  • NEXTAUTH_SECRET - You can generate a secret by running openssl rand -base64 32.
  • NEXT_PUBLIC_TINYBIRD_SRC - Analytics.
  • NEXT_PUBLIC_TINYBIRD_DATA_HOST - Analytics.
  • NEXT_PUBLIC_TINYBIRD_ANALYTICS_DASHBOARD_TRACKER_TOKEN - Analytics.
  • STRIPE_SECRET_KEY - Make sure you use the production secret key.
  • STRIPE_PUBLISHABLE_KEY - Make sure you use the production publishable key.
  • STRIPE_WEBHOOKS_SECRET - Make sure you use the production webhooks signing secret.
  • RESEND_KEY - The Resend API key.
  • RESEND_EMAIL_DOMAIN - Choose a professional email sending domain, for example, info@your-domain.com
  • DATABASE_URL - The production database URL. We obtained this from the previous steps.
  • GITHUB_CLIENT_ID - Optional, if you want to enable GitHub login.
  • GITHUB_CLIENT_SECRET - Optional, if you want to enable GitHub login.
  • GOOGLE_CLIENT_ID - Optional, if you want to enable Google login.
  • GOOGLE_CLIENT_SECRET - Optional, if you want to enable Google login.
  • NEXT_PUBLIC_CRISP_WEBSITE_ID - Optional, if you want to enable the support chat widget.
  • NEXT_PUBLIC_CANNY_BOARD_TOKEN - Optional, if you want to enable the feedback board.
  • CANNY_PRIVATE_KEY - Optional, if you want to enable the feedback board.

Deploy

Click on the Deploy button to deploy the dashboard site.

Setup Custom Domain

Once the deployment is complete, go to the Settings tab and click on Domains.

In the input field, enter your domain name app.your-domain.com and click Add.

Follow the instructions to add the necessary DNS records to your domain registrar.

Be patient, it could take a few minutes for the DNS records to propagate.

Done

Once the DNS records have propagated, your dashboard site will be live at https://app.your-domain.com.

You will also be able to check the analytics of the website on the tinybird URL we bookmarked earlier.

Done

Congratulations, you have successfully deployed your marketing and dashboard site to Vercel. You're all set to jump right into your business now!

When modifications are made to the database schema and these changes are merged into the main branch, GitHub Actions will automatically execute the migrations and synchronize the production database schema.

Everytime you push to the main branch, Vercel will automatically deploy the changes to the production environment.

Last updated on

Stripe For Production