Serverless Functions on Vercel

Nov 1, 2020 3 min read

With Vercel, you can deploy Serverless Functions, which are pieces of code written with backend languages that take an HTTP request and provide a response. Serverless Functions can be used in various scenarios like handling user authentication, form submission, database queries, webhooks, etc.

Serverless Functions - Vercel

💡Introduction

Serverless Functions are functions which follow the functional programming paradigm written in a declarative style and get deployed on a virtual cloud server hosted and maintained by cloud computing companies.

For example, a Serverless Function can be a simple function which accepts some parameters and return a response corresponding to the parameters passed.

These functions are then triggered either by a CRON job or in any web application (front-end or back-end or both).

For more info, check here and here.

🚀 Sample Project

Let's dive into coding part and create a sample working project of a Serverless Function written in NodeJS. Finally, will discuss the process of deploying these functions on Vercel.

In this sample project, we use IPInfo API to fetch the geolocation data based on the IP address.

Note: Serverless Functions can be deployed on any Serverless Architecture Providers like AWS (lamba), GCP (cloud functions), Azure, IBM, Netlify, Gatsby Cloud, Vercel, etc.

Step 1: Create an empty directory and name it as your wish. In this article, will name this directory as geolocation-api.
Step 2: Install axios npm package

SHELL
npm install axios

Step 3: Create ipinfo.js file in the api directory inside the geolocation-api directory

JAVASCRIPT
const axios = require('axios')
module.exports = (req, res) => {
  const url = `https://ipinfo.io/json`
  axios
    .get(url)
    .then((response) => {
      const {data} = response
      res.status(200)
      res.json(data)
    })
    .catch((err) => {
      res.status(err.response ? err.response.status : 500)
      res.send(err.message || 'Something went wrong! Please try again later.')
    })
}

Step 4: Now deploy this project to Vercel

Note: Leave the Build & Development Settings as well as Root Directory blank (i.e. use default options).

That's it, Serverless Function is now deployed and is ready to return the geolocation data using ipinfo API. In order to execute the function written in step 2, visit your deployed app like this → app-name.vercel.app/api/function-file-name.

For example, function will be executed at https://geolocation-api.vercel.app/api/ipinfo if your app name is geolocation-api and the function file name is ipinfo.

🎉 Finished Project

Access the GitHub repo at https://github.com/iamsainikhil/serverless-function-vercel
Access the Serverless Function at https://geolocation-api.vercel.app/api/ipinfo
Deploy to Vercel

🙌 Advanced

The Serverless Function discussed in this article is a simple usage where every function will have it's own file in the api directory.

Let's think of a scenario where you want to deploy a NodeJS-Express project on Vercel with several functions which return responses based on the requests. In this case, you need to provide some advanced runtime configuration to Vercel by creating a now.json in the root directory.

For more info, check here.

To keep this article short and simple, I am just providing links to the projects below which utilize the advanced configuration to use the Serverless Functions. I will write another article in future with the detailed explanation.

Weather React API (an api written in NodeJS using Express which is used as a proxy server for the Weather React application)
Link - https://weather-react-api.now.sh/
GitHub - https://github.com/iamsainikhil/weather-react-api
Weather React application:
Link - https://iamsainikhil.com/weather-react
GitHub - https://github.com/iamsainikhil/weather-react

Weather React

A robust weather application to provide current and 24 hour 7-day weather forecast for any city in the world built with❤️using React. Weather forecast data is powered by Dark Sky and city search data is powered by Algolia Places.

https://iamsainikhil.com/weather-react/

This article was last updated on Nov 21, 2020

NodeJS

Vercel

Serverless Function

Sai Nikhil

A passionate developer who brings creative ideas from areas, including networking & data storage, security, UI/UX design, and progressive web applications with a strong understanding of the entire web development process.