This is an example project that shows how you can create a branch for every preview deployment on Vercel.
There are two workflows in this project:
deploy-preview.yml- this is triggered when a Pull request is opened or when new commits are pushed to the branch. It creates a Neon branch and creates a preview deployment for every commit. The workflow also runs Prisma Migrate after creating the branch to apply any pending migrations.deploy-production.yml- this is triggered when you push commits to the main branch (so after merging a pull request). It applies any pending migrations and then deploys the app to production. It also deletes the Neon branch that was created for the preview deployment.
For the workflows to work, you need to add the following secrets to your GitHub repository:
VERCEL_TOKENNEON_API_KEY- this is the API key for the Neon user that will be used to create the branches. You can find it in the account settings.NEON_PROJECT_ID- this is the ID of the Neon project. You can find it in the project settings on Neon.NEON_MAIN_BRANCH_NAME- this is the name of your primary branch on Neon and what you use for production. By default, it'smainPG_DATABSE- this is the name of the database on Neon. By default, it's name isneondbPG_USERNAME- username of the database role
If you're unfamiliar with how to add secrets to a GitHub repository, you can read more about in GitHub's documentation.
Since we're creating preview deployments using GitHub actions, it's a good idea to disable the build step on Vercel.
If you want to use this project as a playground, you can you can set it up locally.
- Clone this repo
git clone- Install dependencies
npm install- Copy the
.env.examplefile to.env:
cp .env.example .env- Add the database credentials:
DATABASE_URL = "" # the pooled connection to the database. It has a `-pooler` suffix
DIRECT_DATABASE_URL = "" # the direct connection string to the database- Run the setup script which creates the tables and runs a seed script:
npm run setup-
Deploy the project to Vercel
-
Open a pull request and see the preview deployment in action
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent