DEV Community

Cover image for How to create and deploy an Express.js app to Vercel?
Murtuzaali Surti
Murtuzaali Surti

Posted on • Originally published at syntackle.live

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, 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 -y to create a package.json file with default configuration.

  • Run git init to initialize a git repository.

  • Create a .gitignore file and write node_modules/ in it.

  • Install the express package using npm or yarn.

npm i express
Enter fullscreen mode Exit fullscreen mode
  • Create an index.js file in the root folder.

  • Inside the index.js file add the following to create an express app.

const express = require('express');
const app = express();

app.listen(process.env.PORT || 3000);
Enter fullscreen mode Exit fullscreen mode
  • Create a public folder and create an index.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>
Enter fullscreen mode Exit fullscreen mode

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'))
Enter fullscreen mode Exit fullscreen mode

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 the html file as a response.
//index.js
app.get('/', (req, res) => {
  res.sendFile('index.html', {root: path.join(__dirname, 'public')});
})
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Add a start script to package.json file in order to run the application locally.
"start": "node index.js"
Enter fullscreen mode Exit fullscreen mode
  • 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

  • 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"
      }
  ]
}
Enter fullscreen mode Exit fullscreen mode

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.

import repo in vercel

  • Deploy the application. That's it. Your application should now be live!

deployment

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

Discussion (0)