How to Deploy Your Node.js Backend Project to Vercel: A Step-by-Step Guide

by Chiboy

.

Updated Thu Sep 05 2024

How to Deploy Your Node.js Backend Project to Vercel: A Step-by-Step Guide

In this tutorial, you will learn how to deploy or host your backend project using Vercel serverless function via GitHub.

Before we dive deep into building and configuration, let’s understand the concept of serverless function in Vercel.

This block of code runs in a serverless computing environment provided by Vercel. It allows developers to write and deploy code without worrying about managing or provisioning servers.

With serverless functions, you can dynamically execute specific tasks or respond to requests, scaling automatically based on the incoming traffic.

This approach lets developers focus solely on writing the code logic while the serverless platform handles the infrastructure and scaling aspects.

Now that you understand what serverless function is let's begin.

PREREQUISITE
i. Create or have a GitHub account for free
ii. Create or have a Vercel account for free
iii. Have a Nodejs project

Let's assume you don’t have a Nodejs project already.

  1. So, let's create a simple Nodejs project so you can see the workflow.
    Open your terminal or git bash and put the command below

mkdir vercel-app
cd vercel-app

Our project has been created with name vercel-app

2. Now, let's initialize Node.js in the project. At the root of the project. You can just run the command below in the terminal.

npm init -y

You now have Node.js in your project.

3. Next, we need to install the required dependencies, but for this project, it will be just Expressjs, so run the below command in the root of your folder

npm install express

4. Create a new file index.js. This is going to be the entry point of our application. Then copy and paste the code inside.

// index.js
const express = require('express')
const app = express()
const PORT = 4000


app.get('/home', (req, res) => {
  res.status(200).json('Welcome, your app is working well');
})


app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

// Export the Express API
module.exports = app

NOTE: Remember to create .gitignore file, So you can Ignore the node_modules before pushing it to Github

5. Next, we need to create avercel.json file in the root of our directory. This file is responsible for configuring Vercel in our application. Could you add the code below to the file?

{
  "version": 2,
  "builds": [
    {
      "src": "index.js", 
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "index.js"
    }
  ]
}

The above configuration specifies the version of the Vercel configuration file format being used. In this case, it is version 2.
The build array specifies the build settings for this project which takes the index.js as the entry point of this application.
This configuration file tells Vercel how to build and serve the Node.js application.

5. If you can do this, you are set and ready to go live. So, next, you need to push your project to the remote repository on Git Hub. Vercel will listen to the main branch after every push made to the repository to update your deployment.

6. So, if your project is now in the remote repository on Github, next, you need to go to your Vercel dashboard to add a new project from Github, which is the repository of the project you want to deploy.

1_PtYSlzfINKernlNVWe8PVQ.webp

7. Next, you will need to import the Github repository

1_E4XFSCD0qvoZJMJFTo-uMA.webp

8. After importing your project, you can now configure your project. In most cases nothing needs to be done here except for you’re importing the environment variables. So click Deploy.

1*y1e6EKPTSFpqfiwb9Un9lg.png

9. That concludes the process! Your application is now live and running successfully.

1*Rx3dXhauSqbor_z1_CsytQ.png

1*bIqArrZNVWKaSFjYg8sHMw.png

You can enjoy the benefits of having your backend Node.js app deployed on Vercel.

Summary

It is important to know that you might encounter errors when deploying your application to production(Vercel), especially if it’s a large project. Therefore it’s good to do proper research on your dependencies/packages, knowing which dependencies/packagies are not supported in production. Additionally, you should always look at the build logs to know where the problem might come from. By taking these precautions, you can proactively address any problems and ensure a smoother deployment process.

Happy Coding!

Whenever you're ready

There are 4 ways we can help you become a great backend engineer:

The MB Platform

Join 1000+ backend engineers learning backend engineering. Build real-world backend projects, learn from expert-vetted courses and roadmaps, track your learnings and set schedules, and solve backend engineering tasks, exercises, and challenges.

The MB Academy

The “MB Academy” is a 6-month intensive Advanced Backend Engineering BootCamp to produce great backend engineers.

Join Backend Weekly

If you like post like this, you will absolutely enjoy our exclusive weekly newsletter, Sharing exclusive backend engineering resources to help you become a great Backend Engineer.

Get Backend Jobs

Find over 2,000+ Tailored International Remote Backend Jobs or Reach 50,000+ backend engineers on the #1 Backend Engineering Job Board

Topic:

Backend Tips, Every week

Backend Tips, Every week