How to create and deploy an Express.js app to Vercel?
Vercel is a platform to host frontend applications and static sites but you can also host an express app using serverless functions.
In this tutorial, you will see how you can create an express app from scratch and deploy it to vercel.
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 apackage.json
file with default configuration. -
Run
git init
to initialize agit
repository. -
Create a
.gitignore
file and writenode_modules/
in it. -
Install the express package using npm or yarn.
npm i express
-
Create an
index.js
file in the root folder. -
Inside the
index.js
file, add the following code in order to create an express app.
const express = require('express');
const app = express();
app.listen(process.env.PORT || 3000);
- Create a
public
folder and create anindex.html
file inside it.
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Express.js on Vercel</title>
</head>
<body>
<h1>Express App Responded</h1>
</body>
</html>
Now, we have to send this file as a response when someone sends a GET
request to our app.
In order to do so, we have to tell our express app that static
files are present inside the public
folder. We can do this by adding the following to the index.js
file.
app.use(express.static('public'))
Note that the above line is a middleware, so add this line above all your request handlers.
- Now, we will create a
GET
request handler and send thehtml
file as a response.
//index.js
app.get('/', (req, res) => {
res.sendFile('index.html', {root: path.join(__dirname, 'public')});
})
The second argument of res.sendFile()
specifies the absolute path of where the file is.
- Export the
app
for it to be run as a serverless function.
// index.js
module.exports = app
- Add a
start
script topackage.json
file in order to run the application locally.
"start": "node index.js"
-
Run the application using the command
npm start
The application should be live athttp://localhost:3000
. -
You should get an output similar to the following:
-
You just created your Express App 🎉
Deploying to Vercel #
-
Create a
vercel.json
file in the root folder of your application. This is a configuration file for Vercel. -
Add the following to your
vercel.json
file:
{
"builds": [
{
"src": "index.js",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "index.js"
}
]
}
You are now ready to deploy your app to Vercel!
-
Create a
git
repository on GitHub and add your code to it. -
Create a new project on Vercel and import the
git
repository that you just made. -
Deploy the application.
-
Your application should now be live! 🎉
Here's the live demo of the application. You can also find the source code on my express-to-vercel github repository!