Skip to content

April 3, 2021

How to Host Express App on Vercel

Effortlessly deploy your Express app to the cloud with Vercel! Learn how to set up and host your Node.js application in just a few simple steps.

Open GitHub repository

Disclaimer: Vercel configuration file uses legacy builds and routes properties.

Last week I needed to host a simple Express app somewhere, and I decided to host it on Vercel because of the excellent Developer Experience.

Here are the steps that I needed to do to make it possible:

First, we need to create a project directory. I decided to name it vercel-express and then change the directory to a newly-created directory.

Terminal
# create a directorymkdir vercel-express
# change directorycd vercel-express

Then we will initialize git and add the node_modules directory to .gitignore.

Terminal
# initialize gitgit init
# add the `node_modules` directory to `.gitignore`echo node_modules >> .gitignore

Next, we need to set up a new package. We are using the -y flag to skip the questionnaire.

Terminal
npm init -y

Then we will create an index.js file and populate it.

Terminal
# create a new `index.js` filetouch index.js
index.js
// ./index.jsconst express = require('express')
const app = express()const port = 3000
app.get('/', (req, res) => {  res.send('Hello, Vercel!')})
app.listen(port, () => {  console.log(`Express app hosted on Vercel listening at port ${port}`)})

To run an express app, we need to create a custom vercel.json config file.

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

After populating the index.js and vercel.json files, we can stage all of the files and commit them.

Terminal
git add -A && git commit -m "Initial commit"

If you want to change the name for the main branch from master to main, simply run the git branch -m master main command.

For pushing code to the existing repository, follow the following code.

Terminal
git remote add origin https://github.com/LukasPolak/vercel-express.gitgit branch -M maingit push -u origin main

The Vercel config file includes legacy properties, but it works like a charm when writing this. Maybe in the future, I will update the tutorial with the recommended properties.