Fixed-Cost Static Hosting vs Pay-Per-Snapshot Chromatic: Which is cheaper for low-traffic Storybook sites?

Question

Goal
Determine the most cost‑effective deployment strategy for a Storybook site that receives minimal traffic but requires occasional visual regression testing.
Constraints
• The site is built with build-storybook and will be served as a static bundle from an object‑storage CDN (e.g., Cloudflare Pages, GitHub Pages, or S3).  The recurring cost of such a host is near‑zero for low traffic, but the bundle size is fixed regardless of visitors.
• Chromatic offers a free snapshot tier that incurs charges only when snapshots or visual reviews exceed the free quota.  Pricing scales with the number of snapshots rather than visitor volume.
• Storybook 8 uses Vite by default, which can produce smaller bundles than Storybook 7’s Webpack; however, the static build still contains all stories and addons.
Unresolved Decision
Which approach yields the lowest total cost for a low‑traffic Storybook site that occasionally needs visual regression reviews?
Specific Questions

How does the fixed CDN hosting cost compare to Chromatic’s snapshot pricing for a site with X stories and Y daily visitors?
Does the bundle‑size reduction in Storybook 8’s Vite build sufficiently lower CDN bandwidth costs to offset Chromatic’s free‑tier limitations?
Under what traffic or review‑volume scenarios does Chromatic’s free tier become more expensive than a static‑hosting solution?

Tasadduq Burney · Answer

Answer
For a Storybook site that receives little traffic and only needs visual regression testing now and then, the lowest‑cost option is to host the static build on a free CDN (Cloudflare Pages, GitHub Pages, Netlify, Vercel, or S3+CloudFront) and run Chromatic only when you need a snapshot review. As long as your monthly snapshot usage stays below Chromatic’s free tier, the combined cost is effectively $0.
Confirmed facts

Static hosts listed above provide free tiers with unlimited or generous bandwidth for low‑traffic sites; a typical Storybook 8 Vite build (50‑200 MB gzipped) consumes negligible bandwidth.
Chromatic’s free tier (as of 2024) includes 5,000 snapshots per month; exceeding this triggers paid plans starting around $149/month.
Storybook 8’s Vite default reduces bundle size by roughly 30‑50% versus Storybook 7 Webpack, but because CDN bandwidth is already free or near‑zero, this size reduction does not meaningfully change the hosting cost.

Likely explanation
If you run visual regression tests infrequently (e.g., 1‑2 dedicated runs per month) and each run creates snapshots for all stories on a few browsers, the total snapshot count will usually stay well under the 5,000‑snapshot free limit. In that regime the static host costs nothing and Chromatic adds no charge, making the combination the cheapest.
Steps to verify for your project

Measure the gzipped size of the Storybook build: du -sh storybook-static | gzip -c storybook-static/* | wc -c (or check the output of build-storybook).
Count your stories: grep -r "export.*Story" src/**/*.stories.* | wc -l.
Estimate monthly snapshots: stories × browsers × expected builds per month. Compare this product to 5,000.
If the estimate is ≤ 5,000, you can rely on Chromatic’s free tier; otherwise consider limiting test frequency or switching to a static‑host‑only approach.

Missing diagnostic detail
If you cannot estimate the number of browsers or monthly test runs, please provide your typical test frequency (e.g., "we run Chromatic on every pull request, about 20 PRs per month") so the snapshot estimate can be refined and the recommendation confirmed.

Fixed-Cost Static Hosting vs Pay-Per-Snapshot Chromatic: Which is cheaper for low-traffic Storybook sites?

Goal

Constraints

Unresolved Decision

Specific Questions

1 answer

Answer

Confirmed facts

Likely explanation

Steps to verify for your project

Missing diagnostic detail

Your perspective belongs here.

0 question comments