Nick Taylor and Anthony Campolo demo using RedwoodJS for building and deploying a fullstack JavaScript application on Netlify, covering database integration and CRUD operations.
Episode Summary
In this episode, Nick Taylor hosts Anthony Campolo, a RedwoodJS core team member, to demonstrate building and deploying a fullstack JavaScript application using RedwoodJS. They cover the framework’s key features, including its opinionated structure, built-in router, and form handling capabilities. The demo walks through creating a new RedwoodJS project, setting up a database using Railway, generating pages and components, and implementing CRUD operations. They discuss RedwoodJS’s cell concept for data fetching and its deployment process to Netlify. Throughout the demo, they highlight how RedwoodJS’s conventions and scaffolding tools help developers quickly build full-stack applications with minimal configuration. The episode also touches on RedwoodJS’s history, its relationship with the Jamstack ecosystem, and future plans for server-side rendering support.
Chapters
00:00 - Introduction and RedwoodJS Overview
Anthony Campolo, a RedwoodJS core team member, joins Nick Taylor to introduce RedwoodJS, a full-stack JavaScript framework. They discuss Anthony’s background in music education and his transition into coding through RedwoodJS. Anthony explains how RedwoodJS combines React for the frontend with a GraphQL API and Prisma ORM for the backend, drawing comparisons to Ruby on Rails in its convention-over-configuration approach. He highlights how RedwoodJS’s structure and built-in tools like routing and form handling make it especially suitable for beginners in full-stack development.
02:56 - Setting Up a RedwoodJS Project
The hosts begin the practical demonstration by creating a new RedwoodJS project using the CLI. They explore the project structure, noting the separation between the web (frontend) and api (backend) folders. Anthony explains the role of the package.json files in each directory and introduces key RedwoodJS concepts like its custom router and form handling library. They generate a home page component and discuss how RedwoodJS’s file-based routing works in conjunction with its routes.js file. This section provides a clear overview of RedwoodJS’s project initialization and basic component creation process.
15:02 - Database Setup and Schema Definition
Nick and Anthony move on to setting up the database for their RedwoodJS application. They use Railway, a platform that allows quick provisioning of databases without an account, demonstrating its ease of use for development and demos. They modify the Prisma schema file to define a ‘Post’ model with fields for title, body, and creation date. Anthony explains how Prisma works as an ORM and its role in database migrations. They run the Prisma migrate command to create the database table based on their schema, showcasing how RedwoodJS integrates with Prisma to handle database operations seamlessly.
27:37 - Generating CRUD Scaffolding
The demonstration continues with generating CRUD (Create, Read, Update, Delete) scaffolding for the Post model. Using RedwoodJS’s scaffold command, they quickly create a set of components and pages for managing blog posts. Anthony explains how this scaffolding provides a complete admin interface out of the box, including forms for creating and editing posts, and a list view of all posts. They navigate through the generated UI, showing how RedwoodJS automatically creates routes and links everything together. This section highlights the productivity benefits of RedwoodJS’s scaffolding capabilities.
51:10 - Introduction to Cells and Data Fetching
Anthony introduces the concept of Cells in RedwoodJS, a key feature for handling data fetching and display. They generate a BlogPosts cell and examine its structure, which includes separate sections for handling loading, empty, failure, and success states of data fetching. Anthony explains how Cells abstract away the complexities of state management in data fetching, making it easier for developers to handle different scenarios. They modify the generated Cell to fetch and display blog post data, demonstrating how Cells integrate with the GraphQL layer of RedwoodJS.
55:57 - Deploying to Netlify
In the final segment, Nick and Anthony walk through the process of deploying the RedwoodJS application to Netlify. They use RedwoodJS’s built-in deploy command to set up the necessary configuration for Netlify, including generating a netlify.toml file. They encounter some issues with environment variables during the deployment process, showcasing troubleshooting steps and the importance of proper configuration. Despite the challenges, they successfully deploy the application, demonstrating RedwoodJS’s integration with Netlify for easy deployment of full-stack applications. The episode concludes with a brief discussion of future RedwoodJS features, including plans for server-side rendering support.