Storefront TanStack — deco developer docs

deco-sites/storefront-tanstack é uma implementação de website criada com TanStack Start, React 19 e Cloudflare Workers. Use suas seções, componentes de storefront e integração de comércio como ponto de partida para um site seu.

O repositório configura Shopify no setup do site. Inclui interfaces de produtos e busca, estado do carrinho e conteúdo de páginas editável. Instalar o pacote de outra plataforma de comércio não a configura para o site; o app registrado e os adaptadores de cada domínio determinam o comportamento.

Versão do framework

O manifesto de pacotes revisado declara ^7.20.7 para @decocms/blocks, @decocms/blocks-admin, @decocms/blocks-cli e @decocms/tanstack, com pacotes de comércio separados. Este é o framework 7.x; use a documentação atual de Blocks junto deste template.

Algumas partes mais antigas do README mencionam @decocms/start e @decocms/apps. O manifesto e o código de setup usam os pacotes separados da versão 7.x. Mantenha as dependências e os arquivos de setup do repositório em conjunto ao adaptá-lo. A versão Next preview descreve uma API proposta separada.

Executar localmente

Use Node.js 24 ou superior e npm, seguindo os requisitos atuais do runtime 7.x. Para conhecer o template localmente:

git clone https://github.com/deco-sites/storefront-tanstack.git my-store
cd my-store
npm install
npm run dev

Abra a URL exibida pelo Vite, normalmente http://localhost:5173. Para um site que você pretende conectar ao Studio, faça um fork na sua organização do GitHub e clone esse fork, permitindo que o projeto salve mudanças no seu repositório.

Encontrar o código e o conteúdo

Local	Função
`src/sections/`	Seções de CMS, como cabeçalhos, detalhes de produtos, vitrines e blocos de conteúdo
`src/components/`	Componentes reutilizáveis do storefront
`src/routes/`	Rotas do TanStack, incluindo a home e a rota geral de CMS
`src/platform/`	Estado dos domínios, ações de servidor, hooks e adaptadores de comércio
`.deco/blocks/`	Conteúdo salvo das páginas e configuração de apps
`src/setup.ts`	Setup do framework, registro de seções e apps de comércio configurados
`src/worker-entry.ts`	Entrada do Cloudflare com o protocolo de admin do CMS e tratamento de requisições
`wrangler.jsonc`	Nome do Worker, conta, bindings e configuração de deploy

O setup do site registra o app Shopify e importa conteúdo e metadados de seções gerados. As rotas de CMS resolvem o conteúdo da página e renderizam suas seções. Arquivos .gen. são resultados da geração; altere as seções ou o conteúdo de origem e gere-os novamente.

Adaptar ao seu site

Adapte as seções, os estilos, a marca e o conteúdo das páginas ao seu storefront.
Configure sua loja Shopify no app em .deco/blocks/deco-shopify.json e no setup correspondente. O guia de Shopify apresenta a integração.
Defina a identidade e as origens de produção no setup do site e do Vite. Atualize DECO_SITE_NAME, o nome do Worker e a conta Cloudflare em wrangler.jsonc.
Configure os bindings de KV, o serviço de tail worker e os destinos de telemetria do seu deploy. O repositório contém configurações do site existente; use recursos da sua própria implantação.
Conecte o repositório e o servidor de preview ao Studio quando estiver pronto para a edição visual. Siga o fluxo de publicação do Editor de Sites para revisar mudanças de conteúdo.

Build e deploy

O script de build do manifesto gera conteúdo, seções, loaders, schema e rotas antes de executar o build do Vite:

npm run typecheck
npm run build

Com sua conta Cloudflare e os recursos configurados, npm run deploy executa o build e o deploy com Wrangler. Consulte Hospedagem para o fluxo de deploy e Integração com TanStack para o contrato do Worker no framework.

Código revisado em 2026-10-05 no commit 7d37b7b. Para migrar um site Fresh existente, comece por Migração, em vez de substituir o código por um template.