Setup vercel with supabase for our project
Tags: tutorial, vercel, supabase, javascript
Published: 2022-09-11 07:44:41

Now that we're done with our supabase setup let's work on our frontend environment for our application.

## Github Setup
Before we setup vercel, we're going to setup our code repository first, I'll be using github to upload the repository. Let's quickly make our repo, since we'll be working with Nextjs I'll be creating a Nextjs app using
```bash
npx create-next-app taskboard
```
If you like to work with typescript you can pass the ts flag in the command, your command should look like this

```bash
npx create-next-app --ts taskboard
```
*NOTE: I'll be using javascript throughout the tutorial, this series will have add an extra part where I'll be porting the app to typescript.*

Now let's make our github repository and push the code in our local machine to the repo.

I'll be creating different releases, so you can go through the different version and check what the code looked like in each of them.

You can find the link for my repo [here](https://github.com/TanishqSingla/supanext-taskboard).

## Vercel Setup
For hosting our project on vercel we will need the code repository first.

This is how my project configuration looks like in vercel.
![Image showing vercel page with project details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sikh4nxunv0b3ad27l2s.png)

HIT DEPLOY!

you can find the link for the application [here](https://supanext-taskboard.vercel.app/)

## Integrating Supabase
We've successfully created our Nextjs app and it is deployed, now vercel, the last step that is remaining is integrating our project with supabase. 
Click on setting tab of your project and then click integrations

You can refer this [doc](https://supabase.com/docs/guides/integrations/vercel) created by supabase or follow the steps below.

![Vercel project page with arrows pointing to settings tab and integration button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csucn18a53xq5vr2ja9k.png)

Now click on `Browse Marketplace` and search for `supabase`.

![Vercel integration page with arrow pointing to browse marketplace button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3v6meoleoxv2g6ixwyu.png)


![Vercel integration marketplace with supabase searched](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnbx88m6bf2txxyzkxjz.png)


![Vercel supabase integration page with arrow pointing to add integration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55nu9mrmfwwykhs8yay8.png)

When you'll click `add integration` vercel will ask for the vercel account you want to add integration to, select your account and hit continue.

![Vercel supabase integration modal asking to input the scope](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ucke0pu40p7nnmknucv.png)


![Vercel supabase integration configuration page with modal asking to input project name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6c0aulvz54hthv8i9w4.png)

Hit continue and then add integration

![Modal asking to input supabase and vercel project name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mz93xtnwif44kppsbce.png)

Now when you'll click on your project setting and check environment variables section you'll see supabase environment variables already added
![Vercel Project settings environment variables tag showing supabase environment variables already added](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5swfvqo2so4bcvde9tsh.png)