How to create and deploy an Express.js app to Vercel?
Tags: javascript, webdev, tutorial, beginners
Published: 2022-05-22 10:47:05

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](https://expressjs.com/) app from scratch and deploy it to [vercel](https://vercel.com/).

## Prerequisites

> [Node.js](https://nodejs.org/) 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](https://yarnpkg.com/).

```bash
npm i express
```

- Create an `index.js` file in the root folder.

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

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

app.listen(process.env.PORT || 3000);
```

- Create a `public` folder and create an `index.html` file inside it.

```html
<!--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.

```js
app.use(express.static('public'))
```

> Note that the above line is a [middleware](https://expressjs.com/en/guide/using-middleware.html), 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.

```js
//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](https://stackoverflow.com/questions/21306512/difference-between-relative-path-and-absolute-path-in-javascript) of where the file is.

- Export the `app` for it to be run as a [serverless](https://vercel.com/docs/concepts/functions/serverless-functions) function.

```js
// index.js
module.exports = app
```

- Add a `start` script to `package.json` file in order to run the application locally.

```json
"start": "node index.js"
```

- 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](https://i.imgur.com/zqT1Mgt.jpg)

- 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](https://vercel.com/docs/project-configuration#) for Vercel.

Add the following to your `vercel.json` file:

```json
{
  "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](https://vercel.com/new) on Vercel and import the `git` repository that you just made.

![import repo in vercel](https://i.imgur.com/8MGt3fH.jpg)

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

![deployment](https://i.imgur.com/8WwxhDO.jpg)

Here's the [live demo](https://express-to-vercel-demo.vercel.app/) of the application.

You can find the source code on [express-to-vercel](https://github.com/murtuzaalisurti/express-to-vercel) github repository!

Signing off.

> This post was originally published on [Syntackle](https://syntackle.live/blog/how-to-create-and-deploy-an-express-js-app-to-vercel-ljgvGrsCH7ioHsAxuw3G/)