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, we will see how we can create an express app from scratch and deploy it to vercel.
Prerequisites
Node.js should be installed on your system.
Creating an Express App
Run
npm init -yto create apackage.jsonfile with default configuration.Run
git initto initialize agitrepository.Create a
.gitignorefile and writenode_modules/in it.Install the express package using npm or yarn.
npm i express
Create an
index.jsfile in the root folder.Inside the
index.jsfile add the following to create an express app.
const express = require('express');
const app = express();
app.listen(process.env.PORT || 3000);
- Create a
publicfolder and create anindex.htmlfile 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
GETrequest handler and send thehtmlfile 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
appfor it to be run as a serverless function.
// index.js
module.exports = app
- Add a
startscript topackage.jsonfile in order to run the application locally.
"start": "node index.js"
Run the application using the command
npm startThe 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.jsonfile 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
gitrepository on GitHub and add your code to it.Create a new project on Vercel and import the
gitrepository that you just made.
- Deploy the application. That's it. Your application should now be live!
Here's the live demo of the application.
You can find the source code on express-to-vercel github repository!
Signing off.
This post was originally published on Syntackle
Top comments (0)