How to Deploy Your Backend on Vercel Using `vercel.json`: A Step-by-Step Guide

Deploying a backend server can often be a complex process, but with Vercel, it becomes straightforward and efficient. Vercel, a popular platform for frontend and backend deployment, allows developers to easily deploy their applications with minimal configuration. In this blog, we will walk you through the steps to deploy a backend server on Vercel using the vercel.json configuration file, ensuring your application is live and accessible in no time.

Introduction to Vercel

Vercel is a cloud platform designed to host static sites, serverless functions, and full-stack applications. It offers seamless integration with GitHub, GitLab, and Bitbucket, allowing you to deploy your projects directly from your repository. With Vercel, you can benefit from automatic scaling, fast global CDN, and zero configuration deployments, making it an ideal choice for modern web applications.

Prerequisites

Before we start, ensure you have the following:

1. A Vercel account. You can sign up at Vercel.
2. A GitHub, GitLab, or Bitbucket account with a repository containing your backend code.
3. Node.js installed on your local machine.

Step-by-Step Guide to Deploying Your Backend on Vercel

Step 1: Prepare Your Backend

Ensure your backend is ready for deployment. If you're using Node.js, your project should have a package.json file with the necessary dependencies and scripts.

Example package.json:

{
  "name": "my-backend",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

Step 2: Create vercel.json Configuration File

The vercel.json file allows you to specify configuration for your deployment. Create a vercel.json file in the root directory of your project with the following content:

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

Step 3: Organize Your Backend Code

Ensure your backend code is properly structured. For this example, we'll place serverless functions in the api directory.

my-backend/
  ├── api/
  │   └── hello.js
  ├── index.js
  ├── package.json
  └── vercel.json

Example api/hello.js:

module.exports = (req, res) => {

  res.status(200).json({ message: "Hello from the backend!" });

};

Step 4: Push Code to GitHub

Commit your code to a GitHub repository. You can do this by initializing a git repository in your project folder, adding your files, and pushing them to GitHub.

git init

git add .

git commit -m "Initial commit"

git branch -M main

git remote add origin <your-repo-url>

git push -u origin main

Step 5: Go to Vercel Dashboard

Navigate to the Vercel Dashboard and log in with your account.

Step 6: Add New Project and Import Repository

In the Vercel dashboard, click on "New Project" and select the option to import a project from your Git repository (GitHub, GitLab, or Bitbucket).

Step 7: Select the Backend Directory

During the setup process, ensure you select the root directory of your backend project (where your vercel.json file is located).

Step 8: Deploy the Project

Click "Deploy" to start the deployment process. Vercel will build and deploy your project based on the configuration specified in your vercel.json file.

Step 9: Access Your Deployed Backend

After deployment, Vercel will provide you with a URL where your backend is hosted. You can access your API endpoints by appending the API path to this URL.

For example, if your project URL is https://my-backend.vercel.app, you can access the hello endpoint at https://my-backend.vercel.app/api/hello.

Conclusion

Deploying a backend on Vercel using the vercel.json configuration file is a streamlined process that allows developers to focus on writing code rather than managing infrastructure. With Vercel’s powerful features, you can deploy and scale your backend effortlessly. Whether you’re working on a small project or a large-scale application, Vercel provides the tools and services to ensure your backend is robust and responsive.

Start deploying your backend on Vercel today and experience the benefits of modern deployment practices!

Comments

[Lemon Confidence]

Hey, man.. your explanation is really straightforward.
However, I have a Vite-React app and an express server to deploy.

Would the process still be same?
Ps- It's my first time working with expressJs

This is how my current vercel.json file is looking like

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

As at the time I'm sending in this, am currently sieving through the net to find an answer as there's just too much confusing answers these days :(

This however is as a result of the answers am just copy-pasting :(

[Vishal Yadav]

I think ,it should work!

[Himanshu Wadhwa]

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

is this okay in below directory