DEV Community

Cover image for Deploy Express JS (Node App) on Vercel
Tirth Patel
Tirth Patel

Posted on • Edited on

Deploy Express JS (Node App) on Vercel

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.

Express JS App deployed on Vercel


Github Repo Link : Express JS on Vercel

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! ๐Ÿซก

Top comments (2)

Collapse
 
aoda-zhang profile image
aoda

Thank you , following what you write, i have deployed my express API successfully,very nice ,hug you

Collapse
 
akashdeepsinghal profile image
Akash Deep Singhal

When running vercel dev locally, I'm getting error:
TypeError: listener is not a function

I even corrected @now/node to @vercel/node in vercel.json