Deploy Blitz.js App to Vercel
Tags: blitz, nextjs, react, fullstack
Published: 2021-08-24 08:30:11

# Hey, Developers

Welcome back to the new article on  [Blitz.js Series](https://dev.to/chapagainashik/series/14193). In this article, we'll learn to deploy our Blitz.js application to Vercel.

So, let's start.

# Build App

In this tutorial, we'll deploy the blitz.js app that we've already built. In the previous articles of blitz.js. You can read those articles from here.

- Part 1:  [https://dev.to/chapagainashik/blitz-js-the-fullstack-react-framework-2kag](https://dev.to/chapagainashik/blitz-js-the-fullstack-react-framework-2kag) 
- Part 2:  [https://dev.to/chapagainashik/blitz-js-the-fullstack-react-framework-part-2-4697](https://dev.to/chapagainashik/blitz-js-the-fullstack-react-framework-part-2-4697) 
- Part 3:  [https://dev.to/chapagainashik/blitz-js-the-fullstack-react-framework-part-3-4nk5](https://dev.to/chapagainashik/blitz-js-the-fullstack-react-framework-part-3-4nk5) 

For deploying, we have to create a production build of our Blitz app and test whether some errors occur or not. For this run the following command.

```
yarn build
``` 

If you guys are following me along, then you guys will get the following error.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629777366564/4mWdYZ3NL.png)

To get rid of this error, you can add `{/* @ts-ignore */}` just above the line where this error occurred.

```jsx
// app/pages/projects/[projectId]/tasks/index.tsx
...
        {tasks.map((task) => (
          <li key={task.id}>
            {/* @ts-ignore */}
            <CustomLink href={Routes.ShowTaskPage({ projectId, taskId: task.id })}>
              <a>{task.name}</a>
            </CustomLink>
          </li>
        ))}
...
```

Once again run `yarn build`, now, you'll get another error.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629777798297/6ILQIBduh.png)

For this, you have to add `// @ts-ignore` just above the line where this error occurred.

```jsx
// app/pages/projects/[projectId]/edit.tsx
        <ProjectForm
          submitText="Update Project"
          // TODO use a zod schema for form validation
          //  - Tip: extract mutation's schema into a shared `validations.ts` file and
          //         then import and use it here
          // schema={UpdateProject}
          initialValues={project}
          onSubmit={async (values) => {
            try {
              const updated = await updateProjectMutation({
                id: project.id,
                ...values,
              })
              // @ts-ignore
              await setQueryData(updated)
              router.push(Routes.ShowProjectPage({ projectId: updated.id }))
            } catch (error) {
              console.error(error)
              return {
                [FORM_ERROR]: error.toString(),
              }
            }
          }}
        />

```

Now, all the errors have been resolved, now you can run `yarn build`. Now, it'll work. Then you can write the command `yarn start` to serve the production build in localhost.

# Database

Since Vercel is a serverless platform, it doesn't provide a database to the user. So, we have to host our database separately. 

For this project, I'll be using the Supabase Postgres database.

To use the Supabase Postgres database, go to https://supabase.io and create your account.

Then in the Supabase Dashboard create a new organization and create a new project.

%[https://youtu.be/dBOSUER_5T4?list=TLGGNnD3VLhx5_MyNDA4MjAyMQ]

> While creating a project, select a nearby location to `Washington DC` because, by default, Vercel apps are deployed to the Washington DC server.

After your Supabase Project is ready, Go to `Settings -> Database` and copy the connection string. And add open `.env.local` and `.env.test.local` and replace DB_URL value with `Connection string`, replace [YOUR-PASSWORD] with a password, you added while creating a project.

And replace `provider = "sqlite"` with `provider = "postgres"` in `db/schema.prisma`.

```js
// .env.local

DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.ntmdsyxmousbonsypexq.supabase.co:5432/postgres"
```

```js
// db/schema.prisma

datasource db {
  provider = "postgres"
  url      = env("DATABASE_URL")
}
```
Once you have added this, now delete the migrations. `db/migrations.

And run:
```
blitz prisma migrate dev
```

With this command, we have also created tables in the database.


Now, if you go to `app.supabase.io` and click on your project and click on `Table Editor`. Now you can see that tables have been created.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629779547800/dKsb1kuGU.png)

Now, once again run `yarn build` and `yarn start` and test whether your app works fine or not.

If it is working, then let's get to another step.

# Push to GitHub

We're going to push our code to the GitHub Repo, because when deploying to Vercel, if we connect our GitHub repo, then Vercel will automatically deploy our code, whenever we push a new commit.

But before, creating a repo and pushing it, we have to make a few changes. Whenever we push a commit, blitz run tests (using husky). Since we're not working with tests in this tutorial, so, we have to tell husky not to run tests before pushing.

For that, go to `.husky/pre-push` and comment `npm run test`
```
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx tsc
npm run lint
# npm run test
```

Go to `https://github.com` and log in to your account and create a new repo.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629779776329/ufJ8l0_TDC.png)

After the repo is created follow the instructions given by `GitHub` to push our local repo to `GitHub`.
or run the following command in the root folder of your project.
```
git add .
git commit -m "Created Blitz.js app"
git branch -M main
git remote add origin [YOUR_REPO_URL]
git push -u origin main
```

Now, our code is on GitHub.

GitHub Link: https://github.com/projectashik/blitzjs-projectmanagement

# Deploy to Vercel

I am assuming that you already have a Vercel account.

To deploy to Vercel, go to https://vercel.com and click on `New project`.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629792372718/U--mKUBbq.png)

Click import in your recently pushed Repo. (You might have to connect your Github account first)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629792659889/uDhXNNgAK.png)

If you guys have a team or want to create a team, you can do so, for now, I'll skip.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629792766376/3N0hYFQ2m.png)

Then in the `Configure Project` section, give a name for your project.

And add `DATABASE_URL` and set the `SESSION_SECRET_KEY` variable to a random string of 32 characters in `Environment Variables.

> Protip: You can create random 32 characters string by the following command: 
```
node -e "console.log(crypto.randomBytes(32).toString('hex'))"
```


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629793037859/zcSHTdPM0.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629793088963/QITqSM3Ty.png)

Then click on deploy.

Now it'll deploy our application.
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629793156375/FgNfz7FwD.png)

Now, our application is live:
https://blitzjs-projectmanagement.vercel.app/

This is much for these guys, Hope you like this article. Please, comment down your feedback for my work, and also if you faced any problem, comment down.