Using Storybook with RedwoodJS | Lunchdev

Anthony Campolo demonstrates using Storybook in RedwoodJS to incrementally build and visually test a comment component without needing to connect a database first.

Episode Summary

In this episode, Anthony Campolo showcases how to use Storybook with RedwoodJS to build and test UI components efficiently. He walks through creating a comment component for a blog application, demonstrating Redwood’s integrated approach to component development, data fetching, and visual testing. The tutorial covers generating components and cells, implementing Storybook for visual testing, and integrating these elements into a larger application structure. Throughout the demonstration, Anthony highlights Redwood’s developer-friendly features, including automatic generation of test files and mock data. The episode emphasizes how this workflow allows developers to build and iterate on components quickly without needing to set up a full backend, showcasing the power of Redwood’s conventions and Storybook’s visual testing capabilities.

Chapters

00:00 - Introduction and Overview

Anthony Campolo is introduced as a member of the RedwoodJS core team, preparing to demonstrate how RedwoodJS automates visual testing of components using Storybook. The chapter sets the context for the tutorial, explaining that it builds upon the first part of the Redwood tutorial where a basic blog was created. Anthony emphasizes the visual nature of Storybook and its importance in the component development workflow. He starts by showing the end state of the first Redwood tutorial, a simple blog application, and prepares the environment by setting up the database with seed data.

02:56 - Setting Up the Project and Storybook

This chapter covers the initial setup of the Redwood project and Storybook. Anthony explains the structure of a Redwood project, highlighting the separation between front-end and back-end. He demonstrates how to start the Storybook server and explains its purpose in visually testing components. The chapter includes a discussion on the benefits of using Storybook for component development, emphasizing how it allows developers to see different component states without setting up a full database or backend. Anthony also touches on Redwood’s cell concept, explaining how it simplifies data fetching and component state management.

09:00 - Building the Comment Component

Anthony begins the process of building a comment component for the blog. He starts by generating a new component using Redwood’s CLI tools, which automatically creates the necessary files, including a Storybook story. He walks through the process of defining the component’s structure, adding props for the comment’s content, and implementing basic styling using Tailwind CSS. Throughout this chapter, Anthony emphasizes the iterative nature of component development using Storybook, showing how changes to the component are immediately reflected in the Storybook interface.

17:52 - Creating and Styling the Comments Cell

This chapter focuses on creating a comments cell, which will handle fetching and displaying multiple comments. Anthony demonstrates how to generate a cell using Redwood’s CLI and explains the different parts of a cell (query, loading, empty, failure, and success states). He shows how to integrate the previously created comment component into the cell and how to style the collection of comments. The chapter also covers the use of mock data in Storybook to simulate different data states without needing a real backend.

29:04 - Integrating Comments into the Blog Post

Anthony shows how to integrate the comments component into the larger blog post component. He demonstrates how to import and use the comments cell within the blog post component, and how to adjust the styling to ensure proper layout and spacing. The chapter also covers some advanced Storybook techniques, such as using decorators to apply consistent styling across all stories. Anthony wraps up by showcasing the final result - a fully functional blog post component with integrated comments, all developed and tested within Storybook without needing to set up a database or backend.

48:52 - Conclusion and Q&A

The episode concludes with a brief Q&A session where Anthony and other participants discuss the benefits of using Storybook, particularly for testing different user roles and permissions. They highlight how Redwood’s integration with Storybook simplifies this process. The discussion emphasizes the value of Storybook in improving developer workflow and collaboration between design and development teams. The chapter ends with closing remarks and encouragement for viewers to explore Redwood and Storybook further.