Template full-stack na Cloudflare
Seu app completo no ar, sem montar quebra-cabeça.
Login por código no e-mail, banco de dados, arquivos, e-mail, tarefas agendadas e esta landing já vêm prontos. Você clona, roda cinco comandos e publica com um botão. O resto é o seu negócio.
Roda inteiro em um Worker da Cloudflare. Plano gratuito dá conta do começo.
Feito com o que você já ouviu falar
- TanStack Start
- React 19
- Tailwind v4
- shadcn/ui
- Cloudflare Workers
- D1
- R2
- Drizzle
- Better Auth
- MDX
O que já vem pronto
Basicamente tudo que você montaria na mão nas duas primeiras semanas.
- 01
Login sem senha
Um código de seis dígitos chega no e-mail e pronto. Google e GitHub ligam quando você colar as chaves. Senha continua existindo para quem quiser.
src/lib/auth.ts - 02
Banco de dados de verdade
D1 (SQLite da Cloudflare) com Drizzle: você escreve o schema em TypeScript e as migrações saem sozinhas.
src/db/schema.ts - 03
Arquivos no R2
Upload e download sem taxa de saída. Tem uma demo pronta para você copiar.
src/routes/demo/r2.tsx - 04
E-mail que funciona no primeiro dia
Sem chave nenhuma, o e-mail aparece no terminal. Com a chave do Resend ou o Email Service da Cloudflare, vai de verdade.
src/lib/email.ts - 05
Landing, blog e docs
Esta página é um arquivo de dados. Blog, docs, termos e privacidade são MDX e viram HTML estático na hora do build.
src/content/landing.ts - 06
Proteções que ninguém lembra
Limite de requisições por IP, cabeçalhos de segurança e um cron diário que limpa sessões vencidas. Já ligados.
src/server.ts
Como se usa
Três passos. Nenhum deles é "configurar servidor".
- 1
Clone e rode
Abra a pasta no Claude Code e peça /setup. Ele instala, cria o .dev.vars, roda a migração e sobe o app em localhost:3000.
$ npm install$ npm run db:migrate:local$ npm run dev - 2
Faça o seu
Troque o texto desta página, crie suas tabelas em src/db/schema.ts e suas telas em src/routes. Os demos mostram o caminho de cada peça.
$ src/content/landing.ts$ src/db/schema.ts$ src/routes/ - 3
Publique
Peça /deploy. Ele cria o banco, troca o ID, sobe os segredos e publica. Ou use o botão "Deploy to Cloudflare" do README.
$ cf auth login$ cf d1 create$ cf deploy
Quem já usou
O que dizem depois de publicar o primeiro app.
“Eu achava que subir um app com login era coisa de programador. Em uma tarde o meu estava no ar.”
NPNome da pessoaExemplo: dona de clínica“O que mais me travava era o deploy. Aqui é um comando, e o resto o template já resolveu.”
NPNome da pessoaExemplo: corretor de imóveis“Peguei o template, troquei a landing, criei duas tabelas. Pronto, meu MVP para testar com clientes.”
NPNome da pessoaExemplo: consultora
Dúvidas
O que todo mundo pergunta antes de clonar.
Preciso saber programar?
Precisa saber pedir. O template vem com regras para o Claude Code (e outros agentes) e com skills de /setup e /deploy. Você descreve o que quer, confere o resultado e aprende no caminho.
Quanto custa manter no ar?
O plano gratuito da Cloudflare cobre Workers, D1 e R2 com limites generosos para um app começando. Você só paga quando crescer. E-mail de verdade precisa do Resend (tem plano grátis) ou do Email Service (plano pago da Cloudflare).
O que é esse "beta" do cf?
O cf é o novo CLI da Cloudflare e o Vite plugin v2 é a nova forma de rodar o app. Os dois estão em beta, então as versões ficam fixadas no package.json. Atualize de propósito, lendo o changelog, e nunca misture com o Wrangler.
Posso usar Wrangler?
Não neste projeto. A configuração vive em cloudflare.config.ts, e o Wrangler ignora esse arquivo. Misturar os dois é a forma mais rápida de quebrar o deploy.
Funciona com outro agente além do Claude Code?
Funciona. O CLAUDE.md e o AGENTS.md carregam as mesmas regras, e as skills são Markdown comum em .claude/skills. Codex, Cursor e afins leem o mesmo texto.