How to Deploy an Express Application to Vercel ?
Last Updated :
12 Jan, 2024
Vercel is a popular cloud platform that is known for its excellent support in building and deploying scalable Frontend infrastructure. In this article, we will look into how to deploy an Express.js web Application to Vercel. We will use the Serverless computing feature of Vercel to deploy our express.js application.
Prerequisites
- Node JS & NPM installed
- An IDE (preferably VS Code)
- Vercel Account
Approach to deploy Express App to vercel
- Install the Vercel CLI and log in with your Vercel account.
- Create an express.js project and export the express app.
- Configure the vercel.json to redirect the requests to our express app.
- Deploy the application to Vercel with the Vercel CLI.
Deploying Express Application to Vercel
Step 1: Create a folder for the project and deployment
mkdir deploy_expressjs_vercel
cd deploy_expressjs_vercel
Step 2: Initialized the express application and install express
npm init -y
npm i express
Project Structure
Project structure
The updated dependencies in package.json file will look like :
"dependencies": {
"express": "^4.18.2"
}
Step 3: Create a folder structure similar to instructed and add the following files in respective directories.
JavaScript
const express = require("express");
const app = express();
app.get("/greet", (req, res) => {
const { name } = req.query;
res.send({ msg: `Welcome ${name}!` });
});
module.exports = app;
|
JavaScript
const app = require("../server.js");
module.exports = app;
|
JavaScript
{
"rewrites": [
{
"source": "/(.*)",
"destination": "/api"
}
]
}
|
HTML
<html>
<head>
<title>Welcome</title>
</head>
<body>
<h1>This is a express app deployed in vercel</h1>
</body>
</html>
|
Note:
- In Vercel, we don’t need to call the listen() of express to listen for incoming requests, everything will be internally run by Vercel serverless functions, so we just need to export our express.
- You don’t need to add the below line in the server.js to host the public files from express, vercel will take care of it.
app.use(express.static("public"))
- The vercel.json redirect every source request to “/api” serverless function where our express is actually exported.
Step 4: Install Vercel CLI & Login
npm install --global vercel
vercel login
vercel whoami
Step 5: Deploy Express App to Vercel by running the following command.
vercel
Incase you need to redeploy after making changes use the vercel command with prod flag.
vercel --prod
Output: Now run the deployed link on the browser.
final output
Share your thoughts in the comments
Please Login to comment...