Deploy Your Express Backend in Vercel for Free 🚀⚡

Deploy Your Express Backend in Vercel for Free 🚀⚡

Effortlessly Host Your Node.js Express App on 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. 🎉

GIF

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 logo with the text "Develop. Preview. Ship." on a black background.

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

Command line interface showing the login options for Vercel CLI. Options include logging in with GitHub, GitLab, Bitbucket, Email, or SAML Single Sign-On. There is also a Cancel option.

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

Screenshot of a terminal window showing the process of logging into Vercel via the command "vercel login". The terminal displays "Vercel CLI 34.3.0" and confirms successful authentication with GitHub for a user, providing instructions to run  to deploy projects, and suggests connecting Git repositories to deploy branch push automatically.

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

vercel dev

A command-line interface displaying the process of setting up and developing a project using Vercel. It includes steps such as specifying the project directory, choosing whether to link to an existing project, and configuring default project settings. The project is successfully linked and available at http://localhost:3000.

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 localhost:3000 and add a query parameter name=Arindam (localhost:3000/?name=Arindam) and we'll get the following:

Screenshot of a browser displaying JSON output with the message: "Hello Arindam!" The browser URL indicates localhost:3000 with a query parameter name=Arindam.

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

vercel

Command line interface showing Vercel CLI 34.3.0. It displays inspection and production URLs for a project along with messages about deployment and changing domain or build command settings.

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

A browser window displays a URL "arindam-express-vercel.vercel.app/?name=Messi" and the page shows a JSON response: { "message": "Hello Messi!" } with pretty-print formatting enabled.

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 :)

"Thank You :) - Text on a dark blue and purple gradient background."

Did you find this article valuable?

Support Arindam Majumder by becoming a sponsor. Any amount is appreciated!

Â