How to create a simple API in Vercel

Introduction

Sometimes creating an API and deploying it to a cloud provider like AWS, GCP, or Azure can be a difficult task. However, Vercel makes it extremely simple to create and deploy your API to the cloud platform. With this tiny tutorial, you can have a simple API in minutes

Repository

https://github.com/cesmunoz/simple-vercel-api

Requirements

• Nodejs
• A Vercel account
• Vercel CLI (In this example we are pushing everything directly to vercel)

npm i -g vercel

Do you have everything set up? Awesome! Let’s code

Creating our API simple project

Let’s create a project, following the next commands:

mkdir simple-vercel-api
cd simple-vercel-api
npm init -y

We need to install the vercel package

npm install vercel --save-dev

In order to tell vercel that this is an api we need to create a folder called ***api,*** that’s it! Really simple, right?

mkdir api

Inside the API lets create a file called hello-world.js

touch api/hello-world.js

Inside the hello-world.js we are going to add a simple code

module.exports = (req, res) => {
  res.send({
    status: 200,
    message: "Hello world!!",
  });
};

aaaand we’re done! Pretty simple don’t you think?

Testing locally

In order to test it locally, we need to do the following.

Go to package.json and add a new item in the scripts:

scripts: {
    start: "vercel dev"
}

(Make sure you already configure the vercel cli correctly - vercel login)

Now we can do npm start and you need to follow the wizard. Similar to this:

npm start

> simple-vercel-api@1.0.0 start
> vercel dev

Vercel CLI 28.16.12
? Set up and develop “~/repos/simple-vercel-api”? [Y/n] y
? Link to existing project? [y/N] n
? What’s your project’s name? simple-vercel-api
? In which directory is your code located? ./
> Ready! Available at http://localhost:3000

Open a browser a put the following url: http://localhost:3000/api/hello-world.
The response should be:

{
    "status": 200,
    "message": "Hello world!!"
}

Deploy to vercel

To make the api live in production we need to do some adjustments to the project.

In package.json we will add a new script command:

"scripts": {
    "deploy": "vercel --prod"
},

And in the command line type npm run deploy. Wait a few minutes and you will have a response similar to this one:

npm run deploy

> simple-vercel-api@1.0.0 deploy
> vercel --prod

Vercel CLI 28.16.12
🔍  Inspect: https://vercel.com/[your_user]/simple-vercel-api/6PmNoyX4CfhdZhDny8LJmANV7AxB [3s]
✅  Production: https://[your_url].vercel.app [20s]

Go again to the browser and put the Production url that mentions above https://[your_url].vercel.app/api/hello-world and you should have the same response that you had locally

{
    "status": 200,
    "message": "Hello world!!"
}

Conclusion

Creating a simple API on Vercel is straightforward and super easy. With just a few configurations you can have your own API in the cloud.

Please let me know if you find it super useful
Cheers!
Ces