Learn Puppeteer, React-storybook and Xstream

OpenGraph images are the images you see when you paste a link into a social platform and it "unfurls" into an image, title, and description. This happens on Twitter, Discord, Slack, and many other platforms. This collection goes over everything from designing OpenGraph images in Figma, to implementing them in CodeSandbox, to returning headless browser screenshots from Netlify Functions, and finally using Cloudinary as a write-through cache. 

You will come away from this collection with the ability to ship an API that you can use on any of your sites, and also on-demand, that can generate images for not only OpenGraph unfurls, but also for Instagram, GitHub, and more. Using headless browsers with playwright to generate our images means we get full access to all the responsive power of CSS and all the logical power of JS to handle layout, importing assets like pngs, choosing different fonts, and more.

The image below is generated via the project you'll build and deploy in this course

![An example opengraph image](https://relaxed-payne-d1bfbe.netlify.com/opengraph?title=Building%20an%20OpenGraph%20image%20generation%20API%20with%20Cloudinary%20Netlify%20Functions%20and%20React&tags=figma,netlify%20functions,playwright&author=chrisbiscardi)

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

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

End-to-end testing assures you of a few things: that all the integrated pieces of an application properly function, all those pieces work together as expected, and your tests include and simulate real-user scenarios — something unit and integration tests just don't do.

This course introduces you to two great tools for E2E testing: 

* Puppeteer opens and runs applications in a Chromium browser and performs the actions it's given.
* Jest asserts that the integrated pieces work as expected and that add-on libraries like Faker and pixelmatch take our tests to the next level.

Over 9 lessons, we will create common application features and use Puppeteer and Jest to run different types of tests against them. You'll get practice using these tools to render content, mimic user activity, automate tests, and measure the overall performance of your application.

jest

End to End Testing with Google's Puppeteer and Jest

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how best to configure a React Storybook to use [Typescript](/q/typescript) (with TSX). This lets you write your reusable components with maximal type safety. Please see the provided code for the full source.

Configure React Storybook for use with Typescript

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.

puppeteer

When taking screenshots, it's important that the browser is big enough to show all of the content in the DOM that we want to screenshot. We can do this by setting the viewport.

Setting the viewport on a Playwright headless browser

[Storybook](https://storybook.js.org/) is a framework that allows you to develop components in isolation. It is ideal for a variety of use cases, most commonly when you're building some shared component toolkit. As such, Nx comes with a dedicated package `@nrwl/storybook` that adds a series of useful code generators to add storybook to an existing React library, but also to automatically generate stories and more.

Use Storybook to Develop React Components in Nx

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

[Nx](https://nx.dev) combines a lot of the best tools on the market, integrates them, and provides tooling to provide the best possible developer experience. One such pair is [Cypress](https://www.cypress.io/) and [Storybook](https://storybook.js.org/). Storybook allows developing components in isolation, which is also a great basis for testing components, which is where Cypress shines.
In this lesson, we're exploring some of the `@nrwl/storybook` code generation utilities that allow you to not only configure Storybook for a React application but automatically also set up a Cypress test configuration for it along with some spec files generated from the Storybook stories.

Use Cypress and Storybook to test your React Components in Isolation

In this lesson, we show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.

Add React Storybook to a Project 

Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React Storybook.

Inspect Component Events with React Storybook

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

cycle

This lesson is the first in an introduction to Cycle.js. We will see how to build from scratch a toy version of Cycle.js. See how to use RxJS to create simple web apps, and how to separate logic from effects.

Separate Logic from Effects in Cycle.js



[React Storybook](https://github.com/kadirahq/react-storybook) is a UI component development environment for React.
With that, you can develop UI components without running your app.

Here I show how to get started with React Storybook.
For more information, have a look at our [documentation](https://getstorybook.io/docs).

Getting Started with React Storybook

React Component stories can be dynamically loaded into React Storybook instead of doing it manually every time.

Load React Storybook Stories Dynamically

Story is the smallest unit of React Storybook. A story describes a React Component, and its various states and variations. Stories can describe complex components with dynamic properties and data loaded from a service. In this lesson we will write our first React Storybook story.

Write the First React Storybook Story

React Storybook allows for easy snapshot testing integration with Facebook's Jest testing framework. Snapshot testing allows you to capture the state of your UI and then notify you when that UI has been altered. We can easily create and update snapshots with Storybook!





Jest Snapshot Testing with React Storybook

In this lesson we are going to set up our basic app, set our environment variables, define our targeted viewport, and install Jest, Puppeteer, and Faker. We'll use these features to write our end to end tests. 

Setup and Install Dependencies for Testing with Google's Puppeteer

Now that we have our setup and environment ready for using Puppeteer to test our create-react-app, we can write our first tests. We will test our h1 and navigation, to make sure that they load correctly. In this lesson, we will be able to watch puppeteer open up a browser and evaluate our tests in real time. 

Test HTML Content on a Webpage with Puppeteer

In this lesson we are going to test a form submission by replicating keyboard input, mouse clicks, and touchscreen events. This will be done with random user information generated by Faker. We will test this in different contexts, including an iPhone 6 environment.

Replicate User Activity with Faker and Puppeteer

In this lesson we are going to test that a cookie is saved to the document whenever our login form is submitted. Then we will also learn how to set cookies from within our tests. 

Work with Document Cookies in Tests with Puppeteer

In this lesson we are going to write two tests that check our application for any console logs an page errors. We will also learn how we can log these out to our terminal. 

Check for Console Logs and Exceptions with Puppeteer

In this lesson we are going to take a screenshot and a pdf of our application. We'll add this to conditionally run when one of our tests fail. This way we can see what our test was seeing when it failed. These screenshots can help debug why tests fail. 

Save Screenshots of Applications with Puppeteer

In this lesson, we are going to fetch the Star Wars api from a React lifecycle method. Then inside of our tests we will intercept the request and abort it. Finally we'll test that our error message works as intended. 

Handle Page Requests in Tests with Puppeteer 

In this lesson we are going to send commands to the chromium browser with Puppeteer. These commands will enable us to calculate both the total number of CSS stylesheets used on the page and the ruleUsage for each of those stylesheets. With these metrics we will be able to calculate the percentage of unused CSS on the page. 

Topics

Instructors

Content Type