Building Fullstack Jamstack Applications with RedwoodJS | Jamstack OPO

Anthony Campolo outlines the origins and motivations of RedwoodJS and how to use the framework to build and deploy a fully functional blog in under 20 minutes.

Episode Summary

In this presentation, Anthony Campolo, one of the contributors to RedwoodJS, provides a comprehensive walkthrough of building and deploying a full-stack Jamstack blog application using the RedwoodJS framework. He begins by explaining the core concepts and architecture of RedwoodJS, including its front-end and back-end structure, and how it integrates with GraphQL. Anthony then demonstrates the process of creating a new RedwoodJS project, generating pages and layouts, setting up a database schema, and scaffolding CRUD operations for blog posts. He showcases the framework’s powerful CLI tools and conventions that streamline development. The presentation culminates in deploying the application to Netlify for hosting the front-end and Heroku for the PostgreSQL database. Throughout the demonstration, Anthony highlights the ease of use and efficiency that RedwoodJS brings to full-stack JavaScript development, making it possible to create a functional blog application in under 20 minutes.

Chapters

00:00 - Introduction and RedwoodJS Overview

Anthony Campolo introduces himself and begins his presentation on RedwoodJS. He provides an overview of the framework, explaining its purpose as a full-stack serverless framework for the Jamstack. Anthony discusses the origins of RedwoodJS, mentioning its creators and their motivations for developing the framework. He then dives into the architecture of RedwoodJS, explaining the separation between the front-end (web folder) and back-end (API folder). This chapter sets the foundation for understanding the core concepts of RedwoodJS before the live coding demonstration begins.

02:55 - Setting Up a RedwoodJS Project

Anthony begins the hands-on portion of the presentation by creating a new RedwoodJS project. He walks through the initial setup process, including initializing a Git repository and pushing it to GitHub. Anthony then demonstrates how to start the development server and explains the default project structure. He generates the home and about pages using RedwoodJS CLI commands, showing how quickly pages can be created and routed. The chapter also covers creating a layout component for navigation between pages, illustrating RedwoodJS’s approach to structuring a web application.

14:02 - Database Setup and Scaffold Generation

This chapter focuses on setting up the database schema and generating scaffolds for the blog application. Anthony explains the Prisma schema file and how to define the database model for blog posts. He demonstrates creating and applying database migrations using RedwoodJS commands. The highlight of this chapter is the scaffold generation, where Anthony shows how RedwoodJS can automatically create a full CRUD interface for blog posts with a single command. This showcases the power and efficiency of RedwoodJS in rapidly developing database-driven applications.

27:04 - Customizing the Blog Frontend

Anthony guides the audience through customizing the blog’s frontend. He demonstrates how to create a cell component to fetch and display blog posts on the homepage. The chapter covers writing GraphQL queries, mapping over the returned data, and styling the blog post list. Anthony explains the concept of cells in RedwoodJS and how they simplify data fetching and state management in React components. This section highlights how RedwoodJS conventions make it easy to integrate backend data with frontend components.

33:23 - Deploying the Application

In the final chapter, Anthony walks through the process of deploying the RedwoodJS application. He explains how to generate deployment configurations for Netlify and set up a PostgreSQL database on Heroku. The chapter covers important deployment steps such as setting environment variables, configuring the database URL, and managing connection pooling. Anthony demonstrates the deployment process in real-time, showing how to push changes and trigger rebuilds. He concludes by accessing the live site and creating a blog post to verify that everything is working correctly. This chapter emphasizes how RedwoodJS simplifies the often complex process of deploying full-stack applications.

48:40 - Conclusion and Q&A

Anthony wraps up the presentation by answering questions from the audience. He discusses the differences between RedwoodJS and Gatsby, explains how to integrate content management systems with RedwoodJS, and provides resources for further learning. The chapter concludes with information on how to get involved with the RedwoodJS community and where to find additional support and documentation.