Building Fullstack Jamstack Applications with RedwoodJS | JS Monthly

Anthony Campolo outlines the origins of RedwoodJS and the concepts it introduces by demonstrating how to create and deploy a blog in less than 20 minutes.

Episode Summary

In this presentation, Anthony Campolo introduces RedwoodJS, a full-stack serverless framework for building Jamstack applications. He explains the framework’s origins, its core team, and its architecture, which includes a front-end built with React and a back-end using GraphQL and Prisma. Anthony then provides a live demonstration of creating a simple blog application using RedwoodJS, showcasing its key features such as automatic code generation, layout management, and database integration. He walks through the process of setting up the project, creating pages and layouts, defining database models, and generating scaffolds for CRUD operations. The presentation concludes with a deployment of the application to Netlify and Heroku, highlighting RedwoodJS’s seamless integration with cloud services. Throughout the demo, Anthony emphasizes RedwoodJS’s ability to streamline full-stack development and its advantages over other frameworks like Next.js and Gatsby.

Chapters

00:00 - Introduction to RedwoodJS

This chapter introduces RedwoodJS, describing it as a full-stack serverless framework for the Jamstack. Anthony Campolo, the presenter, explains the origins of RedwoodJS, mentioning its creators Tom Preston-Werner and Peter Pistorius. He discusses how the framework emerged from their work on Chatterbug, a language learning platform. Anthony then introduces the core team behind RedwoodJS, highlighting its growth and the passion of its contributors. He provides an overview of the framework’s architecture, explaining the mono-repo structure with separate web and API folders. This introduction sets the stage for understanding RedwoodJS’s purpose and structure.

02:56 - RedwoodJS Architecture and Components

Anthony dives deeper into the architecture of RedwoodJS, focusing on its various components. He begins by explaining the structure of the web folder, which contains pages, layouts, and the main application files. The presenter introduces the concept of cells, a unique feature of RedwoodJS for handling data fetching with GraphQL. He then moves on to the back-end components, discussing Prisma for database interactions, serverless functions, and GraphQL schema definition. Anthony provides examples of how these components work together, showing code snippets for database models, GraphQL schemas, and services. This chapter gives viewers a comprehensive understanding of how RedwoodJS organizes and connects different parts of a full-stack application.

07:32 - Building a Blog Application with RedwoodJS

This chapter focuses on the practical application of RedwoodJS as Anthony guides viewers through building a simple blog application. He starts by creating a new RedwoodJS project and setting up a Git repository. The presenter then demonstrates how to generate pages, create layouts for navigation, and set up a database model for blog posts. Anthony showcases RedwoodJS’s scaffolding capabilities, which automatically generate CRUD interfaces for the blog posts. He explains how to customize the generated components and integrate them into the application’s pages. Throughout this chapter, viewers get a hands-on look at how quickly and efficiently RedwoodJS can help developers create a functional web application with database integration.

19:51 - Deploying the RedwoodJS Application

In the final chapter, Anthony walks through the process of deploying the RedwoodJS blog application to the internet. He demonstrates how to set up deployment configurations for Netlify to host the front-end and Heroku for the PostgreSQL database. The presenter explains the necessary steps to configure environment variables, ensuring secure database connections. Anthony showcases RedwoodJS’s integration with these cloud services, highlighting how it simplifies the deployment process. He addresses potential issues that may arise during deployment and provides solutions. The chapter concludes with a brief Q&A session where Anthony discusses RedwoodJS’s features compared to other frameworks, its TypeScript support, and plans for future enhancements like incremental builds.