RedwoodJS Walkthrough

Episode Description

Nick Taylor and Anthony Campolo build a full-stack RedwoodJS app from scratch, exploring its Rails-inspired conventions, Prisma ORM, GraphQL, and deploying to Netlify.

Episode Summary

Nick Taylor welcomes Anthony Campolo to walk through building a RedwoodJS application from the ground up. Anthony shares how he discovered Redwood while attending a coding boot camp, eventually joining its core team before even landing his first developer job — a testament to the career-opening power of open source contribution. The stream then shifts into a hands-on tutorial where they scaffold a new Redwood project, exploring its opinionated structure: a React frontend, Prisma ORM for database modeling, and a GraphQL Yoga backend that ties everything together. They generate pages, set up routing, create a Prisma schema for blog posts, and spin up a PostgreSQL database using Railway's account-free provisioning feature. The scaffold command produces full CRUD functionality instantly, and they explore Redwood's "cell" pattern for managing data-fetching states like loading, empty, error, and success. Deployment to Netlify hits some environment variable snags when done purely through the CLI, but succeeds once connected through a GitHub repo — illustrating the importance of following battle-tested workflows. Anthony notes that TypeScript support, SSR, and a potential Vite migration are on Redwood's roadmap post-v1, making it a framework worth watching as it matures.

Chapters

00:00:00 - Introductions and Career Origin Stories

Nick Taylor kicks off the stream after a month-and-a-half hiatus, introducing Anthony Campolo as a RedwoodJS core team member who also works at QuickNode. Anthony traces his path from music teacher to summer camp administrator to self-taught coder, explaining how he eventually enrolled in Lambda School's boot camp before dropping out once he found greater traction contributing to RedwoodJS's open source project.

Nick shares his own less dramatic path through Quebec's CEGEP system into computer science, noting that much of his real web development learning happened outside the classroom. Both reflect on how open source contribution opened professional doors — Nick through sustained contributions to the Dev.to codebase, and Anthony through Redwood's welcoming community, particularly the mentorship of co-creator David Price.

00:07:10 - What Is RedwoodJS and How It Works

Anthony breaks down Redwood's architecture using the model-view-controller analogy: the view is a standard React frontend, the model layer uses Prisma as its ORM for database interactions, and the controller is a GraphQL Yoga server that connects the two. He explains how Prisma translates JavaScript into SQL and handles database migrations, while the GraphQL layer is largely abstracted away by Redwood's CLI generators.

This structure made Redwood ideal for Anthony as a boot camp student loaded with React knowledge but lacking backend experience. The framework filled in the gaps, and his deepening involvement led to core team membership and ultimately a job offer when a CEO mistakenly thought he was employed by Redwood. The discussion highlights how Redwood's conventions minimize the amount of backend knowledge a developer needs to get started.

00:14:49 - Scaffolding the Project and Generating Pages

The pair begins the hands-on portion by creating a new Redwood app called "Trees" using the yarn create command. While dependencies install, Anthony explains Redwood's seven deployment targets and how a single CLI command can configure a project for any provider. They generate a homepage and an about page, examining how Redwood's file conventions, router, and co-located test and Storybook files all wire together automatically.

Nick appreciates the co-location pattern and the fact that Storybook comes pre-configured. They look at the routes file to understand how Redwood maps pages to URL paths using named route functions, noting that the generator automatically updates routing — eliminating the piecemeal setup common in other frameworks. Anthony briefly mentions built-in auth support through private routes, teasing a feature they won't cover today.

00:23:10 - Exploring the Project Structure and Prisma Schema

They open the project in VS Code and examine its three-package-JSON structure: root, web, and API. Anthony walks through the web package's dependencies — React, Redwood's router, and its form library built on React Hook Form — before pivoting to the API side. They open the Prisma schema file and define a Post model with title, body, and a created-at timestamp, switching the database provider from SQLite to PostgreSQL.

To provision a database, Anthony introduces Railway's remarkable account-free workflow where a PostgreSQL instance spins up instantly in a container. Nick is impressed by the frictionless experience, and they copy the connection string into the project's environment file. They run Prisma migrate to generate and apply SQL migrations, confirming the new post table appears in Railway's dashboard.

00:37:04 - Scaffold Command, Cells, and CRUD Functionality

Anthony introduces the scaffold command as Redwood's most powerful generator, creating an entire CRUD interface for the Post model in one step. They navigate to the posts route and create a blog post through the auto-generated admin UI, which includes listing, showing, editing, and deleting records. Nick notes how similar this feels to Rails scaffolding.

They then generate a "cell" — Redwood's pattern for data fetching that provides four built-in states: loading, empty, failure, and success. After wiring the blog posts cell into the homepage with its GraphQL query, the post data renders on the home page. Anthony explains how cells encapsulate both queries and mutations, giving developers a fully integrated GraphQL-powered data layer without requiring deep GraphQL expertise.

00:55:47 - Deploying to Netlify and Troubleshooting

They run Redwood's deploy setup command for Netlify, which generates a netlify.toml with the correct build configuration including function bundling and SPA redirect rules. The first CLI-based deploy hits environment variable issues since the site wasn't yet linked to a GitHub repository. After multiple attempts and some confusion around the Netlify dashboard, they push the code to GitHub and connect the repo through Netlify's UI, which resolves the problem.

Anthony simultaneously deploys his own fork successfully, confirming the framework itself works correctly. The debugging process illustrates why following the standard repo-connected deployment workflow matters. Nick shares his positive impressions of Redwood's speed and developer experience, and Anthony mentions upcoming priorities like SSR support, React 18 integration, and a potential Vite migration as post-v1 goals for the framework.

01:17:06 - Wrap-Up and Final Thoughts

Nick and Anthony reflect on the stream, with Nick praising Redwood's rapid scaffolding and convention-driven workflow while acknowledging the deployment hiccup as a live-coding reality. Anthony suggests the CLI deployment issue could be useful feedback for Netlify's integration team. They share links to Redwood's website and their respective social accounts for viewers to follow.

The conversation closes with lighthearted banter about auto-generated site names, live captioning mishaps, and streaming schedules. Anthony notes that SSR doesn't exist in Redwood yet but promises it's coming, giving viewers a reason to tune in for a future stream. Nick confirms he'll be streaming on Fridays going forward after settling into his new role at Netlify.

Transcript

00:00:00 - Nick Taylor

Hey folks, it's been a minute. My name's Nick Taylor. I'm a staff software engineer at Netlify and I'm streaming again on my own stream, livecoding.ca. I've been pretty busy ramping up at Netlify, so I haven't really streamed in about a month and a half. There may be some kinks in today's stream, but I'm feeling pretty confident that things won't blow up. Anyways, I'm here today with Anthony Campolo, who's a RedwoodJS core team member, among other things. Thanks for popping on, Anthony. I'm super stoked to learn about Redwood today. Just let the folks know who you are and what you're up to.

00:00:43 - Anthony Campolo

Yeah, for sure. Thanks for having me, Nick. This will be a lot of fun. We've already done some streams before. Back when you were doing the Dev.to stream, I came on for StepZen, and that was actually how I think you and I first got to know each other. You know Lucia really well, my former coworker. But yeah, I actually work at QuickNode now, doing blockchain/Web3 stuff. That's a lot of fun, but that'll be a stream for another time if your audience finds that interesting. Today we're going to be talking about RedwoodJS, which is a really interesting framework I've been involved with for a very long time. It's actually been the stepping stone for launching my entire career. My history and Redwood's history are all entwined with each other, so I can tell them both at the same time. When I was in my mid to late twenties, I decided to make a career pivot into coding. Origin story: I was originally a music teacher and did about a year of classroom teaching — wind ensemble, marching band, that kind of stuff.

00:01:58 - Anthony Campolo

I loved music and I loved teaching music. There was a summer camp where I would teach rock band, which was really cool. But doing the traditional marching band and ensemble thing wasn't really how I came up in music. I appreciated it, but I didn't really love it. And there are so many things about being a classroom teacher that I wasn't really into either — the environment didn't gel with the kind of teaching I enjoyed doing. So I ended up in a position where I had this degree that could only really lead to one type of paying job that I didn't want to do. So I got into coding. And I think you were a career switcher too — is that the case?

00:02:42 - Nick Taylor

No, I wasn't a career switcher. I feel like my origin story is kind of boring — I don't want to say it's a classic story, but I had no idea what I wanted to do. I did go to university and I studied computer science, but really just because of a few things. I was pretty decent in math. And they have something here in Quebec called CÉGEP. It's like... sorry, grade 12 and 13. Do the States go to grade 13, or is it—

00:03:17 - Anthony Campolo

No, grade 12, yeah. And we don't call it 12, we call it being a senior.

00:03:21 - Nick Taylor

Okay. Because in the other provinces in Canada there's grade 12 and 13, but in Quebec they have CÉGEP, which is like pre-university. It's actually kind of cool because university can be expensive and this costs way less. I started off in pure and applied sciences because, you know, I guess I'll do that. I don't know if you had friends growing up where they're like, "I know I'm going to be this" — when they're, like, 22 or whatever. There was one person I knew who wanted to be a doctor their whole life.

00:03:55 - Anthony Campolo

I mean, I knew I wanted to be a musician. Most of the people I knew who were quite certain about what they were going to be wanted to be something they probably didn't end up being. So.

00:04:04 - Nick Taylor

Yeah. It's just kind of funny because I ended up taking computer science. I did okay in it, but this was pre-boot camps. They weren't even teaching Internet courses, really. Basically all the stuff I learned for web was on Notepad initially — that's how I learned HTML, JavaScript, and CSS. Over time I just got really interested in it, and outside of school is when I started learning more, which is kind of funny. You're supposed to apply yourself at school, and for me I was playing rugby and doing other things. And then after school I was done and just learning all these things. I still enjoy learning things. It's kind of boring in that sense because it's not like I was hacking the Matrix fresh out of the womb or whatever. That's why I say it's boring.

00:05:04 - Nick Taylor

Maybe it's not boring, but I enjoy what I do, so no complaints.

00:05:08 - Anthony Campolo

I think having a not-boring story is actually much worse, because the interesting stories are not that fun to live. So I got this degree that ended up being kind of useless to me, and I didn't really know what I was going to do with my life. So I spent four years running a performing arts summer camp. I'd mentioned how I was teaching music — rock band to middle school and high schoolers in the woods at camp, which was an awesome thing. I got a chance to run that company with the guy who was doing it, who ended up becoming a really good friend of mine, Doug. I did that for four years and it was mostly admin work — making sure the whole year was set up for camp, handling logistics, tuition, dietary restrictions, booking the buses, all that kind of stuff.

00:06:13 - Anthony Campolo

I learned a lot about running events, and that was great, but I also didn't really enjoy it that much. So eventually I decided to learn to code. At that point I was already in my mid to late twenties, driving for Uber just to make ends meet. While I was doing that, I was also learning to code and trying to self-teach. I did that for a while and didn't get very far. And then eventually I broke down and did a boot camp — an income share agreement boot camp, Lambda School, which is now known as Bloom Tech. Because they got so much bad press, they decided to change their name. So that gives you a little glimpse into that world. And so I ended up dropping out of the boot camp. Here's where Redwood enters the story. The reason I dropped out is because I was getting into open source and following projects like RedwoodJS, which is an open-source, full-stack JavaScript framework. So let me talk about what Redwood is.

00:07:10 - Anthony Campolo

So Redwood is a full-stack framework, like Ruby on Rails, in the sense that it has, if you imagine model-view-controller the way we used to talk about it with Ruby on Rails, the model, which is the database model, and then the controller, which mediates between the model, the backend, and the frontend, which is the view. The view is kind of what you see. And so with Redwood, the view is the frontend, and that's a React app. So if you've ever used a React app, that's the part of Redwood that should feel very familiar, because you're just writing React on the frontend. When we start going through the tutorial and building something out, you usually start by building a page and then writing the page in React. That's the whole deal. It's nice and simple. What gets interesting then is: what is the controller and the model? The model is a Prisma model. So have you ever used Prisma?

00:08:06 - Nick Taylor

Okay, I'm one of those folks that... I haven't used GraphQL that much still. I've had you on before.

00:08:15 - Anthony Campolo

And because Prisma's not GraphQL anymore, Prisma is just a database ORM. So if you ever... okay, different question. Have you ever used an ORM, like, of any kind?

00:08:27 - Nick Taylor

Yeah, yeah, I use an ORM. I used to do a lot of .NET prior to 2016, so they had an ORM in there and stuff. Entity Framework, I believe.

00:08:38 - Anthony Campolo

So if you've done that, that is going to be the most similar. Redwood is going to be more similar to that than anything else you've done, because the ORM is such an important part of how this all works. There's a philosophical battle around whether ORMs are even something we should use at all. And this is why, for a while, Prisma kind of refused to call themselves an ORM, because people were saying, "Oh, but ORMs are bad. Why would you use an ORM?" And now everyone loves Prisma, and Prisma is super, super popular. So they kind of won the battle on that. But it just translates your JavaScript to SQL, and it also does your database migrations. So they will essentially write SQL for you to set up your database. If you want to have a model and you want to have a post, like a blog post, that's going to be in the database, and you want that post to have a title, body, date, and a unique ID, then you basically write a Prisma model to do that. And that'll be one of the things we'll do in the tutorial.

00:09:41 - Anthony Campolo

And then you run a command and it sets up your database, and then you're pretty much good to go. So the GraphQL stuff is then the final piece of the puzzle, because your React frontend makes GraphQL calls into your backend, which is a GraphQL server, specifically GraphQL Yoga, which is maintained by the Guild. Redwood and the Guild actually work very closely together, and they helped us migrate our GraphQL server off of Apollo Server, then to Helix, and then to Yoga. And so if you don't know anything about GraphQL, then none of these terms mean anything, so don't worry about that. The great thing about the way Redwood is set up is you don't really need to know or care about the API for the most part. It's just going to be there, and we're going to run commands that are going to set up our database model and our schemas, and then all of our GraphQL stuff, and even the services that talk to the database. So for the most part, you really just write a lot of frontend stuff. And that's why Redwood was the perfect thing for me as a beginning boot camp student who learned a crap ton of React, because they basically taught me.

00:10:51 - Anthony Campolo

They had front-loaded me with all the knowledge I would need to use a framework like Redwood that fills in all of the other gaps. It's like the two puzzle pieces fit together. It enabled me, with the specific knowledge I had, to go much further. So that's why I got really into it. Then I ended up starting to go to contributor meetings, and eventually I got onto the core team, and this is all before I had a job. And so this is why I dropped out of the boot camp, because I saw that I was getting more traction and making better connections, and even getting more experience and learning more, through this whole thing with Redwood. And then in January 2021, eventually Anant, the CEO of StepZen, reached out to me and said, "Are you with Redwood, or are you open to other opportunities?" is what he said on LinkedIn. So I can say very definitively that I know Redwood is what got me this job, because he thought I was working for Redwood.

00:11:46 - Nick Taylor

Yeah, yeah. No, no, that's great. I mean, I can definitely attest to open source opening doors. That's how, where I was previously working, Forem, that runs Dev.to and CodeNewbies and stuff, I was contributing to open source prior to 2018, but I started contributing to the, at the time, Dev.to codebase, the Practical Dev codebase. But I had pretty much been contributing to that codebase for two years before I was hired there. And then when it came to... I didn't know the co-founders really well, but I had a private channel with them because I was contributing a lot. And then I happened to speak to one of them one day on Twitter, and I was interviewing somewhere else, and I just said, "Oh, it didn't work out." And then he's like, "Oh, by the way, we're hiring." And basically I had pretty much done a lot of the frontend there, and they needed a frontend. So in terms of the interview, it wasn't really like a coding test, because all the stuff I'd done was in there.

00:12:48 - Nick Taylor

And it wasn't just small things. I did a lot of stuff with the webpack components, testing, all kinds of things. So, 100 percent, I definitely... and I know bdougie, Brian Douglas, says this too: it opens up so many doors. I understand not everybody can, based on circumstances sometimes, but I can definitely say, if you're able to, it's a great way to meet people, have your work out in the open, and, you know, there are some negatives to open source, obviously, like maintainer burnout and stuff like that, but, you know.

00:13:27 - Anthony Campolo

Oh, yeah, yeah. I'm very, very interested in all of that, and I think there are ways to mitigate that. But yeah, for someone who's just trying to use that as a way to break in, though, you're not maintaining anything. You barely even know how to open a PR. So there's a whole separate world of issues. For them, the issues are more about actually finding a place that's welcoming and willing to work with someone who's new, and creating the space to enable them to go further. And that's what Redwood really, really did. And really David, especially David Price, went way out of his way to welcome not only me, but everyone who's been interested in Redwood and wants to contribute, regardless of whether they have any coding skills at all at the time.

00:14:13 - Nick Taylor

Yeah, yeah, no, for sure. No, that's great, and it's a super important point. I'm just trying to find David's Twitter. I know I follow him.

00:14:21 - Anthony Campolo

The David. The David Price. "The David Price" is what it is.

00:14:26 - Nick Taylor

Yep, the Price is right. There we go. Cool. Yeah.

00:14:29 - Anthony Campolo

Pretty easy to remember.

00:14:31 - Nick Taylor

Yeah, yeah. Okay, you got it. Cool, cool, cool. I caught David at some virtual conference, but I forget which one it was. He gave a demo of Redwood. I can't remember what conference it was. I mean, I'm sure he's given it at several places, but he's done a lot.

00:14:45 - Anthony Campolo

Yeah, he was the first guest on my podcast way back in the day.

00:14:49 - Nick Taylor

Yeah, yeah, yeah. So I guess why don't we kind of get into it? Let's maybe go from, like, zero to however far we can get. I'd like to explore how we set up, because I know one of the things you mentioned is Redwood is really trying to remove a lot of friction for people developing. They just want you to build things, right? And you're saying it's similar to Rails, so I'm guessing there's a lot of convention over configuration, I imagine, or...

00:15:21 - Anthony Campolo

Yep, convention over configuration. It is considered an opinionated framework, not an unopinionated framework. That's what I think makes a lot of sense about it, because JavaScript and React historically have been very unopinionated, which is why we've seen this Cambrian explosion of meta-frameworks built around React. Whether it's Next or Gatsby or Blitz or Redwood or Remix, there are so many of them. And this is one that is kind of furthest in that pendulum swing back toward being opinionated, saying, "We want to make this as opinionated, as convention-oriented, as possible," because this is what we need to tame the beast that is React, you know?

00:16:04 - Nick Taylor

Yeah, for sure. And I can see that being a good fit. I mean, when I was working at Forem, it's mainly a Rails shop, so you know there are a lot of conventions. You get stuff scaffolded and a lot of stuff for free. It uses Active Record, so you get kind of ORM-like stuff too. Every time I read about a framework coming out, even Blitz, I think, tries to model itself on a Rails-like experience because people keep trying to replicate that. So it's going to be cool to see it.

00:16:35 - Anthony Campolo

Although Blitz 2.0 is going to be a completely different thing now. So all the things you've heard about Blitz, you have to now unlearn all of them, because Blitz is a different thing now.

00:16:44 - Nick Taylor

Good to know. Good to know.

00:16:45 - Anthony Campolo

All right, which is cool, because it's going to be interesting. But anyway, the first thing we're going to do... do you have Yarn?

00:16:50 - Nick Taylor

Yeah, I've got Yarn. Let me just switch to coding view here. Because it's the first time I've streamed with a guest in a while on my new Mac with a widescreen, everything's completely different. We might get a little Inception here for one split second, but that's all good. Yeah, there we go. That's what I thought. Okay, let's do this. Yeah, there's the Inception I was waiting for. All right, Kit infinite scroll. All right, so we got Redwood here. All right, let's go to VS Code. All right, cool, cool. You see my screen? Okay, I zoomed in a bit.

00:17:28 - Anthony Campolo

Yeah.

00:17:29 - Nick Taylor

Okay, cool. All right, so yeah, I do have Yarn. I believe I have Yarn version 1.22. Is that okay?

00:17:38 - Anthony Campolo

Yeah, yeah, that should be fine. So the first thing we're doing is yarn create redwood-app.

00:17:51 - Nick Taylor

Okay.

00:17:52 - Anthony Campolo

Yep. Then a space, and then the name, what you want to name your project.

00:17:56 - Nick Taylor

All right, let's call it Trees because it's Redwood.

00:18:01 - Anthony Campolo

And this is going to take probably at least a minute, because this downloads a whole bunch of dependencies. So while that's going, what we're going to do after this is start running some generate commands, which are going to generate, first, our homepage. And as we go on, we're going to be using the CLI a lot. The CLI does a ton of stuff for you, because not only does it generate code in your project, it can also set things up. We have seven deployment targets right now, and let's see if I can name them all. We got Netlify, which of course we'll be doing today, Vercel, Render, Layer0, Flightcontrol, Fly, and the Serverless Framework. Out of those seven, not all of them, but most of them, and hopefully one day all of them, you can run a command, basically yarn redwood setup deploy, and then either netlify, vercel, serverless, or render, whichever one you want to do. And then it actually configures your project so you can deploy it to that provider. So you basically write your code independent of where it's going to be deployed, and then it handles how to actually make it deployable to that thing.

00:19:21 - Anthony Campolo

So if you want, you could deploy your thing in three different places. Once your code is finished and you've developed it, you can create three different branches, run a different set of commands on each of them, point each of those at the provider, and then each of those will deploy. It does the entire thing for you. Crazy.

00:19:36 - Nick Taylor

Gotcha. And it's good you bring that up because the team I work on at Netlify is the ecosystem team, and I'm specifically working with the frameworks, integrating the frameworks so they work seamlessly. So you might see a PR from me or one of my coworkers.

00:19:54 - Anthony Campolo

Well, this is what's so great: Redwood was built for Netlify, and then we made it agnostic to everything else. This is kind of an important history bit that we should talk about. Tom Preston Warner was the original CEO of GitHub, the original creator of Jekyll, the static site generator, and TOML and SemVer and all this stuff. And he is with Peter Pistorius, the creator of Redwood. Before creating Redwood, he was also one of the first investors in Netlify. So him and Matt go way back, and he's been on this kind of Jamstack journey since the beginning. Redwood was about this idea of bringing full stack to the Jamstack, which now... Redwood has entirely dropped the Jamstack terminology. They have scrubbed it from the site because they felt that it confused people, and people didn't really get what it meant for the full stack to go Jamstack, because they don't listen to my podcast, obviously, Full Stack Jamstack. But Tom is kind of the person who's been on this whole journey from the beginning. And when they were building it, they basically built it so it would be deployable on Netlify very, very easily.

00:21:07 - Anthony Campolo

So that's why all the conventions were kind of built to work with things like Netlify Functions. And Netlify is kind of a frontend CDN. It's been a journey of expanding out from that to make it work on an actual server, to make it work in a Docker container, and all this other kind of stuff. Netlify is what it was originally built for. So it still works very nicely on Netlify, if that's what you do. It'll be a good case study for you to look at: how do framework authors who build a framework around your platform think about these kinds of things?

00:21:40 - Nick Taylor

Yeah, yeah. I know with Remix, because I was working on integrating stuff with Edge Functions with them, they have deploy targets for the different deployment platforms like Vercel, Netlify, Cloudflare, et cetera. So yeah, I think it makes sense to do kind of a similar thing in Redwood, where you bake it in when you get it set up the first time, because if you know you're deploying it somewhere, it'll just do that out of the box instead of being an extra step. It's one of those remove-friction kinds of things again.

00:22:13 - Anthony Campolo

And it's not even friction sometimes. That can be the longest, most complicated part: figuring out how to actually get your thing online, you know?

00:22:19 - Nick Taylor

Yeah, yeah, exactly. It works amazing on my localhost. Cool, cool.

00:22:23 - Anthony Campolo

All right, so let's cd into the project. Just cd into trees and then kick off the dev server, as the little instruction there says: yarn rw dev.

00:22:36 - Nick Taylor

Oh, is that an .env in the project, or is this mine?

00:22:41 - Anthony Campolo

This is not a normal thing that happens. This is your machine doing this. So you don't want to mess with it. It's set up specifically that way.

00:22:51 - Nick Taylor

Cool, cool. All right, cool. There's an .env file in there that got generated, I guess.

00:22:58 - Anthony Campolo

Yeah. And there's already a .gitignore that has the .env in it. So your whole environment-variable gitignore stuff, that's all handled for you. That's one part of the convention, so you don't have to worry about any of that.

00:23:10 - Nick Taylor

Yeah, yeah. Cool, cool. All right. So. All right, so we're in the root of the project.

00:23:14 - Anthony Campolo

You should actually open this in VS Code. Because right now... oh yeah, yeah, exactly.

00:23:20 - Nick Taylor

Okay, cool. All right, gonna close this a bit. It's kind of huge now. Okay, so we got a bunch of things in here. Before we start digging into things, do you want to maybe briefly explain the folders first off?

00:23:35 - Anthony Campolo

Yeah, and I would say don't install any, any of these except for Prisma.

00:23:39 - Nick Taylor

Okay. Install. Do that. Cancel. Okay, cancel Prisma install. I installed something else, I think. But anyways, too late. YOLO. All right.

00:23:52 - Anthony Campolo

Yeah. I mean, they're all pretty standard stuff. It's not going to wreck anything. But I try to keep my thing as lean as possible and install as few of these as actually necessary.

00:24:02 - Nick Taylor

Yeah, yeah, yeah, for sure.

00:24:04 - Anthony Campolo

Yeah. But anyway, the main thing is you have your web folder and your api folder. So let's just look at the web folder for now. Don't even look at the api folder. We'll get into that later. Actually, start by going into the package.json. This is something I don't usually have people look at in the web side. There are three package.json files: a root package.json, a web package.json, and an api package.json. So this is the web one. And we see we have React, React DOM, and then some RedwoodJS ones. We have @redwoodjs/web, @redwoodjs/router, and @redwoodjs/forms. This should tip you off to the fact that Redwood has its own router built into it. This would be closer to the equivalent of Next in the sense that it's a very built-out React frontend with a lot of opinions and a router kind of built into it, and also a whole form abstraction built into it. And that's using React Hook Form.

00:25:03 - Nick Taylor

Okay, gotcha. And so the router that comes with this, is it file-based, or no? Is it just the hook doing other stuff, or...?

00:25:14 - Anthony Campolo

So you can't really explain it in a simple term, because it's basically built into the conventions of Redwood. Redwood knows what a page is because you have a pages folder, and every file that's a page is something-something Page. Then Redwood can basically take the pages and map them to an actual route with something they call named route functions. So they kind of have their own router conventions that allow it all to work. Once we build a page, I can show you all the stuff. It'll make more sense than talking about it theoretically. So let's actually generate a page now and then take a look at that. Go back to your terminal.

00:25:56 - Nick Taylor

Yep. All right.

00:25:58 - Anthony Campolo

And then we're good.

00:25:59 - Nick Taylor

Just let me change this. Okay, cool. Yeah.

00:26:01 - Anthony Campolo

And then we're gonna run yarn rw g page home /. The g is short for generate. You could type out all of generate, but let's just do g. With all these generate commands, it'll look something like this, and you'll be generating something. We're going to be generating a page this time, home, and we want it to go to just the forward-slash route on our page. So that's the whole command.

00:26:44 - Nick Taylor

Okay, here we go. Whoops.

00:26:46 - Anthony Campolo

No, don't do that.

00:26:48 - Nick Taylor

Yeah, yeah, no, I think Fizz is thinking something. Okay.

00:26:52 - Anthony Campolo

This is why Warp doesn't do stuff like that.

00:26:54 - Nick Taylor

Yeah, yeah. Okay, so let's look at this quickly. You're using Storybook because there's a .stories file, so they're all co-located, which I like. People have opinions on all these things, like folder structure, but I think it makes sense, for me at least, to have the test close to where your thing is. So this is nice. You get a unit test or a component test file, you get a Storybook file, and then you get the actual homepage, which is a React component, I guess.

00:27:24 - Anthony Campolo

Yep. And this goes back to the conventions, because Storybook is already installed and configured and will open on its own port and that whole deal. That's another really nice thing for someone like me who was a beginner. I'd never set up Storybook myself. So it wasn't until I used Redwood that I could just run a command and then Storybook pops up, and I was like, "Oh, this is Storybook."

00:27:45 - Nick Taylor

Yeah, no, I'm a fan of Storybook. There are all kinds of platforms to do this, but I've been pretty happy with Storybook. We're not going to dive into Storybook today because it's kind of a bit outside the whole thing, but yeah, it's good to note that it's included with it. I dropped a link to Storybook for folks who might want to check it out.

00:28:04 - Anthony Campolo

Yeah, Michael Chan works for Chromatic now, the company behind Storybook, and he's been getting very into Redwood. Redwood gets Storybook, I think, more than most frameworks. So, pretty cool.

00:28:16 - Nick Taylor

That's nice. Awesome.

00:28:17 - Anthony Campolo

Okay, let's start our development server now. So we're going to do yarn rw dev, and make sure there's a space between. Yep. And then I think this will open your browser automatically, which is something you can configure, because that bothers a lot of people. But for now, let's just see what happens.

00:28:37 - Nick Taylor

All right, cool. So it's opening it up, and all right, cool, so we got our homepage. Nice. Let me just...

00:28:44 - Anthony Campolo

And you can make it.

00:28:44 - Nick Taylor

Yeah, okay. It's massive, but yeah. Cool. All right, let's close these. Yeah. Okay, so we scaffolded this route and it generated pages, including the HomePage.js, which is our page component, I imagine. And yeah, we hit the slash, or if there's no slash it just goes to the root, and we got our homepage. So yeah, it looks pretty cool.

00:29:08 - Anthony Campolo

So there's two things we should look at. We should look at this actual homepage file, and then also the Routes.js file, because that'll explain how the router's working.

00:29:18 - Nick Taylor

Yeah, cool. Let me just hide this for a sec. All right. And let's go to HomePage.js. Okay, so... all right. Oh, it installed Import Cost. That's what you were saying to avoid. I know that can be a memory hog sometimes, but whatever, it's in there. Hopefully my M1 doesn't explode. Okay, cool. So yeah, we got the page component here. I see some things already that look interesting to me. I mean, there's the Link component, which generates the proper URLs for routes, and there's a Meta tag. Is that using something like Helmet under the hood to inject that into the head of the document, or...?

00:30:02 - Anthony Campolo

That's a good question. I know that we used to use React Helmet, and then we created this meta tag. I'm not sure exactly whether we use Helmet or if we just kind of baked in our own thing, but the important thing is that... oh, wait, yeah, there we go. Redwood uses React Helmet Async underneath.

00:30:19 - Nick Taylor

Okay.

00:30:20 - Anthony Campolo

So yeah, that's just another kind of convention it gives you, where most people would be doing this themselves. Next has a Head component as well. And this is for things like title, description, kind of SEO-type stuff.

00:30:35 - Nick Taylor

Okay. Yeah, cool, cool. Awesome. All right. And those are all being pulled in now. I did have a question. So we generated this with JavaScript. A lot of frameworks nowadays support TypeScript out of the box as an option. Is that something available in Redwood, or is that something you bolt on after?

00:30:54 - Anthony Campolo

Yes, TypeScript is hard-fought and won. We do have TypeScript support. It took us an extremely long time because Redwood was not built with TypeScript in mind. And actually, I talked to Orta. Orta actually is on the Redwood team now, who's a TypeScript kind of legend. And he was saying that he's never seen anything like it before, where it's like building a TypeScript layer on top of a dynamic JavaScript codebase. He was saying it actually shows the potential of what TypeScript could be, because it can be molded to something like this that was really not meant to be TypeScript in the first place. But it took over a year of multiple people writing types for a very, very long time to get there. So I don't ever use TypeScript, so we won't do that today. But if you want to use TypeScript, and I know many people running Redwood in production are running it in TypeScript, so yeah, that is a thing you can do.

00:31:52 - Nick Taylor

Cool. Cool. Awesome. Yeah, just wanted to ask, is all. Okay, yeah. So we got the page here. Obviously, I imagine if I change this to Trees and come back here, I should see that the title says Trees now, which it does. So, is this running React 18 or 17?

00:32:13 - Anthony Campolo

We are on 17 right now. I believe we probably could upgrade to 18. The only thing we would have to figure out is that change in the actual React DOM root. But if we did that, we would be using 18, but we wouldn't actually be taking advantage of anything that's in 18, like Suspense or Concurrent Mode or anything like that. So that is something we're going to be thinking about more now that we're kind of past v1. That's on a long list of things we want to work on right now. SSR is probably going to be higher up on the list, but we'll get to it eventually.

00:32:50 - Nick Taylor

Yeah. Cool. Cool. Yeah, we can talk about SSR a little later, but why don't we continue on here? So. Okay, so what would you like me to do next?

00:32:58 - Anthony Campolo

Now, so let's just delete the links and routes part. Delete the very first import.

00:33:08 - Nick Taylor

Okay.

00:33:09 - Anthony Campolo

Yep, yep, yep. And then delete that whole bottom p tag.

00:33:15 - Nick Taylor

Okay.

00:33:16 - Anthony Campolo

Yeah, yeah. And then just kind of rename this. Make it your own. Give it your own kind of title or whatever.

00:33:22 - Nick Taylor

Okay, let's say Friday. All right, cool. Just random words popping out of my head right now. Okay.

00:33:31 - Anthony Campolo

Yeah.

00:33:32 - Nick Taylor

Oh, all right, let's add a "woot." There it is. All right, cool.

00:33:39 - Anthony Campolo

Great. And now let's...

00:33:41 - Nick Taylor

What were you saying? Oh, no, no, I was just scratching my face. Awkward.

00:33:44 - Anthony Campolo

Yeah, I was gonna say let's now generate an about page, and then we'll go look at the routes file, because we can look at both pages and see them together. So you're gonna run almost the same command you just did. Yep. yarn redwood... yep.

00:33:59 - Nick Taylor

page.

00:33:59 - Anthony Campolo

And then make that say about. And then you're not going to say anything after that, because the name and the actual route are going to be the same thing. They're both going to be about.

00:34:09 - Nick Taylor

Okay. So it's inferred again because of the conventions, I guess.

00:34:12 - Anthony Campolo

Yep.

00:34:13 - Nick Taylor

Okay, cool. We'll let that build out. Okay. And it's nice, I see it's refreshed. I remember, I think they might have fixed this a while ago. Is this using Vite under the hood, or is it using Webpack?

00:34:29 - Anthony Campolo

Oh, man, I wish. No, we're still on Webpack. Vite is another thing on that long list of things we want to look at after v1. But it's not going to be super straightforward, because Redwood was built pre-Vite and is not really super set up for ESM and a lot of stuff. So we'll see. But right now we're still on Webpack. So if you go back to your browser and go to /about, you can see the about page.

00:34:58 - Nick Taylor

Okay, so let's go to /about. Or as they say in Canada, "a boot." All right. Yeah, cool, cool. I like how this is really quick too, the generators. That's a nice touch. I think that's some of the stuff you're starting to see that comes from the Rails inspiration. Okay, cool, cool. So we got it.

00:35:20 - Anthony Campolo

So now go to your Routes.js file. This is in the root of your web folder. Yep. And then delete all the comments real quick. Let me see this a little more cleanly. Yeah. Okay, so nice.

00:35:36 - Nick Taylor

It added the route in here too. That's nice.

00:35:38 - Anthony Campolo

So you can see here we have the two routes that we have created. And then it starts off with a not-found page. So if you go anywhere that's not a route, it'll kick you to a 404 kind of message. For each of these, there are three things: the path, which is the actual URL; the page, which is the page component we were looking at; and the name. And the name is what you use for the named route function when you actually want to link to it within your components.

00:36:06 - Nick Taylor

Okay, that's the unique identifier. Okay, cool. All right. Yeah, no, that's neat. I like how, when we scaffolded it, it automatically updated the routes too, because I know in the past on other things you end up doing things piecemeal. Okay, I made my page, now I need to add the route, and so on and so on. So it's nice. It's doing all this out of the box for you.

00:36:31 - Anthony Campolo

Then there are also other things you can add. You can add prerender if you want, like prerendered pages and stuff like that. And then you also have private routes. Once you get into authentication, the auth is built into the router in a way that allows the whole auth flow to work really, really nicely. We probably won't do auth today, but that's a thing that is incredibly consequential and complicated in modern apps that Redwood really nails. So it's worth mentioning.

00:36:59 - Nick Taylor

Cool. Cool. All right, so we got a couple pages. What should we move on to next?

00:37:04 - Anthony Campolo

Okay, in the tutorial here, you would then go to layouts, which we'll skip, because all layouts really are is: if you have a nav bar that would be around both of our pages so you can navigate between them, you use the layout. But that's not really super important. We should go into the backend right now. So let's check out the api folder and go to db/schema.prisma. Yeah, so this is our Prisma schema. You can go and delete the comments in there.

00:37:38 - Nick Taylor

Cool. All right, so this is a GraphQL schema, right?

00:37:45 - Anthony Campolo

No, so this is the Prisma part. This is why I say Prisma and GraphQL are kind of decoupled now. If you see, it says Prisma, not .graphql, and actually we don't have any .graphql files. We have .js files that have GraphQL schemas inside them, but we'll see that in a second. The main thing here, though, is this is for our database specifically. So we're going to define our database provider. Let's change that to PostgreSQL instead of SQLite, the very top one.

00:38:16 - Nick Taylor

Oh, yeah, yeah. Okay. Yeah. Okay, thank you, GitHub Copilot.

00:38:22 - Anthony Campolo

Yeah. Right. And then where it says UserExample, change that to say Post with a capital P, and you can leave the ID exactly how it is. Then change email to say title, and get rid of the unique constraint.

00:38:42 - Nick Taylor

Okay.

00:38:43 - Anthony Campolo

And then change name to say body, get rid of that question mark, and then add another line and write createdAt in camel case. Yeah, and then just do what Copilot's telling you to do. Yeah, there you go. So what that's doing is, when we create the post, it will automatically generate a timestamp for us from, like, now, right now, this is the time, and then it'll stamp that on the post. Okay, cool. So now we need a database, though. Do you have a Railway account by chance?

00:39:18 - Nick Taylor

I do not, but I can create one.

00:39:21 - Anthony Campolo

Yeah, it shouldn't take very long. And actually, you don't even need a Railway account. This is great. Okay, so just go to dev.new. This is going to be great. I love Railway. It's an amazing way to spin up a database, and it actually lets you spin up a project without an account, and then it's just kind of a free-floating project for a week. You can redeem or claim it once you create an account. Otherwise it'll get wiped after seven days. But for a demo like this, this is exactly what we want. So yeah, you're going to click "Provision PostgreSQL."

00:39:57 - Nick Taylor

Okay, this is. This is something I've never seen anywhere.

00:40:01 - Anthony Campolo

Dude, Railway, it's where it's at. I'm telling you, it's gonna change your life.

00:40:05 - Nick Taylor

Yeah, no, I've heard of Railway. I've never used it. I've just heard good things about it. But what I mean is the flow of just creating the database without even having an account or anything like that...

00:40:15 - Anthony Campolo

And I don't know anywhere else you could do this. I mean, it's pretty unheard of. It's just running a container for you, so it's not like they're spinning up Amazon RDS for you. Those things are like 40 a month, you know?

00:40:29 - Nick Taylor

Yeah, yeah, exactly. Okay, cool. So we spun up an instance, I'm guessing.

00:40:34 - Anthony Campolo

Yep. And so you should increase your font size a little bit.

00:40:37 - Nick Taylor

Oh, yeah, sorry.

00:40:38 - Anthony Campolo

That's good. All right, and then click Postgres right in the middle, and that'll take you into your actual database, and then go to Connect. Yeah, and if we see here, you can connect with psql; that's the top one. But we're not going to do that, because we want the environment variable and we want to put that in our .env. So you can do this off-screen if you want, or you can do it on screen. You'd just tear the database down afterward. It's kind of up to you.

00:41:05 - Nick Taylor

Yeah, no, I'll do it off-screen. I had Andrew Brown on the dev stream, I think just before Christmas or maybe right after, and he was showing me how to use Terraform. I'd set up all the keys and stuff, and I did it off-screen. But then I was going back in my history and it exposed the keys, and I did it three times during the stream.

00:41:40 - Anthony Campolo

It's really hard. I've exposed keys so many times on streams. It's really hard.

00:41:45 - Nick Taylor

I mean, it wasn't the end of the world because you could just kill them right away and chances are people watching aren't going to be able to type it out that quickly anyways. But it was just.

00:41:55 - Anthony Campolo

Someone can screenshot it, though, really quickly and then they have it. That's the move, really, if you want to be that guy.

00:42:01 - Nick Taylor

All right, cool. I'm going to just do this off-screen here. So this is going to be for, obviously, my environment file in the trees folder.

00:42:11 - Anthony Campolo

Yep. And then you're going to have an environment variable that's DATABASE_URL, all caps. You can even see that in your Prisma schema. You can kind of see where that gets injected.

00:42:26 - Nick Taylor

Yeah. Okay, cool. I see it there. All right, let me just copy it. I showed Lucia this. You might be aware of it too. VS Code has a really nifty extension for if you open your environment variables by accident on screen. It's called Cloak, and it...

00:42:47 - Anthony Campolo

I had that for a while, but then when I wasn't streaming it would still be on, and I wouldn't be able to see my environment variables. It made it really obnoxious working with them. I'd have to copy and paste them into a TextEdit file so I could actually see them. Yeah, I don't know.

00:43:03 - Nick Taylor

All right, so I put it in the root .env file. I'm assuming that's the right spot.

00:43:08 - Anthony Campolo

That's the one.

00:43:09 - Nick Taylor

Yeah. Yep.

00:43:10 - Anthony Campolo

There you go.

00:43:11 - Nick Taylor

Okay, cool. It's in there. All right. All right, cool. Let's continue on here then. All right, so we've made some modifications there. We've got our database connection string and I imagine we need to create some tables maybe now.

00:43:28 - Anthony Campolo

So now we're going to do the Prisma migrate, and this is what's going to set up our database for us. I was talking about how you have the migrations with your ORM, and this is the type of thing you get with Active Record or with Django's ORM. There's the object-to-JavaScript-to-SQL translation, and then there are the database migrations. They're kind of two separate components. So when people talk about Prisma, there's Prisma Client and there's Prisma Migrate, and those are two completely separate pieces of software. That's one important thing to know. So right now we're going to do another command in the terminal.

00:44:03 - Nick Taylor

Yeah. Okay, let's open that back up.

00:44:06 - Anthony Campolo

All right, so yeah, this will be yarn rw prisma, not generate. What this means is we are just doing a Prisma command. So if you were using Prisma with Remix, everything after the redwood part would be the type of command you would be running. It'd be completely identical. Then you're going to do migrate dev. But what I like to do is add an additional flag for --name.

00:44:36 - Nick Taylor

Okay.

00:44:37 - Anthony Campolo

Because it's going to ask you to name your migration anyway.

00:44:41 - Nick Taylor

And are these like... I know in Rails land they usually say something like migration and then a timestamp in the file. Is that what Redwood does, or something similar?

00:44:53 - Anthony Campolo

It'll do that for us, yeah. So you'll see that. Is it saying just -n? I don't know that.

00:44:58 - Nick Taylor

Yeah, yeah, it's dash n or dash dash name. I guess it's just. Okay, cool.

00:45:03 - Anthony Campolo

Good to know. And then just name it posts, all lowercase. Yeah, cool. And then run that. Yep.

00:45:13 - Nick Taylor

Cool. All right. Hopefully my database string is all good. "Can't reach database server." Okay, so that's a connection-string thing. But let's just double-check. I did copy this, it should be good, right? I looked in the sample file and they don't seem to be in quotes, which I imagine is fine.

00:45:38 - Anthony Campolo

Yeah, that shouldn't be.

00:45:39 - Nick Taylor

No, no, it's all good. I know what I did wrong. I exposed my database. I updated the comment that said TEST_DATABASE_URL.

00:45:49 - Anthony Campolo

I gotcha.

00:45:51 - Nick Taylor

Anyway.

00:45:51 - Anthony Campolo

Yeah. When you were looking at it, I was like, "I don't think that's right."

00:45:56 - Nick Taylor

Cool. Yeah. Yeah. So anyways, for those watching later, I will tear down that database. All right, let's run this again. Should be good now.

00:46:05 - Anthony Campolo

Yeah. I was like, oh, man. It really changed something that's never happened.

00:46:08 - Nick Taylor

Yeah. Yeah. Beauty of live coding. Cool. Cool. So I guess this takes just a little bit of time. Yep.

00:46:15 - Anthony Campolo

And if you kind of see there, it says containers-us-west. So this is basically just spinning up a database for you on Google Cloud and exposing it for you. Right now it's totally open. There's no permissions, no passwords, nothing at all, which is kind of bad if you don't know that. But it's also really awesome because, if you do something like PlanetScale, they give you a database that's locked down, which is a good thing. But at the same time, for a demo like this, it's like: yeah, go through and turn three things off to get it to work.

00:46:49 - Nick Taylor

Yeah, yeah. I really do like that feature of Railway. Obviously it's not something you keep permanently unless you convert it, like you said, but it's such a great way to remove friction from doing a demo.

00:47:02 - Anthony Campolo

Yeah. Or if you have a colleague who needs to debug something that has to do with the database, you know?

00:47:08 - Nick Taylor

Yeah, yeah, exactly. Okay, cool. So I ran the Prisma command. It created a SQL migration. Looking here, if I open up the migration file, it looks like for Redwood it generates a folder timestamped with the name of the entity, like post, or the table name, sorry. And basically everything that's in here is what we saw in the schema.

00:47:35 - Anthony Campolo

Yeah. It takes your Prisma model, generates the SQL, and then takes that SQL and applies it to the database. So right now our Railway database has a Post table with four columns.

00:47:47 - Nick Taylor

Okay. So if I came back to here... yeah, exactly. Where did my... there we go. Okay, cool.

00:47:54 - Anthony Campolo

And then...

00:47:55 - Nick Taylor

And then we got a post. Nice.

00:47:57 - Anthony Campolo

Yep. There's the columns and there's nothing in there. We could add stuff through the Railway UI, but we'll do it the Redwood way. So now we're going to run a scaffold command. This is the magic command. It writes a whole project's worth of code for you. So: yarn redwood g scaffold post. Yep, all lowercase, singular.

00:48:22 - Nick Taylor

Okay, cool, cool. And again, this is conventions kicking in.

00:48:29 - Anthony Campolo

And we don't need to look at any of this code necessarily. Let's first go back to our project and go to the /posts route in our browser.

00:48:42 - Nick Taylor

Oh, okay. Okay, gotcha.

00:48:43 - Anthony Campolo

Yeah.

00:48:46 - Nick Taylor

There. And you said just /post, right?

00:48:49 - Anthony Campolo

Posts. Yeah.

00:48:52 - Nick Taylor

All right. Nice.

00:48:53 - Anthony Campolo

Okay. Oh, so this is because of our environment variable, we have to restart our server.

00:48:57 - Nick Taylor

Okay. So let me do that. Just give it a second. Hello? Hello?

00:49:06 - Anthony Campolo

Yes, Vite would come in handy. It just takes a second. Yeah, this is par for ours.

00:49:11 - Nick Taylor

All good.

00:49:12 - Anthony Campolo

Yeah, Redwood's a little...

00:49:14 - Nick Taylor

No, it's all good. Replacing the build system, I can definitely sympathize with that. That'll take a bit of time. All right, so let's go to /posts. Okay, no posts yet.

00:49:25 - Anthony Campolo

Great. Go ahead and create a post.

00:49:27 - Nick Taylor

Okay. And just to be clear, this is all Redwood stuff here, right? This isn't like Railway pages or anything, right?

00:49:35 - Anthony Campolo

Yep. So right now, this is completely agnostic to your database. This is using the Redwood form library and React Hook Form, and I think Tailwind is the styling, or maybe not, but this is kind of what you get out of the box from Redwood. And the backend is whatever database string you plug in. You could even use something like MongoDB, which is pretty amazing.

00:49:59 - Nick Taylor

All right, cool. All right, so I'm just creating a new post. Okay. All right.

00:50:06 - Anthony Campolo

There you go.

00:50:06 - Nick Taylor

All right, so I guess out of the box we just kind of have an admin view, like a table of all the records. Okay, that's right. Yeah, cool.

00:50:17 - Anthony Campolo

And you can't really see right now because you're super zoomed in, but if you scroll over in the table, kind of scroll to the right... yeah, there you go.

00:50:28 - Nick Taylor

Yeah.

00:50:28 - Anthony Campolo

So go to Show. And then that takes us to our actual post. You see up top in your URL we're at /posts/1, the ID. And that's kind of how the routing works on that. Then you can edit it or delete it and do whatever you want. The whole CRUD capability is all there.

00:50:45 - Nick Taylor

Yeah, yeah, gotcha. Okay. Yeah, and that's like Rails again. Cool, cool. All right, and that's where all the conventions come in. Okay, so we've created a new post. What should we get up to next?

00:50:59 - Anthony Campolo

So now the final thing we want to do to actually get this on our homepage is create a cell. A cell is how we do the data fetching in Redwood. These are pretty cool. So we're going to run another generate command, generate cell, and then do BlogPosts with capital B for Blog and capital P for Posts. Yep, just like that.

00:51:29 - Nick Taylor

And then enter.

00:51:31 - Anthony Campolo

Yep. And then that will create our BlogPostsCell.

00:51:35 - Nick Taylor

Okay. And while that's generating... well, it was pretty quick. But what is a cell exactly?

00:51:42 - Anthony Campolo

Yeah. So if you go look at it, it'll be very, very easy to explain. This is the BlogPostsCell that was generated from our thing. Zoom out just a little so we can see the whole thing at one time. So first, there are two big chunks here: the query at the very top, and then all the rest of the stuff. The query is the GraphQL query that is basically, right now, going to query for the blog posts. And you see right now it gives us an error because we need to change it to match our schema. We need to change the three places it says blogPosts to just say posts, all lowercase.

00:52:27 - Nick Taylor

Yeah. Okay, so I normally use a keyboard shortcut for it, but there's an app I installed that's overridden my VS Code cmd-shift-L. I forgot what I switched it to. Anyways, so we got posts. posts.

00:52:49 - Anthony Campolo

Okay. It's still giving us an error. I don't think it should, though, so let's just leave that alone for now. But to finish what I was explaining, there are the four states that your thing can be in. If you've ever worked with data fetching, you know that you usually have to say: if it's a success, do this; if it's an error, do this; if it's empty, do this; or if it's still loading, do this. This does all that for you. Right now it'll just show the word Loading, but you can put an animation in there. Then it just says Empty for empty, and Failure will print an error message for you, and Success will return the posts and map over them for you.

00:53:32 - Nick Taylor

Okay, gotcha. And obviously this is scaffolding again. Like you said, you'll get these generic-looking states, but you can design a nice empty state and so on. You just get a lot out of the box to get working right away.

00:53:49 - Anthony Campolo

Yeah. So let's save all that. And then go back to your homepage file, and we're going to import the BlogPostsCell at the top.

00:54:00 - Nick Taylor

Okay. Is it a default export? I didn't check.

00:54:03 - Anthony Campolo

So nope. This is more Redwood magic, so don't do any curlies or anything. Just import BlogPostsCell as-is.

00:54:14 - Nick Taylor

Oh, no way. Just like that. Yeah, if I knew how to type properly.

00:54:19 - Anthony Campolo

But Posts, plural Posts, yep.

00:54:24 - Nick Taylor

Okay.

00:54:24 - Anthony Campolo

Yep, just like that. And then fill in what it's got for you. Yep.

00:54:30 - Nick Taylor

Okay, cool. So we're not using...

00:54:32 - Anthony Campolo

And then drop that under the "woot."

00:54:34 - Nick Taylor

All right. Okay.

00:54:36 - Anthony Campolo

Yeah, that should be it. Okay, so go back to your home page.

00:54:42 - Nick Taylor

All right, so let's go there.

00:54:45 - Anthony Campolo

All right, cool. And so that's good. Right now it's just giving us the ID. And the reason for that is, if we go back to our post cell and look at our query, our query is only returning the ID. So fill in the other fields, title and... no, no commas or anything.

00:55:04 - Nick Taylor

Oh, okay, sorry. Habit.

00:55:08 - Anthony Campolo

And then created at would be the fourth one.

00:55:11 - Nick Taylor

Oh, yeah, good call. createdAt. All right, just save that. Okay. And then I come back to the page, I imagine. Okay, cool. So I guess this is just JSON-stringified right now.

00:55:24 - Anthony Campolo

Yep. So the next thing would be: it's mapping over it, and you could actually create a component if you wanted to. But we should probably move on to the deployment part now, since we have a bit of a time crunch. It takes like five to ten minutes to actually build the site, so the sooner we get building, the better.

00:55:45 - Nick Taylor

Yeah, yeah. Okay, cool.

00:55:47 - Anthony Campolo

So now we will do that setup command I was talking about a while ago: yarn rw setup deploy and do...

00:55:56 - Nick Taylor

I need to stop the dev server, I imagine.

00:55:58 - Anthony Campolo

Yeah, you can stop that. We're done with that. The site is pretty much done. And then: deploy netlify.

00:56:08 - Nick Taylor

Cool, cool. And just enter. I'm logged in, I believe. Yeah. Okay.

00:56:12 - Anthony Campolo

Yeah, that won't really matter right now. We're going to get it into a git repo and then connect that git repo to Netlify.

00:56:22 - Nick Taylor

Okay.

00:56:23 - Anthony Campolo

Okay, so let's look at just one thing. Let's look at the netlify.toml that created for us.

00:56:28 - Nick Taylor

It seems to be empty.

00:56:30 - Anthony Campolo

You had two T's in Netlify.

00:56:32 - Nick Taylor

Yeah, I've got some fat fingers going on today here. All right, all right, cool.

00:56:38 - Anthony Campolo

So there's the build command, which is doing another Redwood command: yarn redwood deploy netlify. The setup deploy part sets your project up, and then the deploy step is what the provider uses to build your stuff. It needs to build both the website, the frontend, and put that in the dist folder. Then it also has to build your functions into a Lambda function, so that's the api/dist/functions part, and then that gets exposed as the /.netlify/functions/index thing. I don't know how much you mess around with Netlify Functions. That's the Netlify Functions naming convention.

00:57:23 - Nick Taylor

Yeah, yeah, we've been working on stuff with functions lately. Before we deploy this, I'm gonna go back into my terminal on the side and add the environment variable to my Netlify site, just so that we don't end up with an error over there. So just give me a second.

00:57:43 - Anthony Campolo

Yeah, I usually do that through the dashboard, but it should, in theory, also work through the CLI.

00:57:48 - Nick Taylor

Yeah, no, I've been doing a lot of stuff through this CLI.

00:57:52 - Anthony Campolo

I wonder why.

00:57:54 - Nick Taylor

Yeah, yeah, exactly. Okay, cool. Let's do set. I'm just gonna get the value here. Just one sec. Good thing I went to the chiropractor the other day because my neck's all turned to the left here. All right. It's DATABASE_URL. Okay, cool. Yeah, we have to do the site first because it's not linked to anything yet. Okay, I have it set up to do it, though. So let's continue over here. It generated the netlify.toml. Now should we go ahead and try to deploy it?

00:58:39 - Anthony Campolo

So yeah, I would say the way I usually do it is: I create a git repo and then link that. But actually, let's try just doing it from the Netlify CLI. I'll be kind of curious to see how this goes. I think Jason did this when I was on there with Jason.

00:58:56 - Nick Taylor

It's going to ask me to create the site. "Create and configure a new site?" Yes.

00:59:05 - Anthony Campolo

All right, now you should just name it the same thing I named it when I created it.

00:59:10 - Nick Taylor

What did you call it? Well, it'll give it a unique name automatically, because it keeps giving me URLs that are just my name in it. I'll put something different. redwood-trees, I don't know. Okay. All right, so that's building. I'm just going to add the environment variable. Okay, that's set. We'll open this up a bit bigger. So it's deploying now, it's running the build command, and we've got our environment variable for DATABASE_URL set, so we should be in a good state. Okay, that's just Webpack. Okay, one migration.

00:59:53 - Anthony Campolo

Is this basically running the build that would be run on Netlify, but doing it on your computer instead?

01:00:00 - Nick Taylor

Yeah, exactly. And then it'll. It'll upload it. So now it's finished and it's just uploading it all. And then once this is done, it should give you a URL that you can navigate to, which I'll click on in a second.

01:00:14 - Anthony Campolo

This is cool because I worked with Layer0 a little bit getting their setup working, and you do this with their CLI because they don't have the ability to actually build it on their own platform. So it's interesting that you guys both kind of went at it from opposite directions.

01:00:28 - Nick Taylor

Yeah. Okay, so it says Friday. Let's just. I think the. It could be. Because. There we go. That's good.

01:00:39 - Anthony Campolo

That's the environment variable.

01:00:41 - Nick Taylor

Yeah, I'm just gonna double check it. But that. That's definitely environment variable related, so I'm just gonna.

01:00:48 - Anthony Campolo

That also shows why having the error message contained to the cell is very nice. It doesn't tank your whole website. You have it contained to that one place. Redwood apps are actually pretty resilient to bugs, I've found, because if you follow the conventions like we just did, your pages and your router and all that tends to always work. And if you go off the path and start writing your own stuff, then you're on your own. But the conventions take good care of you, in my experience.

01:01:20 - Nick Taylor

Yeah, it seems to be correct. I wonder if I would just...

01:01:26 - Anthony Campolo

go into your dashboard and take a look. You wonder if it's because I set...

01:01:30 - Nick Taylor

the environment variable mid-build, because the site hadn't been created yet. So I think it might be? Really?

01:01:35 - Anthony Campolo

Yeah, you. Yeah, that. I wouldn't expect that to work.

01:01:39 - Nick Taylor

I'm just going off-screen because...

01:01:42 - Anthony Campolo

Because when you do it through the UI, you include the environment variable and then click deploy, and then it starts doing the deploy once it's already loaded in. There is a way to do that with the CLI before you actually deploy it, though.

01:01:57 - Nick Taylor

Yeah, no, I did it. It's just because it was the first time I created it locally. It creates that hidden Netlify folder and I needed that to create the environment variables. But when I started deploying it, it created that and then I set the environment variable. So I'm just going to rerun the Deployment.

01:02:17 - Anthony Campolo

Yeah, I should do it then.

01:02:18 - Nick Taylor

Okay. Where's my rerun option? It's been published... where's my deploy? Why is it not letting me redeploy? What am I doing? Okay, I'm just gonna do it from the CLI again because I don't know why I can't see it anyway. It won't take that long. So that's kind of cool. That whole deploy process handles everything: the backend, the frontend, and all that stuff. The functions make sense because we're hosting those. Is there anything else out here? I'm just looking at the redirect. So this is just a catch-all, right? Just to say that things are all good.

01:03:12 - Anthony Campolo

So that's because Redwood is like a single-page application on the frontend, right? So you always want to hit the index.html, and then the router takes over from there.

01:03:25 - Nick Taylor

Yeah. Yeah. Gotcha. Okay. This should be live now.

01:03:28 - Anthony Campolo

Yeah. That was something that confused me for a very long time.

01:03:31 - Nick Taylor

Okay. I'm not sure.

01:03:32 - Anthony Campolo

So what I would recommend doing is going into your Netlify dashboard and looking at the environment variables in there and making sure that's all good.

01:03:41 - Nick Taylor

Yeah. Yeah.

01:03:43 - Anthony Campolo

And otherwise there are other things we can do. Right now, since it's running in production, it masks the actual error. There is a more descriptive error we would be getting, but they're not showing it because this is a security best practice. You don't want to just expose your error messages, because then people can read them, reverse-engineer your application, and hack it. It's a whole thing.

01:04:09 - Nick Taylor

All right. I copy-pasted it. It's DATABASE_URL. Okay, that should be good. It won't pick it up, though.

01:04:21 - Anthony Campolo

So I would recommend clearing the cache when you do a rebuild, because that will basically wipe the whole thing and then do a rebuild. That's usually what you have to do when you get into weird states with Netlify.

01:04:35 - Nick Taylor

Yeah. I'm just wondering why, normally, I can see a redeploy button. I don't know. Open publish, deploy, lock... why can't I stop auto-publishing? No, this is so weird. Normally there's a button where I can rerun it. I don't know what's going on. Okay, now that's the actual site. I'll blame it on being the new guy at work, but this is weird. I don't know what's up with it. I can't see the deploy buttons. Usually there's Retry deploy, Clear cache, all that stuff. It's not showing up for some reason.

01:05:21 - Anthony Campolo

So let me get to my account real quick. What you'll want is, when you're on your site, there'll be the Deploys tab, the second tab. Once you're there, you'll have one that says Trigger deploy. If you click on that, it'll have Deploy site and Clear cache and deploy site.

01:05:39 - Nick Taylor

Yeah, yeah, no, I'm there. It's not showing up for some reason. Why?

01:05:43 - Anthony Campolo

Really? That's super weird. I don't know.

01:05:47 - Nick Taylor

It's really weird because I do this all the time. So that's why I'm wondering why. It's like site overview.

01:05:54 - Anthony Campolo

Anyway, go to Deploys. Put that back on screen, then scroll up and go Deploy. Click the published deploy, where it says Published.

01:06:03 - Nick Taylor

Yeah, now you click here. Sorry. Yeah, there we go. See, normally it says Retry. I don't know why I can't... oh, you know what? Maybe it's because I haven't linked it to a git repo yet. I just did it through the CLI. That shouldn't matter, but I'm not going to waste too much...

01:06:22 - Anthony Campolo

time, because maybe they can't reach back into your computer to rebuild it.

01:06:29 - Nick Taylor

Yeah, but it's weird. Oh yeah, I see what you mean. Yeah, no, that's exactly what it is. Okay, I'm just gonna do it one more time from here. But I'll publish the project after anyway. We know it works, because it's definitely environment-variable-related or something, because we saw locally that it's loading the data. Okay, cool. I'm just doing a time check here. We got about 15 minutes left. We've gone through how to scaffold things. We talked about cells, and cells seem like an easy way to manage and display the information in the entities in your data store. That's pretty much what it seems like.

01:07:09 - Anthony Campolo

Well, it's a way to display, but when you're doing the actual CRUD, that's also a cell as well. The mutations are kind of baked into everything too, so it gives you a fully integrated thing. This is what makes GraphQL so interesting: it's all you need for everything you want to do to connect your frontend to your backend. But that involves knowing a whole lot of GraphQL. You write GraphQL queries, understand query versus mutation, understand how you deal with query variables, and how that manages to connect to your database and display on your frontend. Redwood basically gets you set up so you can use GraphQL and have everything you would want to set up yourself, but you don't actually have to set it up yourself.

01:07:53 - Nick Taylor

Yeah, I'm going to push it with git because I'm still getting the same error. Cool. All right, so that's all pushed up to git. Now if I do ntl link it should... oh yeah, let's do that. I'm going to unlink it first, and then it's going to ask me to link it to the repo, I believe. Oh no, I'm gonna have to do the deploy one more time, actually, and then I believe it will add it through git at this point. Anyway, the repo will be up. I'll figure out what's going on with the deploy, because it's got to be something with the environment variable, but I'm not sure what.

01:09:05 - Anthony Campolo

Or we broke something in the latest version that just went out and no one's caught it yet except us. There's a tiny, tiny possibility that's what's happening. I would say it's probably not, but it's not impossible.

01:09:17 - Nick Taylor

Yeah. Yeah. Well, we can check it out after, but yeah. Okay. Well, yeah, I won't want to waste too much time on that right now because like, we've got like, yeah, 10 minutes left.

01:09:29 - Anthony Campolo

So this is a good illustration of why it's good to just follow the path they give you, which is: connect the repo and do that whole thing. Because that is the workflow that has been battle-tested hundreds and hundreds of times.

01:09:42 - Nick Taylor

Yeah, yeah, I can do that from there. If not, we can try that. I'll let that finish uploading. I'll check the link once it goes live. If that doesn't work, I'll do it through the GitHub repo and see what I can do.

01:09:55 - Anthony Campolo

I'm going to try forking this and see what happens.

01:09:58 - Nick Taylor

Mother forker. All right. Okay, that didn't work. So let's just come here and check out that new website. All right. Okay. Add a new site. Import an existing project from GitHub. Yes, thank you. And trees... is it in there? Do you see what I just called it?

01:10:23 - Anthony Campolo

Building my own version.

01:10:24 - Nick Taylor

Let's see what happens. Yeah, what did I just call it? I probably could have just copied the origin. Okay, yeah, trees. All right. Yeah, it is just trees. Why didn't it find... okay, it's already there. All right, cool.

01:10:35 - Anthony Campolo

Main.

01:10:36 - Nick Taylor

Okay, so it's pulling in all the stuff that it needs to. Let's do deploy site starting up. All right, I'll zoom this in a bit. Oh, we know the deploy was all good. It's just. And I've double checked the environment variable, so not sure what it is, but we'll see, we'll see what happens once this is done.

01:10:56 - Anthony Campolo

And yeah, if the one I build also breaks, then I'll be opening an issue on the Redwood repo.

01:11:03 - Nick Taylor

Cool, cool. Yeah, but aside from this part here, you know, it's a, it's live coding, so something always goes wrong.

01:11:10 - Anthony Campolo

But what was your impression of the framework otherwise?

01:11:13 - Nick Taylor

Yeah, yeah, I thought it was just really quick. We talked through each of the steps, but once you're familiar with the CLI for Redwood, that seems pretty quick. You know, yarn rw g scaffold this, scaffold that. Creating the schema seems pretty straightforward. I mean, we went with the Railway auto-available database, which I thought was super cool, but if anything slows you down, I feel like it's probably more when you create a real database that you're going to use. Maybe that's the slowest part, because you can't really automate that to some degree. But everything else was super fast. And I liked how, out of the box, you had CRUD support where you could add, edit, delete, and get something up super fast. Obviously from there you're like, okay, well, this site looks pretty generic. That's when you start pulling in your design team, or yourself, and making it look better. But out of the box, yeah, it just worked really fast.

01:12:21 - Nick Taylor

Yeah, it just worked really fast. Okay, what's it complaining about in the deploy? Oh, parsing the schema.

01:12:27 - Anthony Campolo

There's an error.

01:12:28 - Nick Taylor

Interesting.

01:12:29 - Anthony Campolo

Hold on, hold on. Let's see.

01:12:31 - Nick Taylor

The URL must start with postgres. Okay, yeah, I'm pretty sure that was in there.

01:12:37 - Anthony Campolo

So something is still happening with your environment variable.

01:12:41 - Nick Taylor

Yeah, that's weird, though, because I copied literally what was in the Railway app there. But I'll go back and check. I'm looking at it right now, off-screen, and it's prefixed with postgresql://.

01:12:56 - Anthony Campolo

So, yeah, that's correct.

01:12:58 - Nick Taylor

I'm just gonna go to the Netlify UI again and double-check the environment variable.

01:13:05 - Anthony Campolo

But yeah, because I just deployed it and it worked for me, and I spun up a new Railway database.

01:13:13 - Nick Taylor

Okay, cool. Yeah, you mind sharing it in the chat there? There's clearly something I botched on my end. I'm kind of confused as to what it is at the moment, but... oh, wait, I think I know it. No, I know what it is. I created it from the repo, and I didn't set the variable there. It was in the other one. So there we go.

01:14:00 - Anthony Campolo

Okay, so let me also rebuild it again.

01:14:02 - Nick Taylor

Yeah, yeah, yeah. So let's go back there. I love what it's called. The website's internal name is called Preeminent Cannoli. All right. Okay, so let's. Here, bring that here. All Right. So let's reload the preeminent look. Okay. All right, so we should be good. That's just starting up.

01:14:22 - Anthony Campolo

And then I also dropped in the chat the site that I got up. Pull that up too.

01:14:29 - Nick Taylor

Yeah, let me check that out. Okay. Yeah, cool, cool. I see it working there. So it could be that there's just an issue when you deploy it directly from the CLI, that something doesn't get picked up, maybe. I'm not sure what. But let's let this finish here, and then we can probably wrap it up from there and have some parting thoughts, as they say in cheesy land. But yeah, I opened up yours there and everything's working really well.

01:14:58 - Anthony Campolo

So the blog post I wrote.

01:15:00 - Nick Taylor

Yeah, yeah, exactly. Pretty awesome post there. So let's let this finish here, and then we should be good. And I am excited to see my preeminent cannoli. All right. I always get a chuckle out of all the auto-generated names. I don't think any of them are offensive ever. I think there's something...

01:15:22 - Anthony Campolo

You're lucky then. We got very unlucky with our StepZen auto-generators a couple times. There was one where I was going to do a stream with Alex Trost, and it had a term that's a term for an animal, but also a term for another thing. And he was like, "Can I get a different account?" And we were like, "Yes, definitely."

01:15:44 - Nick Taylor

Yeah, exactly. It's like, oof. Also, while this is finishing up, I have live captioning running. It's using webcaptioner.com, and it's perfect, obviously. It's funny because my name rhymes with lots of things, and sometimes it doesn't pick up my name properly, and I'll just leave it at that. But anyway, I'll check on the closed captioning while I'm streaming sometimes just to make sure it's working, and sometimes you read it and you're like, oof, that's not what they said. All right. This is almost done, I think. Yeah, we're at the end pretty much. Okay. Yeah. Site is live. Let's see this cannoli.

01:16:27 - Anthony Campolo

Yeah. All right. We got it.

01:16:29 - Nick Taylor

Okay.

01:16:29 - Anthony Campolo

I got it.

01:16:30 - Nick Taylor

Yeah, so it definitely works when you connect a GitHub repo from the UI. I'm not sure what happened when we did the deploy through the CLI. If that site was already linked to a GitHub repo, doing it from the CLI I imagine would work. Maybe there's an issue when it's not linked to anything and we're just deploying it, but I don't know what that issue is.

01:16:59 - Anthony Campolo

And that makes sense to me, because I wouldn't imagine anyone really doing that, like not using a git repo, you know?

01:17:06 - Nick Taylor

Oh, yeah, yeah. No, just sometimes. I usually push a repo when I'm live coding and stuff.

01:17:14 - Anthony Campolo

But if you want, now you've got something to bring to the templates team or the integration team, whichever. Like, "Hey, I know a way to make Redwood's integration nicer now."

01:17:24 - Nick Taylor

Yeah, yeah, I'm working on a bug in the CLI right now, so maybe I'll take a peek at it. Cool, cool. Well, listen, man, it's 4:29, we're pretty much at time. I dropped some links for you and Redwood on Twitter, as well as the Redwood website. It was a lot of fun. Thanks for coming on as my first guest in a little bit here. I'll be streaming more frequently now that I've kind of settled into work here. This was really cool. I enjoyed the demo. I know we didn't get into everything. I know we were maybe gonna talk about SSR and stuff, but maybe we can talk about that later.

01:18:01 - Anthony Campolo

Well, I mean, there is no SSR. That's the short and long of it. So come back later for SSR.

01:18:08 - Nick Taylor

Okay, cool, cool, cool. Nice. All right, awesome. Well, listen, thanks, Anthony. Folks, if you aren't already following Anthony or Redwood on Twitter, give them a follow. I'm off next week because it's Canadian long weekend, but I'll be back after that streaming. I haven't decided what day is best for me to stream yet with work, but for now I think it's Fridays. Anyway, thanks again, Anthony, and everybody else. I'll see you probably in a couple weeks.

Discover Related Content

• A First Look at RedwoodJS with Anthony Campolo and Ryan Carniato (Video)
• RedwoodJS with Anthony - Tech Talks with Santosh (Video)
• Getting Started with Redwood for Beginners (Video)
• RedwoodJS with Peter Pistorius (Podcast)
• React Server Components Without Next.js (Video)