An architectural pattern on Ui library workflows with Storybook and Azure
summary
Builds a tiny Storybook UI library (a single button), compiles and publishes it to npm via a token-based workflow, and consumes the package from a separate React app; CI uses GitHub Actions -> npm publish with an enforced 80% coverage gate so releases fail if tests drop below threshold. Storybook is Dockerized and pushed to Azure Container Registry, then auto-deployed to an Azure Web App; the pipeline works end-to-end but requires manual version bumps and careful token/ACR credential management.
AI-written summary · about
chapters (8)
- 0:00Introduction and agenda
- 1:04Setting up and publishing npm package
- 6:51Consuming the published package
- 7:11Setting up CI/CD with GitHub Actions
- 14:22Dockerizing the Storybook app
- 18:40Pushing to Azure Container Registry
- 25:45Deploying to Azure Web App
- 27:35Live demo and conclusion
related talks
37mBridging the gap between UX and development – A Storybook
31mA Beginner’s Guide To Storybook
07mReact components, atomic design and storybook
32mStorybook Your Angular App with Nx
39mA Dream Duo: How to Use Storybook & Open Source Project “Auto” to Ship Design Systems
15mOnce Upon a Time Storybook
27mBuilding a Maintainable UI with Storybook
16mStorybook, a Really Good Idea?