How to build and deploy a Node API on Vercel Serverless functions

Get your REST API deployed in less than 10 minutes!

Vercel Serverless Functions

Setting up

yarn global add vercelvercel login

The login step will require you to enter your email and follow the instructions. Make sure you complete the instructions and then create a new project.

mkdir vercel-apicd vercel-apiyarn init -ymkdir api

Let’s add the only dev dependency to run our project locally.

yarn add vercel -D

Once this is done, open the project folder in your favourite editor and open package.json. We will need to add a script section to have a proper dev environment. We will need a script for deploying and a script for starting the dev server. Your file should look like this.

{"name": "vercel-api","version": "1.0.0","main": "index.js","license": "MIT","scripts": {"start": "vercel dev","deploy": "vercel deploy --prod"},"devDependencies": {"vercel": "^19.1.1"}}

Our last step before running the project is locally is to connect it to the Vercel dashboard. From the root of the project run vercel and accept all the default parameters. We are using Vercel's 0 configs set up. The project will be uploaded the first time but will not contain any endpoints.

We now need to create our first endpoint. Create the api/index.ts file. Vercel will define your API routes based on your folder and file structure. It will look under each folder or file for a default export and will create a corresponding serverless function to handle the route. Now, let's add the following code to our base API route in api/index.ts

import { NowRequest, NowResponse } from "@vercel/node";export default (req: NowRequest, res: NowResponse) => {   return res.json({ message: "Hello World" });};

Run the project using

yarn start

This will start a local development server on http://localhost:3000/api. Navigating to this first endpoint will give you a Hello world Message.

Now let’s go ahead and add a dynamic route using query parameters. Vercel Serverless Function handles dynamic routes in a similar way to Next.js. You can use the [paramName].ts syntax to define the name of the query parameter. To see this in action, let's create a user folder and id route:

mkdir api/userstouch "api/users/[id].ts"

In your api/users/[id].ts file, add the following code.

import { NowRequest, NowResponse } from "@vercel/node";
const users = ["Bob Smith", "Guillaume Bibeau"];
export default (req: NowRequest, res: NowResponse) => {const { id } = req.query;res.status(200).json({ user: users[Number(id)] });};

You can access the query parameter under the req.query object made available to the handler. Navigating or sending a request to http://localhost:3000/api/users/0 Should now give you the corresponding user from the users array: {user: "Bob Smith"}.

Deploying

yarn deploy

The Vercel CLI will proceed to build all the necessary Serverless Functions bundles and you can just sit while the magic happens. After a couple of seconds, you should be prompted with the deployed URL to your service. To test it out navigate to the URL and add then to /api/users/0. You should get the same results as the development server.

Conclusion

  • Vercel takes zero configurations and is able to run your project.
  • You can start using Typescript, Javascript or any supported languages.
  • The repo code is here Github.

Send any questions or comments at g.bibeaulaviolette@gmail.com!

Originally published at https://frontend-devops.com.

💻 💻 Software Engineer at @filevine . 📖 📖 Instructor for @udacity . ✍️ ✍️ Writer at http://frontend-devops.com