Storybook Your Angular App with Nx
summary
Nx scaffolds auto-generated stories from Angular components, extracts inputs as args, and creates Cypress e2e specs that hit story URLs for deterministic tests. Generators migrate Storybook configs (5→6 and 6→6.2), add build/serve targets, and enable CI caching and distributed builds. Demo shows a served Storybook (reported as storybook 6.4.4 on localhost) rendering an interactive button component with editable props and prefilled states, and the generated tests run against those exact states.
AI-written summary · about
chapters (14)
- 0:00Start
- 2:01Agenda
- 2:29What Is Storybook
- 2:54Storybook
- 9:19Add a Story File
- 13:13Build and Publish Your Storybook
- 14:03Code Generators
- 15:45Features That Facilitate Storybook Development
- 17:51E2e Tests
- 21:33Migrators
- 23:51Demo
- 24:22Nx Workspace
- 24:49Set Up Storybook
- 26:22Generate Storybook Configuration
related talks
37mBridging the gap between UX and development – A Storybook
40mLove Story: Testing angular components with Storybook and Playwright
31mA Beginner’s Guide To Storybook
40mDriving Your JavaScript Library Ecosystem With Nx
24mA Short Synopsis of Vue Storybook
10mGet to Know the 2022 ng-conf Speakers
03mDocument your components with Storybook for Vue
15mOnce Upon a Time Storybook