Storefront TanStack
Use the public TanStack Start storefront implementation as the starting point for your website.
deco-sites/storefront-tanstack is a website implementation built on TanStack Start, React 19, and Cloudflare Workers. Use its sections, storefront components, and commerce wiring as the starting point for a site you own.
The repository configures Shopify in its site setup. It includes product and search interfaces, cart state, and editable page content. Having another commerce package installed does not configure that platform for your site; the registered app and domain adapters determine the behavior.
Framework version
The reviewed package manifest declares ^7.20.7 for @decocms/blocks, @decocms/blocks-admin, @decocms/blocks-cli, and @decocms/tanstack, with separate commerce app packages. This is the 7.x framework; use the current Blocks documentation alongside this starter.
Some older README sections refer to @decocms/start and @decocms/apps. The manifest and setup source use the split 7.x packages. Keep the repository's dependency and setup files together when adapting it. The Next preview describes a separate proposed API.
Run locally
Use Node.js 24 or later and npm, following the current 7.x runtime requirements. To inspect the starter locally:
git clone https://github.com/deco-sites/storefront-tanstack.git my-store
cd my-store
npm install
npm run devOpen the URL printed by Vite, normally http://localhost:5173. For a site you intend to connect to Studio, fork the repository into your GitHub organization and clone that fork instead, so the project can save changes to your repository.
Find the code and content
| Location | Purpose |
|---|---|
src/sections/ | CMS sections such as headers, product details, shelves, and content blocks |
src/components/ | Reusable storefront UI |
src/routes/ | TanStack routes, including the home and catch-all CMS routes |
src/platform/ | Domain state, server actions, hooks, and commerce adapters |
.deco/blocks/ | Saved page content and app configuration |
src/setup.ts | Framework setup, section registration, and configured commerce apps |
src/worker-entry.ts | Cloudflare entry with the CMS admin protocol and request handling |
wrangler.jsonc | Worker name, account, bindings, and deployment settings |
The site setup registers the Shopify app and imports generated content and section metadata. The CMS routes resolve page content and render its sections. Generated .gen. files are build outputs; change the source sections or saved content and regenerate them.
Make it your site
- Adapt the sections, styles, branding, and page content to your storefront.
- Configure your Shopify store through the app configuration in
.deco/blocks/deco-shopify.jsonand the corresponding site setup. The Shopify guide covers the integration. - Set your site identity and production origins in the site and Vite setup. Update
DECO_SITE_NAME, the Worker name, and the Cloudflare account inwrangler.jsonc. - Configure the KV bindings, tail-worker service, and telemetry destinations for your own deployment. The repository contains settings for its existing site; use resources belonging to your deployment.
- Connect the repository and preview server to Studio when you are ready for visual editing. Follow the Site Editor publishing workflow for reviewed content changes.
Build and deploy
The manifest's build script generates content, sections, loaders, schema, and routes before Vite builds the app:
npm run typecheck
npm run buildOnce your Cloudflare account and resources are configured, npm run deploy runs the build and Wrangler deployment. See Hosting for the deployment workflow and TanStack integration for the framework's Worker contract.
Source reviewed on 2026-10-05 at commit 7d37b7b. For moving an existing Fresh site, start with Migration rather than replacing its code with a template.