Let's Learn RedwoodJS | Learn with Jason

In this episode of Learn With Jason, Anthony Campolo explains how RedwoodJS enables building database backed Jamstack applications without wasting time on backend configuration.

Episode Summary

In this episode of Learn With Jason, Anthony Campolo demonstrates how to build a full-stack blog application using RedwoodJS. They start by generating a new Redwood project and quickly set up pages, layouts, and routing. Anthony explains how Redwood combines existing technologies like React, GraphQL, and Prisma with conventions to accelerate full-stack development. They create a database schema, generate CRUD scaffolding, and implement data fetching using Redwood’s cell concept. The episode concludes with deploying the application to Netlify with a Postgres database on Heroku, showcasing Redwood’s streamlined development and deployment process.

Chapters

00:00 - Introduction and RedwoodJS Overview

Anthony Campolo joins Jason to discuss RedwoodJS, a full-stack framework for the Jamstack. They introduce the concept of RedwoodJS as a curated set of tools and conventions for building modern web applications. Anthony shares his background in web development and explains how RedwoodJS aims to simplify the process of creating full-stack applications by providing a structured approach similar to Ruby on Rails, but for JavaScript and the Jamstack ecosystem.

02:56 - Setting Up a RedwoodJS Project

The chapter begins with creating a new RedwoodJS project using the CLI. Jason and Anthony walk through the initial project structure, explaining the separation between the web (frontend) and api (backend) directories. They discuss how RedwoodJS uses a monorepo approach to keep frontend and backend code in a single project. The chapter covers generating pages, creating layouts, and setting up basic routing, demonstrating how quickly a RedwoodJS application can take shape.

13:02 - Database Schema and Prisma Integration

This section focuses on setting up the database schema using Prisma, which is integrated into RedwoodJS. Anthony guides Jason through creating a simple blog post model in the schema.prisma file. They discuss how Prisma acts as an ORM (Object-Relational Mapping) tool, allowing developers to define their data model in a declarative way. The chapter covers running migrations and explains how RedwoodJS abstracts away much of the complexity of database management.

27:45 - Generating CRUD Scaffolding

Anthony demonstrates one of RedwoodJS’s powerful features: the ability to generate full CRUD (Create, Read, Update, Delete) scaffolding for a model. They use the yarn redwood generate scaffold post command to automatically create pages, components, and GraphQL operations for managing blog posts. This chapter showcases how RedwoodJS can rapidly accelerate development by providing a complete set of operations out of the box, which developers can then customize as needed.

41:43 - Data Fetching with Cells

This chapter introduces the concept of Cells in RedwoodJS, a unique abstraction for data fetching. Anthony explains how Cells provide a declarative way to handle loading, empty, error, and success states when fetching data. They modify the home page to display blog posts using a Cell, demonstrating how this approach simplifies the process of integrating data into React components and manages the various states of asynchronous operations.

58:35 - Deploying to Netlify and Heroku

The final chapter covers deploying the RedwoodJS application. Anthony guides Jason through setting up deployment configurations for Netlify. They also set up a Postgres database on Heroku and connect it to the Netlify deployment. This section demonstrates how RedwoodJS simplifies the deployment process, automatically generating the necessary configuration files and build commands. The chapter concludes with a live deployment of the application, showcasing the end-to-end process from development to production.