Deploying a Node.js Project on Vercel: A Beginner’s Guide

Deploying a Node.js project on Vercel is quick and straightforward, making it a great choice for beginners. In this guide, you'll learn two ways to deploy a Node.js server to Vercel: via the command line and directly from GitHub.

Why Vercel?

Vercel provides seamless deployment for frontend and backend applications, including Node.js servers. Some key benefits:

• Free tier available
• Automatic deployments with GitHub, GitLab, or Bitbucket
• Custom domains with HTTPS
• Serverless functions support

---

Method 1: Deploy via Command Line

Step 1: Install Vercel CLI

To get started, install the Vercel CLI globally on your machine:

npm install -g vercel

Then, log in to your Vercel account (or create one if you haven’t already):

vercel login

---

Step 2: Prepare Your Node.js Project

Ensure your project has the following structure:

my-node-app/
│-- package.json
│-- server.js (or index.js)
│-- routes/
│-- api/

Your package.json should have a start script:

"scripts": {
  "start": "node server.js"
}

Your server.js (or index.js) file should look something like this:

const express = require("express");
const app = express();
const port = process.env.PORT || 3000;

app.get("/", (req, res) => {
  res.send("Hello, Vercel!");
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

---

Step 3: Create a vercel.json File

Add a vercel.json file in your project root to configure deployment:

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

---

Step 4: Deploy to Vercel

Run the following command to deploy your project:

vercel

To redeploy with production settings:

vercel --prod

---

Method 2: Deploy via GitHub

Step 1: Push Your Project to GitHub

Ensure your Node.js project is in a GitHub repository. If you haven’t done this yet, initialize a new repository and push your code:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/your-repo.git
git push -u origin main

---

Step 2: Connect Your GitHub Repository to Vercel

1. Go to Vercel’s website and log in.
2. Click on New Project.
3. Select Import Git Repository and authorize Vercel to access your GitHub account.
4. Choose the repository you want to deploy.
5. Click Import.

---

Step 3: Configure Build Settings

Vercel will detect your project’s settings automatically. However, ensure the following configurations are correct:

• Framework Preset: Set to Other for a Node.js backend.
• Build Command: Leave blank (or use npm install if needed).
• Output Directory: Leave blank.
• Root Directory: Set to /.

Click Deploy to start the deployment process.

---

Step 4: Add a vercel.json Configuration File (Optional)

For more control over your deployment, add a vercel.json file in your project root:

{
    "installCommand": "npm install --legacy-peer-deps",
    "version": 2,
    "builds": [
      {
        "src": "index.js",
        "use": "@vercel/node"
      },
      {
        "src": "src/**/*",
        "use": "@vercel/static"
      }
    ],
    "routes": [
        { "src": "/(.*)", "dest": "/" }
    ]
}

This ensures Vercel treats your Node.js app as a serverless function.

---

Step 5: Deploy and Test

Once Vercel builds and deploys your project, you’ll receive a live URL where your app is running. Open it in a browser to check if everything is working correctly.

For automatic deployments, simply push new changes to your GitHub repository:

git add .
git commit -m "added vercel.json"
git push origin main

Vercel will detect the changes and redeploy your project automatically.

---

Conclusion

You’ve successfully deployed a Node.js project on Vercel using both the command line and GitHub! 🚀 Now, every time you push updates to GitHub or use vercel --prod, Vercel will automatically deploy your changes.

Need help? Check out Vercel’s Documentation for more details.

Let me know in the comments if you have any questions!

-> Follow for more!