Publicação

Gere o build, defina metadados e faça deploy de Acme Deploys.

O app deste capítulo está rodando no seu console. Abra o console com ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (ative os recursos de desenvolvedor primeiro), depois experimente.
Assistir ao capítulo3:04

Neste capítulo

  • Build
  • Metadata
  • Hospedagem estática
  • Antes de fazer deploy

text build gera um cliente estático e, se você tiver manipuladores de rota, um servidor para text start.

Build

bun run build
   ▼ Text.js 1.0.1 (Turbolog)   Creating an optimized console production build... ✓ Compiled successfully in 0.8s ✓ Collecting route data ✓ Generating static console cells (3/4) ✓ Prerendering console shells (3/3) ✓ Prerendering curl frames (3/3) ✓ Finalizing console optimizationRoute (app)                              Type       Target┌ ○ /                                    Static     console.log (%c)├ ○ /_not-found                          Static     console.log (%c)├ ○ /deployments                         Static     console.log (%c)├ ƒ /deployments/[id]                    Dynamic    console.log (%c)├ ○ /settings                            Static     console.log (%c)└ ƒ /api/deployments                     Dynamic    Route Handler+ First Load JS shared by all             698.2 kB (241.6 kB gzip)○  (Static)   prerendered as static console cellsƒ  (Dynamic)  on-demand console reconciliation

text start serve o build e executa seus manipuladores de rota. Ele funciona em qualquer host com Bun 1.2+ ou Node.js 22+.

Metadata

Defina o título da aba do navegador no layout raiz. As páginas podem sobrescrevê-lo.

app/deployments/page.tsx+1tsx
Adicionado: export const metadata = { title: "Deployments" }; // → "Deployments · Acme"

Hospedagem estática

Sem manipuladores de rota, o build é um site estático comum. Cada rota estática tem seu próprio arquivo HTML. Rotas dinâmicas como /deployments/[id] são servidas por index.html.

Na Vercel e no Cloudflare Pages, text build detecta a plataforma e grava esse fallback automaticamente. Outros hosts estáticos precisam de uma regra de reescrita. No Netlify, adicione um arquivo _redirects a public/:

public/_redirects+1text
Adicionado: /*  /index.html  200

O Netlify serve os arquivos existentes antes de aplicar a regra, então os assets e as rotas pré-renderizadas não são afetados.

Antes de fazer deploy

  • Desative Preservar registro nas configurações do console. Seus usuários também precisam manter essa opção desativada.
  • Teste tamanhos estreitos como 80×24. O DevTools acoplado à lateral gera uma grade estreita.
  • Execute bun test.

Pressione Enter no console para fazer deploy. Depois, resgate seu certificado.

Experimentar

Este é Acme Deploys ao final do capítulo, rodando no DevTools. Clique na área de entrada e use as teclas abaixo.

▼ 10 · Publicação

Abrir o console

⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C

O app renderiza no DevTools.Primeiro ative “Mostrar recursos para desenvolvedores web” em Ajustes do Safari → Avançado. Depois clique aqui e pressione Enter.

Abrir em um computador

Este app renderiza no console do DevTools, que precisa de um navegador de computador.

Questionário

2 perguntas

Responda a todas as perguntas para concluir o capítulo.

Do que uma hospedagem estática precisa para rotas dinâmicas?

 

Qual configuração do console deve ficar desativada?