Designing OpenGraph unfurls in Figma

Building an OpenGraph image React component in CodeSandbox, based on a Figma design

Setting up a new GitHub repo to deploy functions on Netlify with Make and netlify.toml

Scaffolding and deploying a Netlify Function in JavaScript

Using Playwright to screenshot the DOM and return an image from a Netlify Function

Compiling a React to an IIFE with Rollup to execute and render in a headless browser

Setting the viewport on a Playwright headless browser

Testing an opengraph image with the Twitter Card Validator

Passing variables to serverless functions using query strings

Using Cloudinary as a write-through cache for a Netlify Function that generates images

Using _redirects files on Netlify to make .netlify function URLs more user-friendly

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

We scaffold out a Netlify function in a new directory and access it via curl and the browser.

Chris Biscardi: [00:01] Now that we have our site deploying, we'll create our first function. This function will be the function that generates the OpenGraph image using Playwright. We'll create a functions directory and inside of that directory, create a directory that will house our function.

[00:18] Inside of gen-opengraph-image, we need to initialize a new package JSON. Our function needs to be in a file named the same as the directory. We'll create a gen-opengraph-image.js. We'll start in CommonJS syntax by exporting the name handler. Handler will be an async function that takes two arguments, the event to our function and the context.

[00:40] These variables together contain things like the environment or the body of a request that got sent to this function. Notably, this will also include the query string, which we'll use later to change how the image that we capture is rendered.

[00:52] Because this is an async function, we can just return an object that has the statusCode: 200 and the body of the response. In this case, the body will be "gen function works" as a string.

[01:03] We can commit these files and push them. This triggers a new build while we work. We can now see that instead of 0new functions to upload, we have 1. If we go to the functions tab, and we click on our function, we can see the URL that we have to hit. We can either hit that URL in the browser using the URL bar, or we can run curl in our terminal.

[01:23] You could also use any REST client for now. Soon, we'll be returning an image though, and not all REST clients support returning images or displaying them.

Course

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

Scaffolding and deploying a Netlify Function in JavaScript

Share this video with your friends