Deploy Serverless Express Application to Vercel

Vercel is a serverless cloud-based hosting solution to host front-end and serverless applications. Express is a Node.JS framework and deploying serverless express application aids cost-cutting to nearly zero. Although the traditional way of deploying to the server is expensive and there is a limit on API calls plus you may need backend developers when the product is  Scaled to a higher level. Therefore, we must learn how to deploy the serverless express application to Vercel.

Features of Vercel: 

• Deploying on Vercel is easy for developers.
• Auto production deployment when code is merged with the main branch on GitHub.
• You can monitor the analytics of your website visually.
• You can add a custom domain to it after you purchase the domain on Vercel or configure DNS records.
• Build logs are available for developers to track their source code in production.
• Provide Serverless functions feature that can automatically scale up when traffic increases on your website.  

Prerequisites: Node.js must be installed.  If you haven’t installed it yet, please refer to this article.

Steps to set up Vercel Account:

Go to the Vercel Website and Register with your Email or through your  GitHub account.

Steps to build  simple node.js express application:

• Make a folder on your Desktop, and open it.  Initialize it to build the  package.json file through the following command.

npm init -y 

• Install express.js

npm install express

• Make a folder named api and an index.js file inside that folder. The api folder will contain your server-side code. Let’s create a simple Nodejs-express web API. (copy and paste below simple express.js code snippet).

Javascript

// index.js
const express = require('express')
const app = express()
app.get('/api',(req,res)=>{
    res.send(`<h5 style="color:green">
        Hey Geek! you just deployed serverless express api</h5>`)
})
app.listen(8080,()=>{
    console.log('Server started at http://localhost:8080')
})
module.exports=app

• Now paste the following script to the vercel.json file. 

{
    "rewrites": [{ 
        "source": "/api/(.*)", 
        "destination": "/api" 
    }]
}

• Run the API locally at localhost:8080/api

node api/index

• install Vercel CLI  globally  on your device using the following command:

npm i -g vercel

• Check if Vercel is installed in your system by the following command.

vercel --version

• Then login to your Vercel account through this Vercel CLI command.

vercel login                           

• Now deploy the serverless express application to Vercel, and write the following command to the terminal.

 vercel

The command will show the latest Vercel version and ask the following questions:

• Set up and deploy “~/projectname”? [Y/n]:
• Which scope do you want to deploy to?
• Link to an existing project? [y/n]
• What’s your project name?
• In which directory is your code located?
• Want to override the settings? [y/n]

Further, if you want to deploy it to the production run the command:

vercel --prod  

After the above deployment process is done, visit the Vercel website and your project will be deployed there.    

example: https://geeksapi-panwarayush.vercel.app/api