Deploy an Express.js App to Vercel — A Step By Step Guide

Murtuzaali Surti
Murtuzaali Surti

• 3 min read

Updated

Vercel is a platform to host frontend applications and static sites but you can also host an Express application using serverless functions.

You can also use Vercel Postgres which allows you to integrate hosted serverless PostgreSQL database such as neon.tech (Neon got acquired by Databricks) accessible by serverless functions.

In this tutorial, I will show you how to create an Express app from scratch and deploy it to vercel.

This article has been updated with latest vercel configurations.

Prerequisites #

Node.js should be installed on your system. To check if it is, run node -v in your terminal and you should get a node version as an output.

Creating an Express App #

  • Run npm init -y to create a package.json file with default configuration.

  • Run git init to initialize a git repository.

  • Create a .gitignore file and write the folder name node_modules in it. You can add as many files and folders you prefer to be ignored by git.

  • Install the express package using npm or yarn.

npm i express
  • Create an api folder (in the root folder) and add index.js file in it. Adding an "api" folder is necessary because Vercel treats all index.js files in that folder as serverless functions. So, for example, if you create api/test/index.js, when you hit <BASE_URL>/test it will execute the code inside api/test/index.js as a serverless function. It is crucial for deploying the express app to Vercel.

  • Update package.json file to explicitly set the entry file.

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "api/index.js", 
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.21.2"
  }
}
  • Inside the api/index.js file, add the following code in order to create an express app.
// cjs
const express = require('express');
const app = express();

app.listen(process.env.PORT || 3000);
  • Now, add a GET request handler and send a response.
// api/index.js
app.get('/', (req, res) => {
    res.send("Express App Responded");
})
  • Export the app for it to be run as a serverless function.
// api/index.js
module.exports = app
  • Add a start script to package.json file in order to run the application locally.
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "api/index.js",
  "scripts": {
    "script": "node api/index.js", 
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.21.2"
  }
}
  • Run the application using the command npm start The application should be live at http://localhost:3000.

You should get an output similar to the following:

output

Yayy! You just created an Express.js Application. 🎉

Deploying to Vercel #

  1. Create a vercel.json file in the root folder of your application. This is a configuration file for Vercel.

  2. Add the following to your vercel.json file, so that every request is routed to /api endpoint because that where the express app as a serverless function lives.

{
  "rewrites": [
    {
     "source": "/(.*)",
      "destination": "/api"
    }
  ]
}
  1. Create a git repository on GitHub and add your code to it.

  2. Create a new project on Vercel and import the git repository that you just made.


import repo in vercel

  1. Go to the project Settings > Build and Deployment > Framework Settings and override the default output directory with the root directory .. The reason of doing so is to tell Vercel to look for production ready files here. If you intend to use typescript, then the output directory will be the directory in which your compiled files are stored.
modifying output directory of a project in vercel
  1. Deploy the application.

  2. Your application should now be live! 🎉


deployment

Here's the live demo of the application. You can also find the source code on my express-to-vercel github repository!


Optional Chaining in JavaScript

Previous

5 Most Useful Visual Studio Code Extensions

Next