Storybook Website Deployment — Summary

Goal

Make Storybook (component library) accessible to stakeholders at:

• Production: storybook.ourlantern.app
• Development: storybook.dev.ourlantern.app

What is Storybook?

An interactive component library where designers, PMs, and stakeholders can:

• Browse all UI components
• Interact with components (change colors, sizes, states)
• View component documentation
• Share direct links to specific components

Current Status

✅ Code is ready — All configuration and documentation complete
⏳ Cloudflare setup needed — 15-20 minute manual setup required

Next Steps

1. Follow the Setup Guide

Open: docs/engineering/deployment/STORYBOOK_SETUP_GUIDE.md

This guide provides step-by-step instructions with all the details you need.

What you'll do:

1. Create 2 Cloudflare Pages projects (prod + dev)
2. Connect them to GitHub repository
3. Add custom domains
4. Verify deployments work

Time required: 15-20 minutes

2. Share with Stakeholders

Once deployed, share these resources:

URLs:

• Production: https://storybook.ourlantern.app
• Development: https://storybook.dev.ourlantern.app

Guide for stakeholders:

• docs/storybook/STAKEHOLDER_GUIDE.md — How to view and use Storybook (non-technical)

3. Automatic Deployments

After setup, deployments are fully automatic:

• Push to main → deploys to storybook.ourlantern.app
• Push to dev → deploys to storybook.dev.ourlantern.app
• Feature branches → get preview URLs (e.g., feature-xyz.lantern-storybook-dev.pages.dev)

Documentation Reference

All documentation is complete and ready:

Document	Purpose	Audience
docs/engineering/deployment/STORYBOOK_SETUP_GUIDE.md	Step-by-step Cloudflare setup	DevOps/Admin
docs/storybook/STAKEHOLDER_GUIDE.md	How to view and use Storybook	Designers, PMs, Stakeholders
docs/engineering/deployment/STORYBOOK_DEPLOYMENT.md	Complete deployment reference	Developers
docs/storybook/STORYBOOK.md	Developer documentation	Developers

Testing the Build

You can verify the build works locally before deploying:

# Build static Storybook
npm run build-storybook

# Verify output
ls -la storybook-static/

# Should see: index.html, assets/, iframe.html, etc.

Questions?

• Setup help: See docs/engineering/deployment/STORYBOOK_SETUP_GUIDE.md
• Deployment issues: See docs/engineering/deployment/STORYBOOK_DEPLOYMENT.md
• Cloudflare Pages docs: developers.cloudflare.com/pages

---

Ready to proceed? Open docs/engineering/deployment/STORYBOOK_SETUP_GUIDE.md and follow the steps!