Deploy Your Express Backend in Vercel for Free 🚀⚡

Introduction

Have you ever struggled with deploying your backend application?

Don't worry anymore. You can deploy your Express app on Vercel for FREE with minimal configuration. 🎉

Yes, You read it right! It's FREE!!!

In this article, we'll explore how to deploy a Node + Express application on Vercel using the vercel.json configuration file, and the things we need to keep in mind while doing that.

So without delaying any further,

Let's START!

What is Vercel?

Vercel is a frontend cloud platform that integrates with popular frontend frameworks like Next.js, Nuxt, and SvelteKit. However, it also supports running backend code.

Some of these frontend frameworks work across both the client and the server, allowing you to have API routes or server-rendered pages.

When we talk about traditional backends, we usually think of something that's just an API or something that interacts with a database. We can also run these workloads on Vercel.

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 our backend code.
3. Node.js installed on your local machine.

Basic Project Setup

Let's start by creating a simple Node.js Express application. Run the following command:

npm init -y

Next, we'll install express in our application. For that, run the following command:

npm install express

Now, we'll create an API directory and inside /api, create a file named index.js with the following content:

const express = require("express");
const app = express();

app.get("/", (req, res) =>
  res.send("Congratulation 🎉🎉! Our Express server is Running on Vercel"),
);

app.listen(3000, () => console.log("Server ready on port 3000."));

module.exports = app;

This will be our main server file.

Next up, We'll configure the project for Vercel. For that, we'll create a vercel.json file at the root directory of our project.

{
    "version": 2,
    "rewrites": [{ "source": "/(.*)", "destination": "/api" }]
}

The vercel.json configuration file lets us configure, and override the default behavior of Vercel from within our project.

For this application we've configured vercel to Route all incoming requests to our API folder

Deploying Project on Vercel

In this section, we'll deploy our project to Vercel. For that, we'll use the Vercel CLI.

Install it with the following command:

npm i -g vercel

Next, we'll log in to Vercel to authorize the Vercel CLI to run commands on our Vercel account:

vercel login

In this example, we'll be continuing with GitHub. When logged in, we'll get the following success message:

Now we'll start our project with the local development command, which will also execute the vercel.json configuration you created above:

vercel dev

This process will also create a new Vercel Project, but don’t worry, this will not make your Express.js app publicly accessible yet.

Let's go to http://localhost:3000/ and add a query parameter name=Arindam (http://localhost:3000/?name=Arindam) and we'll get the following:

Now we are ready to make our project live. Let's run the following command:

vercel;

Now, let's go to https://arindam-express-vercel.vercel.app/ and see the results:

It's working perfectly!

With that, we have created and deployed our Node-Express application to Vercel. Now you can build more complex applications with this.

Things to Keep in Mind When Working with Vercel

Switching to Vercel’s serverless architecture? Here are a few things you need to know:

1. No Always-On Server: Unlike traditional servers, Vercel doesn’t keep a server running 24/7. This means you’ll need to rethink how your app works.
2. Websockets: Serverless functions should respond quickly and shouldn’t stay subscribed to data events. Use a client to handle data events and a serverless-friendly Realtime data provider.
3. Database Connections: Serverless functions might open many database connections under heavy traffic. Use serverless-friendly databases or connection pooling to keep things smooth.
4. Templating and View Engines: Optimize response times by using efficient view engines like React, Pug, or EJS. Set up proper caching headers to avoid re-computing responses for every request.
5. Error Handling: Express.js can swallow errors, leaving your function in a weird state. Implement strong error handling to ensure Vercel discards and resets faulty functions properly.

Hope these tips help you make the most out of Vercel!

Conclusion

If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more content on Javascript, React, and other web Development topics.

For Paid collaboration mail me at : arindammajumder2020@gmail.com

Connect with me on Twitter, LinkedIn, Youtube and GitHub.

Thank you for Reading :)