Deploy Express JS (Node App) on Vercel
Tags: javascript, express, vercel, node
Published: 2022-11-09 17:58:14

After Heroku announced the termination of free plans 😏, it has become need for developers to find free alternatives to Heroku for deploying apps.

While researching this, I found many options that can cater to our needs, viz. Digital Ocean, AWS, GCP, and many others. But these cloud providers need a dense setup, and the pricing is way too high.

But I have 🎁 for you… 

**You can deploy your Express app on Vercel for FREE.** 🎉

I’ll let you know steps by which you can easily deploy Express app on Vercel. (You can start from step 2/3 if you have existing Express JS App)

PS: In this blog, especially I’m focusing on **Node (Express) app**. For python or other tech stacks, we can discuss it in another blog. ⌚

<hr />

### 1) Basic Express App 📝
 (if you already have one, you can skip this step. Github repo link at bottom of article)

- Init Node JS app : Go to folder in which you want to create app and run following command
<br />
     ```bash
      npm init -y
    ```
<br />
- Install packages : After app is initiated, install `express` package using yarn/npm
<br />
    ```bash
      yarn add express / npm install express
    ```


<br />
- Boilerplate for Express : Create `index.js` file in root of the folder. And copy the below code snippet
<br />

    ```javascript
        const express = require('express')

        const app = express()

        app.get('/', (req, res) => {
            res.send('Express JS on Vercel')
        })

        app.get('/ping', (req, res) => {
            res.send('pong 🏓')
        })

        const port = process.env.PORT || 8080

        app.listen(port, (err, res) => {
            if (err) {
                console.log(err)
                return res.status(500).send(err.message)
            } else {
                console.log('[INFO] Server Running on port:', port)
            }
        })

    ```

<br />
- Update NPM scripts : Add `start` script in `scripts` object
<br />
    ```json
    "scripts": {
        "start": "node index.js"
    }
    ```
<br />
- Spin up app : Start your app by running `yarn start` or `npm run start`. Upon starting server, open browser and navigate to `localhost:8080`. You will get `Express JS on Vercel` as a response from our Express app.

<hr />

### 2) Initialize git in our project. 💻

- Make a ```.gitignore``` file in the root of the folder. And add ```node_modules``` to it. If .gitignore file exists check that ```node_modules``` is added into it.
    
- Execute `git init` in the terminal (from root of project) or you can use VS Code's source control tab to initialize git repository.
    
- Connect local repo to remote (github/bitbucket). You can use any of the version control system to publish your repository.

<hr />

### 3) Create Vercel project 💾

- Go to vercel.com -> Login
- Login using the Version control platform you have kept your repository.
- From the dashboard -> Add new project -> Select your repository -> Deploy

<hr />

### 4) Add Vercel config in app ⚙️

- In the above step, after your fist deploy is completed, you can see that we're not getting `Express JS on Vercel` response from API.
- To work this as expected, we need to tell Vercel that this is an API and you need to serve this as a serverless function.
- For this, simply we need to add `vercel.json` file in root of our project. Paste below code in file
<br />
    ```json
    {
    	"version": 2,
    	"builds": [
    		{
    			"src": "index.js",
    			"use": "@now/node"
    		}
    	],
    	"routes": [
    		{
    			"src": "/(.*)",
    			"dest": "index.js"
    		}
    	]
    }
    ```
<br />
- NOTE: In the `dest` field, please put the filename which is the base entry file of your project. Suppose you have `app.js` as your base file you need to modify this config accordingly. Then only Vercel will know which file to serve as a base file for API execution.

<hr />

### 5) Re-Deploy and Re-Check API 🔁

- After ```vercel.json``` file is added, push these changes to git repository.

- Vercel will automatically trigger a deployment when you push in your branch. If it doesn't trigger automatic deployment, you can start a manual deployment.

- Once the new deployment is live, you can now see by refreshing the VERCEL deploy URL and check that now we're getting ```Express JS on Vercel``` as a API response.

- To assure that API is working perfectly, you can also hit `/ping` route which will return `pong 🏓` as the response.


![Express JS App deployed on Vercel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xob61zov2atumwbfwum7.png)


<hr />

Github Repo Link : [Express JS on Vercel](https://github.com/tirth-2001/express-js-vercel-part1)

## How can we forget Typescript❓🤔

Stay tuned for a fresh new article on **`Deploying Typescript based Express App on Vercel`**. Coming soon...

Tirth Patel, signing off! 🫡