DEV Community

Cover image for Deploy Your Express Backend in Vercel for Free ๐Ÿš€โšก
Arindam Majumder
Arindam Majumder

Posted on

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. ๐ŸŽ‰

GIF

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

In this article, I'll show you 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

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


Enter fullscreen mode Exit fullscreen mode

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



npm install express


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

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" }] 
}


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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



vercel login


Enter fullscreen mode Exit fullscreen mode

Command line interface showing the login options for Vercel CLI.

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

Screenshot of a terminal window

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



vercel dev


Enter fullscreen mode Exit fullscreen mode

A command-line interface

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:

Screenshot of a browser displaying JSON output with the message:

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



vercel


Enter fullscreen mode Exit fullscreen mode

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 https://arindam-express-vercel.vercel.app/ and see the results:

A browser window displays a URL

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

Top comments (15)

Collapse
 
akshaybond30160 profile image
Akshay bondre

Wow! Didn't know I can deploy my backend for free!

Thanks for sharing!

Collapse
 
arindam_1729 profile image
Arindam Majumder

Glad you found it useful Akshay!

Collapse
 
shricodev profile image
Shrijal Acharya

Whoa, didn't know that I could deploy a backend on Vercel. ๐Ÿ‘€

Collapse
 
arindam_1729 profile image
Arindam Majumder

I had the same reaction when I explored this!

This is really cool

Collapse
 
hemath923604 profile image
Hemath

Great Share Arindam!

Collapse
 
arindam_1729 profile image
Arindam Majumder

Thanks

Collapse
 
ddebajyati profile image
Debajyati Dey

Awesome share Arindam!
๐Ÿ’ฏ๐Ÿ’ฏ
Will try this out!

Collapse
 
arindam_1729 profile image
Arindam Majumder

Thanks Debajyati! Glad you found it useful!

Collapse
 
chinmoykalita profile image
Chinmoy Kalita

It's awesome!

Collapse
 
arindam_1729 profile image
Arindam Majumder

Thanks Chinmoy!

Collapse
 
subhro profile image
Subhradip Sinha

Really appreciate your efforts, keep it up man ๐Ÿ‘

Collapse
 
martinbaun profile image
Martin Baun

Render has been super easy for me and reasonably priced, but this changes everything!

Collapse
 
fyodorio profile image
Fyodor

Taking into account "Things to Keep in Mind When Working with Vercel" part, this changes nothing. Render, even in the simplest free configuration, would still be more reasonable and stable choice for Node.js projects, unless it's a really some kind of POC which is more convenient to keep closer to other Vercel infrastructure of yours. (But IMHO it's too clunky even for that.)

Collapse
 
martinbaun profile image
Martin Baun

Hm, fair opinion.

Collapse
 
harrylever profile image
Harrylever

This is great. Thank you