Deploy Express App To Vercel For FREE

Published 9 October 2023 by Jarvis Silva

Looking to host your express app on Vercel but don't know how then this article is for you, In this tutorial I will show you how to deploy express app to Vercel hosting for FREE so read till the end.

Vercel is a popular web hosting platform which allows developers to easily host their websites, they have a hobby plan on which you can host your websites completely for free.

Express.js is a minimal framework used in node js to create servers and api's.

Vercel is mostly used for hosting websites made using next js, react or other frontend frameworks but now you can also host express app on Vercel using their serverless functions so let's see how to do it step by step.

1. Preparing Express App For Vercel Deployment

I assume you have your node express app created, Now you just need to make some small changes to your express project to make it deployable on Vercel.

• First you need to export your app from your main server file like below

import express from "express";

const app = express();
const port = 3000; // You can change this to any port you prefer

app.get("/", (req, res) => {
  res.send("Hello, World! This is your Express API demo.");
});

app.listen(port, () => {
  console.log("Server is running");
});

//////////// Export app defaultly ///////////////////////////
export default app;

• Now Create a vercel.json file in your project root directory and add the below code

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

• In the builds src and routes dest you need to give your main server file name where you have created your express app for me it is index.js for some it can be server.js or app.js.

2. Upload Express App To Github

Now you need to push your express project to Github beacause vercel will directly import your project from Github to upload to Github follow below steps:

• Go to your Github and login to your account, create a new repository with your app name then it will show you commands to push your project to Github.
• Open a terminal in your project folder and run all the commands shown on the Github page, looking like below

This will upload your project to Github now let's deploy it on Vercel.

3. Deploying Express App On Vercel

Before proceeding I hope you have a account with Vercel with Github linked if not then create a account at Vercel and link your Github, you can start for free using their hobby plan and also I will be hosting this express app on vercel's hobby plan so let's see how to do it.

• Go to Vercel dashboard and click on add new project.
• Now it will show you your Github repositories so click on import of your express app repository.
• Next it will ask you to enter your project name and also there will be other settings don't change anything keep it default like below and hit deploy.

Now it will start building your express app and after building it will show you configurations your app is deployed with url to preview your express app, you can also connect a custom domain to your website.

Also read: Hostinger Vs Vercel Which Should You Use?

Summary

So we have seen it is possible to host express app on Vercel but there are some limitations you should know you can find about it here: Vercel Limitations.

The purpose of this article was to show you how to deploy express app or api to Vercel platform and it is complete. I hope you found this tutorial helpful and useful. Thank you for reading, Have a nice day 😊