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
- Create an account at Vercel.
- install Vercel CLI and log in
yarn global add vercel
vercel login
Setup Project
- 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
Create API
Next, lets create an API endpoint /hello
mkdir api
cd api
touch hello.js
Add the following code to hello.js
module.exports = (req, res) => {
res.json({
msg: 'hello there, how are you!!'
});
};
Test API
To test the API, start the local dev server using
vercel dev
Your API should be exposed on localhost:3000/api/hello
and hitting this endpoint will return below response
{
"msg": "hello there, how are you!!"
}
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}!`
});
};
Now when we hit the endpoint localhost:3000/api/users/123
, it will respond back as below
{
"msg": "Hello 123!"
}
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"
}
]
}
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
Top comments (0)