How to create an API for Metascraper.js with Vercel and Typescript

First I follow my previous article:

How to deploy your Typescript function in a global CDN in seconds for free

Install the dependencies

npm install got metascraper metascraper-description metascraper-image metascraper-title

Time to code our function

cd api
touch metascraper.ts
cd ..

and the copy in the metascraper.ts the code below

import { VercelRequest, VercelResponse } from '@vercel/node';
import got from 'got';
import createMetascraper from 'metascraper';
import metascraperDescription from 'metascraper-description';
import metascraperImage from 'metascraper-image';
import metascraperTitle from 'metascraper-title';
const metascraper = createMetascraper([metascraperDescription(), metascraperImage(), metascraperTitle()]);
export default async (req: VercelRequest, res: VercelResponse): Promise<void> => {
  const { targetUrl } = req.query;
  const { body: html, url } = await got(targetUrl.toString());
  const metadata = await metascraper({ html, url });
  res.json(metadata);
};

Test and Develop our function locally

Just launch

vercel dev

And then you can test locally and live-reload during development

curl --request GET "http://localhost:3000/api/metascraper?targetUrl=https://vdelacou.medium.com/how-to-deploy-your-typescript-function-in-a-global-cdn-in-seconds-for-free-2b953397d91"