egghead.io
illustration for Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

Course

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

  1. 1
    Designing OpenGraph unfurls in Figma
    11m 44s
  2. 2
    Building an OpenGraph image React component in CodeSandbox, based on a Figma design
    12m 26s
  3. 3
    Setting up a new GitHub repo to deploy functions on Netlify with Make and netlify.toml
    2m 47s
  4. 4
    Scaffolding and deploying a Netlify Function in JavaScript
    1m 30s
  5. 5
    Using Playwright to screenshot the DOM and return an image from a Netlify Function
    4m 59s
  6. 6
    Compiling a React to an IIFE with Rollup to execute and render in a headless browser
    5m 43s
  7. 7
    Setting the viewport on a Playwright headless browser
    22s
  8. 8
    Testing an opengraph image with the Twitter Card Validator
    1m 38s
  9. 9
    Passing variables to serverless functions using query strings
    4m 5s
  10. 10
    Using Cloudinary as a write-through cache for a Netlify Function that generates images
    7m 32s
  11. 11
    Using _redirects files on Netlify to make .netlify function URLs more user-friendly
    58s

Passing variables to serverless functions using query strings

Chris Biscardi
InstructorChris Biscardi
  • http
    HTTP

Share this video with your friends

Send Tweet

To make our opengraph image generation function, we'll have to work out a way to pass the querystring variables from the original URL through to the React script running inside the headless browser. We choose to set them on the window using another injected script, and we also cover handling URL decoding of querystring components.

Build your Developer Portfolio and climb the engineering career ladder.
  • Search
  • Talks
  • Podcasts
  • Machine
  • Pricing
  • Store
©egghead.io
Terms & Conditions