Learn Prisma, Puppeteer and Redwoodjs

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

(This collection is still WIP)

Databases are essential for any full-stack applications, but working with them is traditionally very difficult. Prisma is here to change that. It's a powerful database toolkit that helps us think in data itself - not SQL, not classes, just the data we care about in our apps.

In this series, we will learn how to leverage the power of Prisma to automatically generate a type-safe, autocomplete-ready, and efficient query builder, all based on a simple and easy-to-read schema. We will integrate all this good stuff into a Next.js project to complete a simple social network app.

In the end, you will be able to understand how Prisma works, and confidently start using Prisma in your own project.

Prisma is an open-source database toolkit. It replaces traditional ORMs and makes database access easy with an auto-generated query builder for TypeScript & Node.js.

prisma

Build a full-stack app with Prisma

This collection explores one of the most promising and coolest releases of early 2020 - prisma v2. First part of the prisma infrastructure to exit experimental mode - prisma client is an auto-generated and type-safe query builder for Node.js & TypeScript. We will explore and learn it  in this collection!

Get started with Prisma v2. Prisma Client

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

RedwoodJS takes the JAMstack philosophy to the next level. It brings together all the tools modern web development has to offer:

- React
- GraphQL
- Prisma

RedwoodJS abstracts database management away from you so that you can just build your schema and it will do all the plumbing. This collection will go over how to create a RedwoodJS project and the scripts that will help make your developer experience a joy.


Bringing full-stack to the JAMstack

Do you love the JAMstack philosophy but need a database-backed web app? Want great developer experience and easy scaling? Redwood is here! Built on React, GraphQL, and Prisma, Redwood works with the components and development workflow you love, but with simple conventions and helpers to make your experience even better.

redwoodjs

Introduction to RedwoodJS: full-stack framework for JAMstack

We use `yarn redwood generate page` (`yarn rw` for short) in this lesson to generate an `IndexPage` component. 

The first argument to `yarn rw generate page` is the name of the page you are generating. The second argument is the path you want the page to show up on. So `yarn rw generate page index /` will generate an `IndexPage` component and insert a route entry in our `web/src/Routes.js` file.

We learn that redwood import `React` for you so you don't have to import it manually when you are creating a component.

Generate a Page Using the Redwood CLI

In this lesson, we are going over how to generate a `RedwoodJS` project.

We can create a `RedwoodJS` project with `yarn create redwood-app ./my-redwood-project`.

`yarn` will generate the `RedwoodJS` app in the file folder you specified without installing any globals.

To run the `RedwoodJS` app, we use `yarn redwood dev`. This runs the Redwood client as well as the `GraphQL` backend.

Generate a Redwood Project

RedwoodJS provides a `Link` component that we can use to navigate around our app. We can provide a `to` prop with the path that we want to navigate to.

RedwoodJS takes this a step further and provides a `routes` object from `@redwoodjs/router`. This object is aware of all the routes defined in `web/Routes.js`. This allows us to use the methods on this object rather than referencing the our routes with a string literal. We can then change the route path without having to change all of the references to that route all over our app.

Use RedwoodJS Link and routes Object to Navigate

RedwoodJS gives us a cli command to generate layouts.

`yarn redwood generate layout main`

This will generate a `MainLayout` component in `src/layouts/MainLayout/`. We can use this layout component to define any headers or footers we want to share across multiple pages. 

Extract a RedwoodJS Layout Component

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

In this tutorial we will spin the docker container with official postgres image and access the database with `psql` to set up an easy playground for PostgreSQL relational database.


Run postgres database in docker container

In this lesson you write initial boilerplate for prisma (spoiler: it's not bigger than this summary) with typescript infrastructure.

Create new project with prisma

In this lesson you will learn how to connect your prisma to postgres db to be able to introspect it. We will also go trough the models and touch prisma naming convention.

Connect prisma to PostgreSQL database running in docker container

In this lesson you will learn how to generate type safe orm client with `prisma generate` and do first write operation using it.

Generate type safe client with prisma

In this lesson you will learn how to perform the simplest `findOne` and `findMany` read operations from postgres database using prisma client.

Perform read operations using prisma client

In this lesson you will learn how to perform the  `update`  operations on postgres table entries using prisma client.

Perform update operations using prisma client

In this lesson you will learn how to perform the `delete` operations on postgres database table entries using prisma client.

Perform delete operations with prisma client

In most of cases your database schema won't stay the same for too long - let's learn how to update the prisma client so it has access to all of the additions made to the postgress

Evolving prisma schema

Prisma makes database access easy with an auto-generated and type-safe query builder.

In this lesson, we will learn how to install all the necessary dependencies and set up Prisma for an existing npm project, with an empty PostgreSQL database running in the background. We will create our first Prisma data model in the schema, and use *Prisma Migrate* to map our data model into the database. 

Finally, we'll generate the *Prisma Client* into our `node_modules` directory, so later we can simply import and use the client tailored to our data models as a normal npm package in the project.

At the time of recording this lesson, *Prisma Migrate* is in an experimental state, so the extra flag `--experimental` is needed to perform the `save` and `up` commands.

Install and Set up Prisma for a New Project

In this lesson, we will write a code snippet which creates a new entry in the database. We will import and use the Prisma Client that we previously generated by running the command `npx prisma generate` to perform this query. 

Thanks to type-safety, we can now directly catch mismatched data field types while we are coding, drastically reducing the chance of having bugs in the code.

Tip - When in doubt, you can always use the key combination `ctrl-space` to invoke the autocomplete feature of VS Code. This is also a huge benefit made possible by Prisma's type-safety, and is super handy for exploring the Prisma Client API.

Create an entry in the database with Prisma Client

Apart from creating entries, it's also very intuitive to read, update, or delete data from the database with Prisma Client.

In this lesson, we will explore the [Prisma Client API](https://www.prisma.io/docs/reference/tools-and-interfaces/prisma-client/crud) for `findMany`, `findOne`, `updateMany`, `deleteMany` and so on.

Notice that since all these methods are tailored to the schema that we defined earlier, VS Code is aware of what is valid and is able to prompt us with helpful autocomplete options, making it much easier to explore the Prisma Client API.

Topics

Instructors

Content Type