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.
- Part 1: 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
- Part 3: 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.
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>
))}
...
Once again run yarn build
, now, you'll get another error.
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(),
}
}
}}
/>
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"
// 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.
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.
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
.
Click import in your recently pushed Repo. (You might have to connect your Github account first)
If you guys have a team or want to create a team, you can do so, for now, I'll skip.
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'))"
Then click on deploy.
Now it'll deploy our application.
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.
Top comments (0)