DEV Community

Cover image for Deploy Blitz.js App to Vercel
Ashik Chapagain
Ashik Chapagain

Posted on • Originally published at cb-ashik.hashnode.dev

Deploy Blitz.js App to Vercel

Hey, Developers

Welcome back to the new article on Blitz.js Series. 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.

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
Enter fullscreen mode Exit fullscreen mode

If you guys are following me along, then you guys will get the following error.
image.png

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

// 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>
        ))}
...
Enter fullscreen mode Exit fullscreen mode

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

image.png

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

// 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(),
              }
            }
          }}
        />

Enter fullscreen mode Exit fullscreen mode

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.

// .env.local

DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.ntmdsyxmousbonsypexq.supabase.co:5432/postgres"
Enter fullscreen mode Exit fullscreen mode
// db/schema.prisma

datasource db {
  provider = "postgres"
  url      = env("DATABASE_URL")
}
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

image.png

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

image.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'))"
Enter fullscreen mode Exit fullscreen mode

image.png

image.png

Then click on deploy.

Now it'll deploy our application.
image.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.

Discussion (0)