Skip to content
decodecodeveloper docs
Storefront → Templates

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 dev

Open 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

LocationPurpose
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.tsFramework setup, section registration, and configured commerce apps
src/worker-entry.tsCloudflare entry with the CMS admin protocol and request handling
wrangler.jsoncWorker 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

  1. Adapt the sections, styles, branding, and page content to your storefront.
  2. Configure your Shopify store through the app configuration in .deco/blocks/deco-shopify.json and the corresponding site setup. The Shopify guide covers the integration.
  3. Set your site identity and production origins in the site and Vite setup. Update DECO_SITE_NAME, the Worker name, and the Cloudflare account in wrangler.jsonc.
  4. 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.
  5. 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 build

Once 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.