Deploy Express JS (Node App) on Vercel

#javascript #express #vercel #node

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. ⌚

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
```
  npm init -y
```

Install packages : After app is initiated, install express package using yarn/npm
```
  yarn add express / npm install express
```

Boilerplate for Express : Create index.js file in root of the folder. And copy the below code snippet

    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)
        }
    })

Update NPM scripts : Add start script in scripts object

"scripts": {
    "start": "node index.js"
}

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.

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.

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

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

{
    "version": 2,
    "builds": [
        {
            "src": "index.js",
            "use": "@now/node"
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "index.js"
        }
    ]
}

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.

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.