ScaffoldHub
  • Introduction
  • Modeling
  • Setup
    • NextJS
    • File Storage
    • Payments with Stripe
  • Debugging
  • End-to-end and Unit Tests
  • Deployment
    • Deploy to Vercel
  • Features
    • Projects
    • Preview
    • Tenants
    • Subscriptions and Payments
    • Security
    • File Storage
    • Authentication
      • Sign-in and Sign-up and Social Sign-in
      • Invitation
      • Password Reset
      • Password Change
      • Email Verification
    • Entity
      • Form
      • Filter and List
      • Export
      • Import
    • Audit Logs
    • Internationalization (I18n)
    • API Keys
    • API Documentation
  • Package.json
  • Support
  • Changelog
    • Documentation
    • Scaffolds
  • Custom Development
  • Legacy Scaffolds
  • Go to ScaffoldHub
Powered by GitBook
On this page
  • Getting started
  • PosgreSQL Database
  • GitHub Respotiory
  • Vercel
  • GitHub Secrets
  • Done!
  1. Deployment

Deploy to Vercel

This tutorial will show how to deploy your project to Vercel, using GitHub Actions.

PreviousDeploymentNextFeatures

Last updated 1 year ago

Getting started

If you haven't, follow guide first. You'll need the database migrations ready in your repository.

PosgreSQL Database

Before you start, you need to have a PostgreSQL database running on the cloud.

I recommend to start since it's free, but feel free to use any other database provider.

If your database has a pooler , it's recommended to use it in the DATABASE_URL.

It's essential to add the ?pgbouncer=true at the end, to let Prisma know that it's using a pooler.

Here is an example:

DATABASE_URL="postgres://appuser.secret:secret@aws-0-us-east-1.pooler.supabase.com:6543/postgres?pgbouncer=true"
DATABASE_MIGRATION_URL="postgresql://postgres:secret@db.secret.supabase.co:5432/postgres?schema=public"
DATABASE_NAME="postgres"
DATABASE_APP_PASSWORD="secret"
DATABASE_APP_USER="appuser"
DATABASE_SCHEMA="public"

GitHub Respotiory

Relate the downloaded codebase to this repository.

Vercel

Choose to import the project you just created on GitHub.

On Framework Preset, select NextJS.js if it's not by default.

The subsequent deployments will be via GitHub Actions because it allows us to run unit tests and deploy migrations before deploying the application.

  1. Inside your folder, run vercel link to create a new Vercel project

  2. Inside the generated .vercel folder, save the projectId and orgId from the project.json

GitHub Secrets

Go back go GitHub and then go to Settings > Secrets and Variables > Actions and create a few New Repository Secrets.

  • VERCEL_ORG_ID - This is the Vercel Organization ID that you just got.

  • VERCEL_PROJECT_ID - This is the Vercel Project ID that you just got.

  • VERCEL_TOKEN - The Vercel token you just got.

  • DATABASE_URL - This should be the connection URL the application will use to connect to the database via bouncer. In our example it would be: postgres://appuser.secret:secret@aws-0-us-east-1.pooler.supabase.com:6543/postgres?pgbouncer=true"

  • DATABASE_MIGRATION_URL - This is the connection URL GitHub will use to connect to the database to run the migrations. In our example, this would be: postgresql://postgres:secret@db.secret.supabase.co:5432/postgres?schema=public.

  • DATABASE_NAME

  • DATABASE_SCHEMA

  • DATABASE_APP_PASSWORD - This is the password for the application user. The migration scripts create the application user, so that's why the password is required.

Done!

After you push the latest code to the repo, the tests and deployment will be triggered.

Go to and create a new repository. Make sure the repository is private.

Go to and create a new project.

On Environment Variables, add the Environment Variables following the guide.

Retrieve your

Install the and run vercel login

Inside GitHub, add VERCEL_TOKEN, VERCEL_ORG_ID, and VERCEL_PROJECT_ID as .

Setup > NextJS
https://supabase.com/
https://supabase.com/docs/guides/database/connecting-to-postgres#connection-pooler
https://github.com/
https://vercel.com/
Setup > NextJS
Vercel Access Token
Vercel CLI
secrets