DEV Community

Cover image for Deploy Your Express Backend in Vercel for Free πŸš€βš‘
Arindam Majumder
Arindam Majumder Subscriber

Posted on

81 13 12 11 13

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

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (16)

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
 
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
 
subhro profile image
Subhradip Sinha β€’

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

Collapse
 
harrylever profile image
Harrylever β€’

This is great. Thank you

Collapse
 
christopher_henry_4dd51f1 profile image
Christopher Henry β€’

Great article! I have used Vercel for my static websites from some time but never realized when they added backend features to their existing frontend application.

Postgres on Neon - Get the Free Plan

No credit card required. The database you love, on a serverless platform designed to help you build faster.

Get Postgres on Neon

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay