Fullstack Jamstack Development with RedwoodJS | Async

Anthony Campolo demonstrates building a blog web app from scratch with RedwoodJS, showcasing its code generation capabilities and integrations with Prisma and Netlify.

Episode Summary

In this presentation, Anthony Campolo builds a full-stack Jamstack blog application using RedwoodJS, demonstrating the framework’s capabilities for rapid development. He starts by generating the basic structure of the app, including pages and layouts, using RedwoodJS’s CLI commands. Anthony then integrates Prisma for database management, setting up a PostgreSQL database and creating models. He showcases RedwoodJS’s “magic” command that generates a complete blog interface, including CRUD operations. The demo covers GraphQL integration for data fetching, introducing the concept of cells in RedwoodJS. Finally, Anthony deploys the application to Netlify, highlighting the seamless deployment process. Throughout the presentation, he explains key concepts of RedwoodJS, its relationship to React and GraphQL, and how it aims to combine the best aspects of frameworks like Ruby on Rails with modern web technologies.

Chapters

00:00 - Introduction and Project Setup

Anthony begins by introducing himself and his roles as a developer advocate for StepZen and a core team member of RedwoodJS. He explains the structure of the presentation, mentioning that he’ll be following a script to ensure a smooth demonstration. The chapter covers the initial setup of a RedwoodJS project, including checking the version number and starting the development server. Anthony briefly touches on the project structure, mentioning the web and API folders, and shows the default “Hello World” splash page generated by RedwoodJS.

02:56 - Creating Pages and Layouts

This chapter focuses on generating pages and layouts using RedwoodJS’s CLI commands. Anthony demonstrates how to create a home page and an about page, explaining the routing system in RedwoodJS. He then introduces the concept of layouts, creating a blog layout that includes a navigation bar. The process of importing and using layouts in pages is demonstrated, showing how layouts can wrap content across multiple pages. This section highlights RedwoodJS’s approach to structuring front-end components and its similarities to other meta-frameworks.

07:52 - Setting Up Prisma and Database

Anthony moves on to setting up the database layer using Prisma ORM. He demonstrates how to configure Prisma for PostgreSQL and uses Railway.app to quickly spin up a free Postgres database. The chapter covers setting up environment variables, defining the database schema for a blog post, and running Prisma migrations. Anthony explains the advantages of Prisma’s approach to generating SQL and its ability to work with different database types. This section showcases how RedwoodJS integrates with modern database tools to streamline the development process.

14:25 - Generating Blog Interface and GraphQL Integration

This chapter demonstrates RedwoodJS’s powerful code generation capabilities. Anthony uses a single command to generate a complete blog interface, including CRUD operations. He then introduces the concept of cells in RedwoodJS, explaining how they provide a convention for declarative data fetching using GraphQL. The process of creating a cell to fetch and display blog posts on the home page is demonstrated, showcasing how RedwoodJS simplifies the integration of GraphQL into the application. This section highlights how RedwoodJS aims to reduce boilerplate and accelerate development.

20:09 - Deployment to Netlify

In the final chapter, Anthony walks through the process of deploying the RedwoodJS application to Netlify. He demonstrates how to set up a Git repository for the project and connect it to Netlify. The chapter covers configuring environment variables in Netlify and explains the purpose of the netlify.toml file in managing the build and deployment process. Anthony discusses the Jamstack approach and how RedwoodJS fits into this architecture. The demonstration concludes with a successful deployment of the blog application, showing how RedwoodJS facilitates the entire process from development to production.