A First Look at RedwoodJS - Jamstack Denver

Episode Description

Anthony Campolo introduces RedwoodJS, a full-stack serverless Jamstack framework, and live-codes a blog application from scratch at a Denver meetup.

Episode Summary

Anthony Campolo, a Lambda School student and self-described RedwoodJS cheerleader, presents an overview and live demo of RedwoodJS at a Denver JavaScript meetup. He begins by explaining what RedwoodJS is — a full-stack serverless framework for the Jamstack created by GitHub co-founder Tom Preston-Werner — and how it combines ideas from Ruby on Rails, the static site generator Jekyll, and modern React development. Anthony walks through the framework's architecture, covering its split between a web frontend and an API backend, its use of Prisma as a database layer, GraphQL for data querying, and a novel concept called "cells" that handle data-fetching states like loading, empty, error, and success. He then introduces the core team behind the project and their philosophy of "tutorial-driven development." The live-coding portion demonstrates generating a new RedwoodJS project, creating pages and layouts with generator commands, defining a Prisma data model, scaffolding full CRUD functionality, and building a custom cell to display blog posts on the homepage. The session concludes with a Q&A touching on RedwoodJS's production readiness, its potential for enterprise-scale applications through serverless architecture, and its built-in authentication capabilities.

Chapters

00:00:00 - Introduction and RedwoodJS Overview

Thomas introduces Anthony Campolo as a Lambda School student and RedwoodJS enthusiast who recently relocated to Denver. Anthony kicks off his first meetup talk by sharing his background transitioning from music education and performing arts into web development. He mentions his extensive blog series on RedwoodJS published on the community forum, which serves as a companion to the official tutorial.

Anthony describes RedwoodJS in accessible terms: for non-technical audiences, it's "a program for generating websites," while for experienced developers, it's like a fusion of Ruby on Rails, Jekyll, and React. He explains the framework's official designation as a full-stack serverless Jamstack framework, unpacking each of those buzzwords and how the serverless component relates to AWS Lambda functions and event-driven architecture.

00:06:02 - The Core Team and Architecture Breakdown

Anthony introduces the key people behind RedwoodJS, including Tom Preston-Werner (GitHub's original CEO and creator of Jekyll and Semantic Versioning), Peter Pistorius (the primary JavaScript developer), Rob Cameron (who built the tutorial), and David Price (the community manager). He highlights how the framework emerged from ongoing conversations between Tom and Peter about modern application architecture.

The discussion shifts to RedwoodJS's architectural diagram and directory structure, which splits into a web frontend and an API backend. Anthony walks through the web side, covering the familiar React-like structure of components, layouts, and pages, along with the generator commands that scaffold boilerplate code. He introduces "cells," a novel RedwoodJS concept that declaratively manages data-fetching states including loading, empty, error, and success — eliminating much of the manual state handling developers typically write.

00:12:40 - Prisma, GraphQL, and the Backend

Anthony transitions to the API side of the framework, explaining how Prisma serves as the default database layer. He clarifies that Prisma positions itself between a traditional ORM and a query builder, and notes that alternative databases like FaunaDB can be swapped in. He walks through the Prisma schema file, showing how data sources, the client, and data models are defined, using a blog post model with auto-incrementing IDs, title, body, and timestamp fields.

The backend explanation continues with the GraphQL schema definition language, which mirrors the Prisma model to define types, queries, and mutations for full CRUD operations. Anthony covers how services act as the bridge between cells and the database using Prisma client commands, and explains how the GraphQL handler bundles everything together into a single serverless Lambda function — the key mechanism that brings RedwoodJS into the serverless realm.

00:19:32 - Live Coding: Pages, Layouts, and Routing

Anthony begins the live demo with a pre-generated RedwoodJS project, showing the default splash page and the development server. He demonstrates creating a homepage and about page using the generator commands, explaining how routes are automatically configured. The framework's shortcuts like "yarn rw g" streamline the workflow considerably.

He then generates a blog layout component with navigation links, imports it into both pages, and demonstrates how the layout wraps page content with a persistent navigation bar. Throughout the demo, he highlights developer-friendly features like simplified import paths that eliminate relative directory navigation and hot-reloading that updates the browser automatically on file save. The result is a multi-page site with shared navigation built in just a few minutes of commands and minimal manual coding.

00:26:51 - Live Coding: Database Setup and Scaffolding

Anthony defines a post model in the Prisma schema with fields for ID, title, body, and creation timestamp, then runs the migration commands to generate the SQLite database. He shows the auto-generated SQL and explains how it maps back to the Prisma schema and GraphQL types. The scaffold command then generates an entire admin interface with full CRUD capabilities — creating, viewing, editing, and deleting blog posts directly through the browser.

He demonstrates the scaffolded interface by creating posts, editing content, and deleting entries, all backed by real database operations. The scaffold produces pages, cells, services, and components automatically, giving developers a functional admin panel with minimal effort. Anthony references his blog series for anyone wanting a deeper breakdown of all the generated code.

00:33:30 - Building the Blog Cell and Displaying Posts

Anthony generates a custom blog posts cell to display content on the homepage. He adjusts the GraphQL query to pull in post titles, bodies, and timestamps, then modifies the cell's success state to render posts using familiar React patterns like mapping over arrays and structuring output with article elements, headers, and divs. The homepage transforms from a simple placeholder into a working blog feed.

He finishes the demo by showing the GraphQL playground, where developers can query the API directly. Anthony notes that the presentation covers the first half of the official tutorial, with the remaining portions covering contact forms, deployment to Netlify and Heroku, and authentication setup — meaning viewers are halfway to a fully deployed, authenticated application.

00:39:09 - Q&A: Production Use, Serverless, and Authentication

Thomas opens the Q&A by asking who should adopt RedwoodJS today. Anthony explains that the first production app built with the framework was Predict Covid, a real-time data visualization tool, demonstrating capabilities far beyond the simple blog tutorial. He emphasizes that RedwoodJS aims to push the Jamstack into enterprise-grade production applications by combining its scalability benefits with full backend capabilities.

The conversation explores fully serverless architecture, with Anthony describing his FaunaDB integration as potentially the first fully serverless RedwoodJS stack. Zach observes that the serverless database has been the missing piece for enterprise Jamstack adoption. A viewer question about authentication prompts Anthony to highlight RedwoodJS's built-in auth library and generator, which he calls the simplest authentication he has ever used. The session wraps with Anthony encouraging contributions from developers of all levels, noting his own experience as a bootcamp student making meaningful contributions to the project.

Transcript

00:00:00 - Thomas (host/moderator)

Anthony's going to go first. Anthony is a current Lambda School student studying full-stack web development and a self-proclaimed RedwoodJS cheerleader, which is what he's going to be talking about tonight. Anthony just recently moved to the Denver area, so give him a big warm welcome — we love people here in Denver. He used to be a teacher, so as he's going through his talk, he's used to people raising their hand and asking questions. Feel free to ask those questions in the chat stream at any time. We'll also have a Q&A after the talk, so if you want to hold your questions till then, that's fine too. Anthony, go ahead, take it away.

00:00:35 - Anthony Campolo

Great. Thanks a lot, Thomas. Really happy to be here. I'm really excited to talk to you guys about RedwoodJS.

00:00:43 - Anthony Campolo

This is my first chance to give a real kind of in-depth talk — conference talk, meetup talk, any kind of talk like that. As Thomas said, I have a lot of experience as a teacher. I used to teach music. I also spent a lot of time running a performing arts summer camp. Now I'm transitioning into web development, and we're going to talk about RedwoodJS.

00:01:13 - Anthony Campolo

Let me get my slides up for you.

00:01:17 - Anthony Campolo

Actually, the first thing I wanted to show you is I've written a very in-depth article series that very much informs what I'm going to talk about. So if you go to the RedwoodJS community forum, you can find "A First Look at RedwoodJS" — this very long, monstrous URL.

00:01:39 - Anthony Campolo

I'm going to be referencing it a little bit. It goes over the history of Redwood, what different ideas came together, and then it walks you through basically the entire tutorial. What I'm going to be covering is the first half of this. We'll talk more about that once we get into the slides.

00:02:03 - Anthony Campolo

As he said, I am Anthony Campolo. My general web handle is AJCWebDev. If you search that on Twitter, GitHub, dev.to — ajcwebdev.netlify.app has my blog that's been squatting on that namespace.

00:02:25 - Anthony Campolo

That's where I am at almost everywhere. Substack is one more. That's the link at the bottom for this long blog series that I worked on. This is the breakdown of it.

00:02:39 - Anthony Campolo

The parts on the right — each two sections correspond to one of the videos of the tutorial. The only reason I point this out is because the tutorial is a very crucial part of RedwoodJS. They've actually coined a term called "tutorial-driven development," where they created the tutorial front to back the way they wanted it to work, and then they wrote the code to make the tutorial work.

00:03:04 - Anthony Campolo

I actually used the same strategy to write an article recently, and it sounds crazy, but it makes a lot of sense when you do it. It makes you think about the experience a developer goes through as they're being introduced to your framework.

00:03:21 - Anthony Campolo

Because there's a paradox here: if you try to break down all the different pieces of Redwood, it's hard to explain any of them in isolation because they all connect to each other. But if you show someone a full project, they're like, "Oh, there's way too much stuff here. Can you break this down piece by piece?"

00:03:39 - Anthony Campolo

These slides are going to throw a ton of code at you that won't necessarily make a ton of sense. I'm going to go through each of the pieces of Redwood so we have some context, but when we actually build out the project, it'll make a lot more sense.

00:03:55 - Anthony Campolo

So "a program for generating websites" is how I describe this to people who aren't necessarily technical. There are a lot of different ways you can talk about what Redwood is, but I think this is the most succinct and simple explanation.

00:04:11 - Anthony Campolo

It's very reminiscent of something like a static site generator, but not exactly. If I'm talking to someone who has a lot of web experience and has been around the block and seen a lot of these projects, I say it's as if Ruby on Rails and Jekyll had a baby, and then that baby and React had a baby, and that baby is RedwoodJS. This gets at how Redwood is very unique in that it takes elements of a full-stack framework like Ruby on Rails — it thinks a lot about your front end and back end and how they connect — and it's also very reminiscent of a static site generator like Jekyll.

00:04:50 - Anthony Campolo

Jekyll and Redwood are both created by Tom Preston-Werner, which we'll talk about a little bit as we go on. But if you compare Redwood to either of those projects, you're kind of missing half of the picture. And then it's also mixed in with all this modern React component-driven development. The official title for people who only speak in buzzwords is "a full-stack serverless framework for the Jamstack."

00:05:16 - Anthony Campolo

Full-stack is like the Ruby on Rails influence, and the Jamstack is the Jekyll influence.

00:05:23 - Anthony Campolo

The serverless part is something we'll get into a little bit later. Serverless is in reference to AWS Lambdas and functions as a service — the idea of instead of having a server or a container that's constantly running, you have just your code, which is individual functions that will be invoked based on incoming events.

00:05:50 - Anthony Campolo

This is a kind of new, kind of not-new way of architecting applications that Redwood has gone all in on. We'll get into that later in further slides.

00:06:02 - Anthony Campolo

So this is pretty much the core team of people who are really working on this full time. You've got Tom Preston-Werner, who is the original CEO of GitHub, the creator of Jekyll, the creator of Semver (Semantic Versioning), and TOML, among other things. What's funny, though, is Peter on the right.

00:06:23 - Anthony Campolo

Peter is actually the Rosetta Stone of this whole project. Peter has written more of the code than Tom because he is the resident JavaScript expert. The framework very much has emerged in conversation between Tom and Peter and their ideas of how to architect a modern application.

00:06:43 - Anthony Campolo

Peter's doing a lot of the heavy lifting in terms of the actual code. So Tom's kind of like the figurehead — he does the podcasts and has the big long-term vision of the project. Both of them have been working on this for a long time, over a year, even though it didn't go live until March.

00:06:59 - Anthony Campolo

And then you've got Rob. Rob and Tom are longtime friends — they've known each other for like 20 years. They originally bonded over knots, which is something I just learned the other day in one of their talks. Rob did the whole tutorial, so if you watch it, he's kind of like the teacher that walks you through how Redwood works. A lot of this talk is based very heavily on his tutorial and how he explains the framework.

00:07:29 - Anthony Campolo

And then David is the community and social media manager. He's the one I've talked to the most as I've been working on these different facets of Redwood and getting to know the project.

00:07:42 - Anthony Campolo

There are a lot of other people contributing as well. Right now it's a bunch of dudes, but we are very conscious of wanting to make a more diverse community and make it welcoming to anybody. So if you come to the forums, you'll be treated with respect, you'll be treated kindly, and your questions will be answered. We are all very big on that.

00:08:06 - Anthony Campolo

This right here is the most beautiful and most incomprehensible architectural diagram you'll ever see. The first time I saw this, I was like, "Wow, that looks awesome. I have no idea what any of this means." We're going to break this down piece by piece. The most important part is what you see on the left, where it says "front end" and "back end." This is how your directory structure is set up — you're going to have a web directory and an API directory, as shown there.

00:08:40 - Anthony Campolo

So first we'll talk about the web front end, and this should be fairly familiar if you've worked with React or Create React App. We have a public folder and a source folder. In our source folder you have components, layouts, and pages. Then you have your index.js and index.html, which loads in your single-page application. Then in routes.js is where all your routing goes.

00:09:15 - Anthony Campolo

Most of the routing is handled for you by the generators, and we'll get into that more when we're actually building a project.

00:09:25 - Anthony Campolo

This should be pretty familiar if you've used — I think Eleventy has layouts, I think Gatsby has layouts. A lot of other projects do this where you have one layout, which is like your nav bar, your footer, the basic structure you want surrounding all of your general web pages. Then you have pages that live inside of that layout, and your components live inside your page. That's what that diagram on the right is kind of explaining. On the left I'm going to have basically what it is and then the generator command written right under it.

00:10:00 - Anthony Campolo

So Redwood uses Yarn. yarn rw is short for "yarn Redwood," and the g is short for "generate." So you're going to see that command a lot. We use the yarn rw generate command for layouts, pages, and all the other stuff we're going to be building.

00:10:16 - Anthony Campolo

So it spits out your blog layout, which has a children prop. The children prop is like your page containing your components.

00:10:25 - Anthony Campolo

Same deal here — we have a generate command that generates your page. So you generate the page and specify the name of the page and the route. You see how we just have a slash. That's what's generating our home route. So when we enter that command, it generates this whole thing — all that code. And then in the top right, that's what it renders in your browser when you open it.

00:10:51 - Anthony Campolo

So you can see that it's automatically importing your link component. If you've used React Router, that should look fairly familiar — having your link component, which you use to link between pages.

00:11:05 - Anthony Campolo

Cells are the new idea that Redwood introduces — a new concept that's already been picked up by another framework, Bison. So apparently it works. At the top right is your GraphQL query. If you're used to GraphQL, that should immediately look very familiar: it's your post and it's bringing in your post ID.

00:11:29 - Anthony Campolo

If you've never used GraphQL, a lot of Redwood is going to be a little foreign to you. It would be useful to study a little basic GraphQL, or you can learn it as you go. That's pretty much how I did it. Just fair warning that there's a lot of GraphQL baked into what's going on here.

00:11:51 - Anthony Campolo

We have the query, which is basically querying our backend. We're doing a query — it's a blog posts query — and it's pulling in all of the posts and then rendering the ID for each of those posts.

00:12:07 - Anthony Campolo

Then if we look at the bottom, these are the four different states the cell can be in. It'll know whether it's loading or whether you've gotten the data from the database. It'll know whether it's empty, it'll know whether there's been some sort of error. You get all this stuff basically out of the box. When you have a success, it feeds in the post and you can do whatever you want with it — map over it, pull out different parts of the posts. That's what we'll be doing in the example we'll be building out.

00:12:40 - Anthony Campolo

Back to this — we saw the bottom-left part, we saw the web directory so far. Now we're going to look at the top-left part, which is the API directory. We've got two big things going on here: we've got the Prisma folder and then we've got the source folder, which is our whole backend.

00:13:00 - Anthony Campolo

What's interesting about this is that Prisma is used by default. If you're just generating projects, it's going to give you Prisma by default. You don't have to actually use Prisma, though. I recently built out a project with FaunaDB and you basically delete the Prisma folder and then add in the Fauna client into the db folder, and then you can query it directly with GraphQL or their native FQL language. So Prisma is a big part of what I'm going to be showing today, but it's actually not necessary to use Redwood by itself. It's just a really big part of it.

00:13:40 - Anthony Campolo

We should talk about what Prisma is. Prisma is not an ORM. This is a very important thing that the Prisma team wants us to always say — it is a query builder. If you listen to Nick Burke's talk with Michael Chan on the React Podcast, which was about a week ago, he says it sits in between a query builder and an ORM, because you have your database layer, then your query builder layer like Knex or connect, and then your ORM layer which is like TypeORM or Hibernate for the Java world. Whereas Prisma sits in between the query builder and the ORM layer.

00:14:18 - Anthony Campolo

My theory is that ORM has a really bad name because of an article called "ORMs Are the Vietnam of Computer Science," basically saying it sounds like a good idea at the start, but once you get in you can't get out and you just keep throwing more resources at it. Then before you know it, you've got a million hippies yelling about how slow their queries are — and it's just not good. So Prisma is slightly lower level than an ORM, but it's what we use to talk to our database. It's mapping objects to relations, but it's not an ORM.

00:15:01 - Anthony Campolo

This is the Prisma schema. There are three parts to this. There's your data source — as you can see, we're using SQLite. This is just for development. If you follow the tutorial all the way to the end, you end up deploying with Heroku Postgres. You can easily switch out different databases from development to production. Then you have the client, which is the Prisma client — the part that essentially translates your JavaScript into SQL queries. Then the post model. Model-view-controller — it's a model.

00:15:43 - Anthony Campolo

So you're saying you have a post which has an ID, which is an integer that just auto-increments. Every time you make a new post it'll be ID 1, the next post will be ID 2, ID 3, and so on. The post has a title, which is type string, and a body, which is also type string, and then it automatically gives you a createdAt timestamp using the now function. This all basically comes from setting up your model, which you can then use with a generator, as we'll see.

00:16:21 - Anthony Campolo

Going back to how well you know GraphQL — if you know it very well, you'll look at this and be like, "Oh yeah, this makes total sense." If you've never seen a GraphQL schema definition language before, it'll take a little while to parse, but it's actually fairly readable. So what we're doing here is defining our types. Our post model has an ID, title, body, and createdAt. Our post type has the same thing. Then we create our query type — when you query posts, it's going to give you an array of the posts.

00:17:00 - Anthony Campolo

That's what it says under "type query." Then if you want a specific post, you can query that post with its ID. On the right side are the mutations — for actually creating a post, updating a post, or deleting a post. These are your CRUD capabilities: create, read, update, delete — also sometimes called create, retrieve, update, delete, which is how Rob says it.

00:17:30 - Anthony Campolo

So services — this is not a new Redwood concept, but it's a very crucial part of how Redwood thinks about the world. This is the part that took me a while to get. Basically, this is how your cell talks to your backend. You see that we're importing our database, which is our Prisma client. Our db is the Prisma client. And then we're using different Prisma commands to either find all the posts — that's the findMany command — find one post by pulling in the post with the ID, and then create, update, or delete the post.

00:18:13 - Anthony Campolo

All this gets wired up with your schema definition language and your Prisma model to do all this stuff. When people talk about frameworks having a lot of magic, what I usually think they mean is that there's a lot of code that I don't know what it does. To me, this is the most magical part of Redwood. This is a lot of code. I don't know exactly what this code does, but this is where your whole backend is being stitched together and made into a GraphQL handler, which is then used as your Lambda serverless function.

00:18:50 - Anthony Campolo

This is where Redwood enters the serverless realm — something that can be executed just as a function. This is what takes all of your code. It brings in your schema, your services, and your db, then shoves it all together into one big giant function.

00:19:16 - Anthony Campolo

If you want to learn more about that, you should check out the docs. That's the best high-level explanation I can give without saying something dumb. Sweet. That's all the slides. Let's build a thing.

00:19:32 - Anthony Campolo

What I've done so far is just generated the project already, because it would have taken a while with the streaming. What I originally put in was yarn create redwood-app and then "redwood-denver." So that's the command that generates this project. And then to actually start it up, you do yarn redwood dev, which kicks on your development server. This is what you see as the general splash page. That's all we've done so far — just generated a project. I've not done anything else with it. What you'll be seeing is completely from scratch.

00:20:14 - Anthony Campolo

The first thing we want to do is create a homepage. So this is the command we were talking about earlier. We have yarn rw g. You could type redwood generate, but just to save yourself the keystrokes, we have these shortcuts that are nice and easy to use. So we're going to generate a homepage and it's going to go to our home route, which is slash.

00:20:42 - Anthony Campolo

So what we see here is generating page files. It generates a homepage, stories, test, and JS — all in our source, in our pages, in our homepage. It may look like there's a lot of folders and a lot of stuff going on here, but once you understand how it all fits together, it's really, really easy to navigate and it's super cool.

00:21:06 - Anthony Campolo

So this is our homepage. This is what it gives us out of the box. So we're going to edit this — we're going to take out the links, this is going to say "RedwoodJS Jamstack Denver," and this is going to say "This is the homepage."

00:21:31 - Anthony Campolo

Now we save, and our server is going to automatically update any time we save our files.

00:21:38 - Anthony Campolo

This is our homepage. Now let's generate another page — our about page. We're going to do yarn redwood generate page, just like we did for the last one. This is how we do about. I'm not going to specify a route this time because it's going to basically do everything for us. It creates the route, puts it where it needs to be, and does all the stuff. Nothing changes here. But if you go to /about, we now see we have our about page. The routes are already set up for us. If we go look at our routes, we have the route path / going to our homepage, and then our route path about going to our about page.

00:22:29 - Anthony Campolo

So let's edit this. Now we're also going to pull the link out.

00:22:46 - Anthony Campolo

All right, so now what we want to do is create our layout. As we talked about in the slides, our layout is our big box that sits around our pages. So we want to be able to navigate from one page to the other and have a stable nav bar set up. We're also going to use a generator for this: yarn redwood generate layout, and we're just going to call this a blog layout.

00:23:18 - Anthony Campolo

So now instead of being in our pages folder, this is going to go to our layouts folder and create this blog layout. This is the part that's going to involve a bit of typing.

00:23:32 - Anthony Campolo

We want to bring in our link and our routes. If you've used React Router, this should be fairly standard stuff. RedwoodJS actually has its own brand-new router that they made themselves, which is kind of a crazy thing to do, but it seems to have worked out. It's very well integrated, and so far I have not had any issues working with it.

00:23:54 - Anthony Campolo

So we're going to create a header with an H1. We're going to take our header from before and then create a nav. Our nav is going to have an unordered list, and this unordered list is going to contain our links to our routes. And then that's going to go home.

00:24:47 - Anthony Campolo

And now we have all we need to actually spit out our children.

00:24:57 - Anthony Campolo

Okay, that should be it. So right now nothing is going to happen because we've created our blog layout, but now we have to actually bring it into our pages.

00:25:08 - Anthony Campolo

Let's go back to our homepage. What we're going to do is import that component. So we're going to import BlogLayout from 'src/layouts'. Now we don't have to do any of these dot-slashes to navigate through our directories. We also don't have to put .js or anything like that. This is because Redwood has a lot going on underneath that handles all that for you. It makes for a slightly easier developing experience — you just have to say the directory of the thing you're importing. You don't have to think about which directory you're in relative to that directory, which is a small but really nice thing that once you have it, you always want it.

00:25:55 - Anthony Campolo

Okay, so now we're going to pull in our blog layout and basically wrap our content in it. So now we have our layout, which is this navigation bar. Now if we go to our about page, we're not going to see it because we haven't imported the blog layout to our about page yet. So let's do that.

00:26:40 - Anthony Campolo

So now we can go between our home and about page and the nav stays there. We just have our content living on our about page and on our home page.

00:26:51 - Anthony Campolo

Now we've got our pages set up. What we're going to do now is get our database going. The first thing we have to do is go to our Prisma folder and define our post model. Let me just take this out so it's a little cleaner. It gives you a default user example — we're going to change this to create our post. So we have ID, which is int, ID, default auto-increment. That's all good. But we want a title — it doesn't necessarily have to be unique. And then a body, which will also be string. And then this will be createdAt, which is going to be DateTime type, and we'll use the now function.

00:27:56 - Anthony Campolo

So now we have this — this is our Prisma schema. Now we're going to run a bunch of commands to actually generate the database, get it up, and then scaffold a whole bunch of stuff. First thing we do is yarn redwood db save. This is going to spit out a ton of stuff that I want to show you.

00:28:24 - Anthony Campolo

Just to point out — because we're streaming, things will be a little sluggish. This goes much, much faster when you're developing locally.

00:28:36 - Anthony Campolo

This created our database migration. Essentially our CLI is reaching into Prisma's CLI — this is more of a Prisma thing than a Redwood thing. If you do something like I did with Fauna, you won't have access to any of this. But what we did here is create our migration. We now have this migration folder inside Prisma, which has a readme explaining what the migration did and showing you the SQL tables. Let me close all these.

00:29:20 - Anthony Campolo

There we go. This is the SQL it's using in SQLite, which will also work with Postgres. SQLite and Postgres are fairly similar types of SQL — all SQL databases have slightly different SQL, if you don't know that. We're creating a table of posts and then creating all the columns that go along with that post: we have the ID (integer), title (text, like a string), body (text, like a string), and createdAt (DateTime). Even if you don't know SQL very well, this should map fairly well to what you're looking at in your Prisma schema, which then also maps very well to your schema definition language.

00:30:03 - Anthony Campolo

So we're kind of writing the same thing in all these different languages so that the whole data flow understands the types of the entities we're working with. All right, so we did db save. Now we're going to do yarn redwood db up. That's going to take a second. And then after this, we're going to do our scaffold command, which is going to create our entire blog admin interface.

00:30:36 - Anthony Campolo

So this basically now ran those SQL commands. You see we have the three raw SQL commands and the one create table command. Now this is pretty much good to go.

00:30:47 - Anthony Campolo

So now what we're going to do is yarn redwood generate scaffold post. This is going to make a lot of pages, a lot of cells, and create services — a whole bunch of stuff.

00:31:09 - Anthony Campolo

In my blog series, in part four, I basically go through all of this generated code and explain it bit by bit, showing how the code maps to the components and how they look. If you're interested in really going deep into what all this code is doing, that's what the series is for.

00:31:23 - Anthony Campolo

As you can see, this generated a whole bunch of stuff. Before we even look at any of that, let's see what this stuff actually does. We're going to go to the posts route. This is our kind of admin interface. As you can see, it says we have no posts yet. So when I showed you the cell with the loading state, the empty state, the failure state, and the success state — right now this is in the empty state. So if we hit "Create one" or "New Post," it takes us to our new route and we can create a thing.

00:32:08 - Anthony Campolo

So, "Hello Denver." And there you go. That is our post. Now if we want to edit or view it, we can show it. So now this is our post page. Let's say we want to edit the body — let's say "dude saw." Now we have our edited body. Let's create another one.

00:32:42 - Anthony Campolo

This will be deleted. Now if we want to delete it, we click "Delete." It's going to ask if you're sure, and you hit "OK" — and bam, post deleted, post is gone.

00:32:59 - Anthony Campolo

We are looking directly into our database right now and interacting with it. And as you can see, all of the CRUD capabilities are already there — all this work that I'm not doing, as DHH would say.

00:33:14 - Anthony Campolo

So now that we have this, let's just create a couple extra posts.

00:33:30 - Anthony Campolo

Okay, so now what we want to do — and this will be the last part — is create a cell that we can put on our homepage that's going to show all of our posts and let us format them however we want. So we're going to do yarn redwood generate cell, and this will be "blog posts," because it's going to be a cell that fetches all of our blog posts. Now this is in our web front end. We've looked at layouts, we've looked at pages, but we haven't looked yet in our components folder.

00:34:11 - Anthony Campolo

This is all the stuff that was generated when we did the scaffold — the stuff I go into in the articles but don't have time to talk about today. What we want to look at right now is our blog posts cell. Right now this is basically our cell in a default state. We only have to change a couple things. We want to change this to posts, that to posts, that to posts — so everything speaks the right language. Our schema definition language and our services all have this as posts. So we can bring this into our project now.

00:34:53 - Anthony Campolo

So if we go to our homepage, we're going to import BlogPostsCell from 'src/components'. And then we're going to put it inside our layout, right under "This is the homepage" — just a single self-closing tag. Okay, so now if we go back to our homepage.

00:35:35 - Anthony Campolo

Okay, so now — you saw how it briefly showed "loading." It shows the loading state while it's loading the data, and then it's rendering out our data. Right now it's just rendering out the ID and letting us know what type we're getting. The type is post.

00:36:03 - Anthony Campolo

So if we want to get more than just the ID, we change our query here, because this is our GraphQL query that's pulling out the data. So instead of just id, we also want title, body, and createdAt. Now you're going to see on the right — we're actually seeing our posts, our title, our body, and our createdAt. But we want that to look a little nicer, so we can change our output here at the bottom.

00:36:36 - Anthony Campolo

Right now it's just using JSON.stringify to spit out the data. This is actually a really nice default because it guarantees you'll see your data regardless of what kind of query you're doing. But we want to actually do something with it. We're going to map over our posts.

00:36:55 - Anthony Campolo

If you're used to React, you've probably done this a ton of times. So we're going to do an article with a key — this is for the post ID, because React yells at you if you don't do this. And then a header, and this is going to take in our post title. Then underneath our header we're going to create a div, and this is what's going to show our createdAt time — when the post was created. And then we want to see the body of the post as well. I think that should do it. Killer.

00:37:57 - Anthony Campolo

All right, so now we see our post title, when the post was created, and our post body — and it's rendering each of our posts. And then if we really want to get fancy, we can use our GraphQL editor, our IDE type thing.

00:38:14 - Anthony Campolo

This basically lets us query directly. So we want to do posts — we'll pop in the ID and title. There are our posts. Boom, done.

00:38:36 - Anthony Campolo

All right, that's the whole presentation. That is the first half of the tutorial — basically parts one and two. If you watch those videos, you'll end up right here in the project. Then in part three, you build out a contact form, and in part four, you actually deploy this to Netlify and Heroku and create authentication using Netlify's built-in login form. So you're halfway to a fully done app, deployed with a database with authentication.

00:39:09 - Thomas (host/moderator)

Awesome. Thank you, Anthony, so much. Appreciate it. I actually have a ton of questions, but I'll start off with just this one. Let's say somebody wanted to dive into Redwood today and ship something to production. Who's the right person to do that right now? What's the role, or what product are they building? Who's the ideal person to jump into this today?

00:39:31 - Anthony Campolo

So, like, what kind of product is it aimed at specifically?

00:39:35 - Thomas (host/moderator)

Yeah, I mean, I assume it's trying to be generic.

00:39:38 - Anthony Campolo

Sure. Well, I can say that the first production app built with it was Predict Covid. This came out back in March — it was used to create a real-time data visualization tool to visualize Covid data. It basically showed how we were trailing Italy by about 10 days.

00:40:04 - Anthony Campolo

So the blog is a very simple, basic way to understand how the different parts of the framework work together. It's not a very good example of what the framework is capable of — this is something they always point out. For me personally, it was incredibly useful just to learn Redwood, and that's why I think it's a good way to present it.

00:40:25 - Anthony Campolo

But it can be used for really high-level production because the whole idea is that it wants to give you the availability, scalability, performance, and security of a Jamstack site while also letting you hook into a backend. So it's trying to push the Jamstack outside of what it's typically used for into more high-level production applications. It's about pushing the envelope of what the Jamstack can do. And by using your serverless functions, you're extending the Jamstack further out into other parts of the stack.

00:41:04 - Thomas (host/moderator)

Just to clarify on that point — all of that backend stuff you're building with the GraphQL and the Postgres stuff in your tutorial, that all gets deployed to a serverless Lambda?

00:41:16 - Anthony Campolo

That's a good point. The way this tutorial is set up, it eventually gets you deployed to Heroku Postgres. You have a Postgres server. However, just yesterday, Fauna published a blog article that I wrote showing how you can connect Redwood to FaunaDB. So when you connect to FaunaDB, you have a literally serverless database — which is, as far as I know, the first time anyone's ever put all that tech together. It's obviously still rudimentary, a little hacky, but it is possible. And if someone wanted to follow along with that and build out a production app from it, you'd be able to scale completely serverless with your database as you build out your app.

00:42:01 - Thomas (host/moderator)

Yeah, I love the potential here. I'm all in on serverless — all my data is on Dynamo and Lambda functions. And this is great, being able to split this kind of stuff up. So it's awesome. Are we seeing any questions from the stream right now, Zach?

00:42:17 - Zach / event moderator

We're not right now.

00:42:20 - Anthony Campolo

Any questions, Zach?

00:42:21 - Thomas (host/moderator)

Yeah, Zach, do you have anything?

00:42:24 - Zach / event moderator

Yeah, not so much questions, but maybe just some points I've noticed. I've heard about Redwood for a little bit, so it was really cool to see a deep dive of how it all works together. And even the point about a serverless database — I feel like that's the one piece that's like, "How can anyone make that serverless?" It seems like at least Fauna, with the fact that Redwood can connect into it, you could have a fully serverless application, which is pretty cool. And also your comment on how this could be used for enterprise apps — I feel like that's the one thing kind of holding back the Jamstack. Everybody's still trying to figure out how to make this scale for a large enterprise application. I feel like maybe Redwood fits that mold for what some people are looking for.

00:43:13 - Anthony Campolo

Yeah, absolutely. Because if you think about it, Tom built out GitHub with a team of people using Ruby on Rails. Obviously you eventually hit scaling issues with that, but it gets you to the point where you even have scaling issues. It's the idea that this is going to get you 80% of the way there, and then you can start architecting it with the different serverless parts to make it really scale. But it gives you a ton of stuff from the beginning and helps you think architecturally long-term about how to make it maintainable.

00:43:46 - Anthony Campolo

This is something I didn't really have time to get into with the services — it's very much about isolating your business logic into the services. Tom has built out a lot of very large, very high-scale applications. He already has an idea of how some of these projects go off the rails. He designed the architecture with serverless in mind, separating out your business logic in a way that makes it easy to scale. So as you guys have been saying, the database part is really all you have to figure out, and then everything else is already primed to be this massively scalable thing that can just go to the moon.

00:44:28 - Zach / event moderator

We did get a question from Sauce Hammer. He asks: does Redwood provide any built-in tooling for authorization and authentication?

00:44:38 - Anthony Campolo

Totally, yeah. As I said, I went through the first half of the tutorial. If you go and watch the official Redwood tutorial on their YouTube page — actually it's on Rob's YouTube page, but if you just search "Redwood tutorial" on YouTube, you'll find it. The very last part, part four, is where you build out authentication. Redwood has an auth library and an auth generator. It is by far the simplest authentication I've ever used — it was actually really incredible. The only reason I didn't get into it is that it would have taken another half hour to get us deployed and get all that going. But yeah, it has a fantastic auth story. And there's a video of Tom explaining auth in about 5 minutes on YouTube as well.

00:45:25 - Zach / event moderator

All right, not seeing any extra questions right now.

00:45:33 - Anthony Campolo

Looks like we just hit the hour mark. Pretty perfect.

00:45:37 - Thomas (host/moderator)

Cool.

00:45:38 - Anthony Campolo

Thank you, Anthony.

00:45:38 - Thomas (host/moderator)

That was a great dive into Redwood. Like Zach, I'd never seen it before, so thank you for going over all that. That's great.

00:45:45 - Anthony Campolo

Yeah, I hope it all made sense. I'm super passionate about this framework. I've spent a lot of time learning it and getting into it and working a lot with the community. It's a great team of people working on it — a really cool project with a lot of positive energy around it.

00:46:00 - Anthony Campolo

We really want any type of contributor. I'm someone who, as you said, is a bootcamp student — I'm not a professional developer at all. I'm a professional delivery man. But I've been able to get spun up with this and start seriously contributing, whether that's writing articles about it or helping out by building proof of concepts like I did with FaunaDB. So it's empowering. It's a really empowering framework.

00:46:26 - Anthony Campolo

Yeah, awesome.