DEV Community

RD
RD

Posted on • Originally published at therdnotes.com

Node API using Vercel Serverless Functions

This note is about how to setup, build and deploy an API using Vercel Serverless Functions.

VLog

If you prefer to watch the video instead of reading article,

its available at https://youtu.be/TE9MNxEeOI4

Length: 14:38 mins

For sure, the video version has some more info(verbose 😀) in it.

Setup Vercel

  1. Create an account at Vercel.
  2. install Vercel CLI and log in
yarn global add vercel
vercel login
Enter fullscreen mode Exit fullscreen mode

Setup Project

  1. Initiate the project using below commands and add Vercel NPM module as dev dependency.
mkdir node-api-using-vercel
cd node-api-using-vercel
yarn init -y
yarn add vercel -D
Enter fullscreen mode Exit fullscreen mode

Create API

Next, lets create an API endpoint /hello

mkdir api
cd api
touch hello.js
Enter fullscreen mode Exit fullscreen mode

Add the following code to hello.js

module.exports = (req, res) => {
    res.json({
      msg: 'hello there, how are you!!'
    });
  };
Enter fullscreen mode Exit fullscreen mode

Test API

To test the API, start the local dev server using

vercel dev
Enter fullscreen mode Exit fullscreen mode

Your API should be exposed on localhost:3000/api/hello and hitting this endpoint will return below response

{
    "msg": "hello there, how are you!!"
}
Enter fullscreen mode Exit fullscreen mode

Path Segments

You can easily have path segments by naming your file like [file_name.js].

When a file's name is wrapped in the square brackets, it is treated as a (dynamic) path segment

and its value is assigned to a variable with a name same as file name, file_name in above case.

This variable is then passed under req.query object to the API code.

So if we create a directory users under api directory and

then create a file [user_id].js file in it with following code

module.exports = (req, res) => {
    const {
        query: { user_id },
      } = req;

      res.send({
          msg: `Hello ${user_id}!`
      });
  };
Enter fullscreen mode Exit fullscreen mode

Now when we hit the endpoint localhost:3000/api/users/123, it will respond back as below

{
    "msg": "Hello 123!"
}
Enter fullscreen mode Exit fullscreen mode

Vercel Config

You can configure your Vercel Project with various options available at https://vercel.com/docs/cli#project-configuration

But lets see one option rewrites.

To avoid api being part of the endpoint, we can define a rewrite rule.

For that create vercel.json in project root with following content.

{
    "rewrites": [
        {
            "source": "/users/:user_id",
            "destination": "/api/users/:user_id"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Restart the server using vercel dev command.

Now you can call the API using localhost:3000/hello

instead of localhost:3000/api/hello


Thats it about this note.

HIH

Discussion (0)