DEV Community: Karthik_B

Getting started with Serverless Functions using Vercel — II

Karthik_B — Wed, 20 Jul 2022 18:41:17 +0000

[May 22, 2022]

Hey all!

This is a continuation of the previous post on serverless functions. In this post, I have changed the approach slightly on how we can get country flag data and consume it as a user.

Check my previous blog post before going forward :)

Getting started with Serverless Functions using Vercel — I

Let us get started.

In the previous post, we had created serverless functions which were consumed using Axios POST request.

So I thought, why not use it as a GET request and serve the image as a response.

That would make the API something like this:

/api/getCountryFlagByNationality?nationality=Australian

and we get a response like this:

Pretty simple right?

But the thing is… I have no idea where to get started.

So let me do some googling and get to know about it.

Two things I need to know from what I see are:

Getting the query params from the URL itself
Serve images as a response

[June 11, 2022]

I happen to remember from my subconscious memory 😅 that one of the open-source repo of one of my colleagues (Anurag Hazra's github-readme-stats) served SVG as a response.

So I happen to look at the code and get a faint idea.

The thing was in his open-source he has created an SVG and added details.

What I had was a link to the image as an SVG.

There are some steps to get it to work. Let me take you through this.

Let us assume a case we need a flag based on nationality.

Now, as we are passing the param in the URL. You can get the variable from req.query your serverless function.

const { nationality } = _req_.query;

We will get our image URL from the library by doing this

const image_url = findFlagUrlByNationality(nationality);

We need a help of a tiny library GOT (not Game of Thrones) 😜

Checkout the GOT package here.

It is a powerful HTTP request library that will help to get our image of the flag.

const imageRequest = got(image_url);

This returns a Promise, which we can resolve to get the image and the buffer.


const [imageResponse, imageBuffer] = 
     await Promise.all([imageRequest, imageRequest.buffer()]);

With this, we construct the response of our serverless function.

Set the headers, add cache-control & content-type


res.setHeader("Cache-Control", "s-maxage=43200");

res.setHeader("content-type", imageResponse.headers["content-type"]);

Send the Image Buffer as a response

_res_.send(imageBuffer);

This wraps our serverless function. Let us try how it works.

Open Chrome and head to

[http://localhost:3000/api/getCountryFlagByNationality?nationality=Australian](http://localhost:3000/api/getCountryFlagByNationality?nationality=Australian)

This would now return the Flag of Australia as a response.

Woah! 💥

Let us deploy it, and there you go; you have the SVG being served using a GET request.

With this, you can pass our serverless function API directly to the src of HTML

Something like this:

Click here to see the image of the Australia Flag.

The serverless functions have been deployed in the URL :

https://country-flags-topaz.vercel.app

Usage:

Check out other examples here.

Head to the repo and deploy an instance for yourself :)

That brings us to the end of this post.

This is Karthik from Timeless

If you find this blog post helpful, tell me in the comments would love to know your views. Thank you :)

If you find any difficulties or see anything which could be done better, please feel free to add your comments!

Getting started with Serverless Functions using Vercel — I

Karthik_B — Wed, 20 Jul 2022 18:41:01 +0000

Hey all!

I worked on a simple side project where I had the need for Country Flags and came across an npm library which provided the data based on

Country Name
Nationality
iso2Code
iso3Code

This library provides functions that return the required data.

You can check the Github repo here.

So I thought why can't I just wrap each functionality around a serverless function and deploy it in Vercel.

I won't be dealing with any detailed working of a serverless function here. I feel this blog is just a head start to get started around serverless function.

Let's get started.

Creating a new Next.js App. The doc recommends using create-next-app which sets up everything for us.

npx create-next-app@latest

After the installation is complete, run npm run dev to start the development server.

Our application would run in http://localhost:3000 , let us visit it to view our application.

I have changed pages/index.js , to make the initial screen simple which renders just a Welcome and kept the rest of the code the same.

With that done, let's get into Serverless Functions.

So basically a serverless function is a chunk of code, a function, that takes a request and gets us a response.

It can be written in different backend languages.

I have chosen that language to be Javascript, the mother of all languages. 🔥

Next.js supports serverless functions by default wherein you can add your exported functions into the /api directory of our project root, pages/api directory to be more precise when using Next.js.

The basic structure of a Serverless Function is something like this:

Any query or params we send would be inside the request object. We will get to it soon.

Using the request we can perform any operation and return the response.

Let me take the simplest example, the Country Flags library has a function that returns all the countries and their data.

Create a new file in pages/api a directory called getAllCountriesData.js and add the below code.

import { countries } from "country-flags-svg";

export default function handler(_req_, _res_) { 

  _res_.status(200).json({ countries });

}

Now in pages/index.js file, let us use the above function.

This is a simple network request. I am using Axios. Let us create an async functiongetAllCountries

The URL can be changed based on the env (if needed)

The response of the function would be something like this.

An array of Country Data with their respective Flag image URL.

Let us look at another serverless function that takes in a request parameter and gives the response of the specific country data, e.g. country name.

Create another file in pages/api as getFlagUrlByCountryName.js and the serverless function would look something like this:

And we can make the API call something like this:

The response would be something like this.

Going forward we can create serverless functions for other functions available in the API section of the country-flags library.

You can find the same here, you can also duplicate and deploy it in your Vercel account if you want to use it. :)

How does it look to use the deployed version:

Let us test in Postman. I have deployed my serverless function here.

By Nationality- https://country-flags-topaz.vercel.app/api/getCountryByNationality

2. By Name- https://country-flags-topaz.vercel.app/api/getFlagUrlByCountryName

3. By ISO2 Code- https://country-flags-topaz.vercel.app/api/getFlagUrlByISO2Code

4. By ISO3 Code- https://country-flags-topaz.vercel.app/api/getFlagUrlByISO3Code

5. All Countries- https://country-flags-topaz.vercel.app/api/getAllCountries

This is Karthik from Timeless.

If you find this blog post helpful, do tell me in the comments would love to know your views. Thank you :)

If you find any difficulties or see anything which could be done better, please feel free to add your comments!