← todos os posts
Tutorial 9 min de leitura

Publicar de verdade: domínio, chaves e a tela branca que ninguém explica

Funciona no preview e fica branco no seu domínio. Não é azar: são três operações atrás de um botão só. O passo a passo, na ordem, com onde clicar.

"'A IA gerou, mas onde está meu app?' Você precisa rodar comandos no terminal. Precisa de Node.js instalado. Precisa entender o que é localhost. Pra quem não é programador, é uma parede."

Isso é um programador brasileiro descrevendo a parede número 1 do mapa. Eu já escrevi um post inteiro reclamando que o tutorial dessa parede não existia — que todo mundo pula as etapas entre "gerou" e "no ar". Reclamar é fácil. Este é o tutorial: do app que existe numa plataforma (Lovable, Replit, Bolt, Vercel) até um endereço que é seu, funcionando. Sem terminal.

Por que "publicar" dá errado: são três coisas atrás de um botão

O botão diz "Publish". O que ele esconde são três operações diferentes, que falham de jeitos diferentes:

  1. Pôr no ar no endereço da plataforma (seuapp.lovable.app, seuapp.vercel.app).
  2. Entregar as chaves ao servidor — os valores que o app precisa pra falar com o banco, o pagamento, o e-mail.
  3. Ligar o seu domínio em cima disso.

Todo tutorial trata as três como uma. Por isso, quando dá errado, você não sabe em qual está — e a tela branca não ajuda, porque é o único sintoma que as três compartilham. A regra do post inteiro: uma de cada vez, conferindo entre elas.

Antes de tudo: o que é uma variável de ambiente

Vai aparecer em todo passo, então traduzo já.

Variável de ambiente é um valor guardado fora do código — tipo uma senha —, que muda conforme o lugar onde o app está rodando. No seu computador, o app usava a chave de teste do pagamento. No servidor, precisa usar a chave real. O código é o mesmo; o valor, não. Então ele fica fora do código, e cada lugar tem o seu.

A consequência que ninguém diz: as variáveis que existiam na sua máquina não vão junto quando você publica. O código sobe; as chaves ficam. E o app no ar, sem chave nenhuma, faz a única coisa que sabe: nada. Tela branca.

Elas vêm em duas famílias, e a diferença vale dinheiro:

  • Pública: pode ir pro navegador do visitante. Endereço do banco, chave "publicável". Os sistemas marcam com um prefixo no nome — VITE_ em projeto do Lovable, NEXT_PUBLIC_ em projeto Next.js. A documentação da Vercel resume: esses prefixos existem "pra expor variáveis ao navegador".
  • Secreta: só existe no servidor. Chave secreta do pagamento, chave de serviço do banco. O Lovable guarda essas num lugar separado, chamado Secrets, e a documentação diz o essencial: elas "nunca chegam ao navegador".

A regra que evita o desastre cabe numa linha: chave secreta nunca vai pro lado do navegador. Se o nome começa com VITE_ ou NEXT_PUBLIC_, qualquer visitante lê. Não é bug — é o que o prefixo significa.

Passo 1: publique no endereço da plataforma. Só nele.

Não conecte domínio ainda. Publique no endereço que a plataforma te dá.

No Lovable: botão Publish, no canto superior direito; no fim ele confirma "Your website is live" com o link. Na Vercel, cada envio já gera um endereço .vercel.app.

Agora confira, de um jeito específico: abra uma janela anônima (Ctrl+Shift+N no Chrome; Cmd+Shift+N no Mac) e entre no endereço. Faça login. Crie um item — um pedido, um cliente, o que o app guarda. Saia.

Se isso funcionou, o app está no ar e as chaves chegaram. Se ficou branco aqui, o problema não é domínio — você ainda nem tem domínio. Vá pro próximo passo antes de tocar em qualquer outra coisa.

Passo 2: a tela branca — as três causas, na ordem

Tela branca é o pior erro que existe, porque não diz nada. Mas tem três causas comuns, e elas se testam em ordem, da mais barata pra mais cara.

Causa 1: você não publicou o que acha que publicou

A documentação do Lovable é direta: "publicar envia uma foto do projeto. Mudanças não são enviadas automaticamente pro app no ar." Você mexeu no preview, viu funcionar, e o que está no ar é a versão de ontem. Um pontinho aparece no botão Publish quando há mudança não publicada. Clique em Publish changes.

Teste: publique de novo. Abra em janela anônima. Metade dos casos morre aqui.

Causa 2: falta uma variável no servidor

É a causa mais comum da tela branca que funciona no preview. A chave estava no seu ambiente de trabalho e não foi cadastrada no servidor.

Onde cadastrar:

  • Lovable: More → Cloud → Secrets, pra chave secreta. Variável pública (VITE_) fica no arquivo .env, no editor de código. Detalhe da documentação: não mande "esconder" o .env do repositório — o Lovable precisa dele pra montar o app publicado.
  • Vercel: projeto → Settings → Environment Variables. Marque em qual ambiente vale (Production é o que está no ar). Depois, Redeploy — a documentação é explícita: "mudanças em variáveis de ambiente não são aplicadas a publicações anteriores, só às novas". Cadastrou e não republicou? A chave existe no painel e não existe no app.

Como saber qual falta sem ler código: pergunte pra IA, assim:

"Liste todas as variáveis de ambiente que este projeto lê, com o nome exato de cada uma e se ela é pública ou secreta. Não mude nada."

Compare com o painel. A que está na lista e não está no painel é a sua tela branca. Cadastre uma, republique, confira em janela anônima. Só então a próxima — porque se cadastrar cinco e continuar branco, você não sabe qual das cinco veio errada.

Causa 3: erro de verdade — e onde ele está escrito

Se as variáveis estão todas lá e continua branco, o app está quebrando ao abrir e deixou um recado. O recado se chama log — o registro do que aconteceu, linha por linha — e mora num painel que ninguém te mostrou.

  • Lovable: More → Cloud → Logs. A documentação avisa que ele não atualiza sozinho: aperte Refresh. Tem filtro pra mostrar só erro e guarda até cinco dias.
  • Vercel: a aba Logs do projeto.

Você não precisa entender o log. Precisa achar a linha vermelha, copiar inteira e colar no chat com isto:

"Não conserte ainda. Me explique em português o que esta linha diz, qual arquivo ou variável ela menciona, e o que eu confiro no painel antes de você mudar qualquer código."

O "não conserte ainda" é a parte importante. Sem ele, a IA muda dez coisas e o log seguinte é outro.

Passo 3: só agora, o domínio

Com o app funcionando no endereço da plataforma, ligar o domínio é uma operação separada. Se der errado, você sabe que é o domínio, porque o resto já estava conferido.

Uma tradução antes. DNS é a lista telefônica da internet: quando alguém digita seuapp.com.br, o DNS diz qual máquina atende. Ligar o domínio é escrever, nessa lista, "seuapp.com.br atende na máquina da plataforma". Você faz isso no painel de onde comprou o domínio (Registro.br, GoDaddy, Cloudflare).

No Lovable, o procedimento oficial pede dois registros:

  • Um registro A — o que aponta o nome pra máquina — com o valor 185.158.133.1.
  • Um registro TXT — um texto de verificação — no nome _lovable, com o valor lovable_verify=... que a tela te mostra.

Aí é clicar em Done e esperar. A documentação diz: "mudanças de DNS podem levar até 72 horas, embora a maioria esteja no ar em poucas horas." O certificado de segurança (o cadeado) é gerado sozinho. Conectar domínio novo exige plano pago.

Três armadilhas que estão na mesma documentação e ninguém lê:

  1. Cloudflare: o registro tem que ficar como "DNS only" (nuvem cinza), não "Proxied" (laranja). Com a laranja, a verificação nunca termina.
  2. Registro AAAA: é o endereço na versão nova da internet (IPv6). Se sobrou um apontando pra outro lugar, alguns navegadores seguem ele em vez do seu A. Apague.
  3. Registro velho: domínio que já teve site carrega registros antigos. Pro nome que você está ligando, só o A e o TXT devem sobrar.

Passo 4: confira de novo, no domínio, em janela anônima

Domínio no ar, refaça o teste do passo 1 — janela anônima, login, criar item — no endereço novo.

E aqui aparece a armadilha que engana mais gente: o app abre no domínio, mas o login não funciona. No endereço da plataforma funcionava. É que o serviço de login tem uma lista de endereços permitidos, e o seu domínio não está nela. No Supabase, o banco por trás do Lovable e de muita outra plataforma, isso fica em Authentication → URL Configuration: o Site URL (pra onde o login volta por padrão) e a lista de Redirect URLs. Coloque o domínio novo nas duas.

Depois, trinta segundos: no domínio, botão direito → "Exibir código-fonte da página" → busque sk_live e service_role. Se aparecer, uma chave secreta foi parar no navegador — o que fazer está aqui.

A armadilha do cache

Você muda, publica, abre o site — e está igual. Antes de dizer "não funcionou", janela anônima.

O navegador guarda uma cópia das páginas que já visitou pra abrir mais rápido. Chama cache. E ele te mostra a cópia velha com a maior cara de nova. Janela anônima não tem cópia guardada: é o teste de dez segundos que separa "não publicou" de "publicou e o meu navegador não viu". Se na anônima está certo, não é problema seu nem da plataforma — espera, ou limpa o cache.

O resumo, na ordem

  1. Publique no endereço da plataforma. Confira em janela anônima.
  2. Branco? Republique → confira variável por variável → leia o log.
  3. Só então o domínio: registro A e TXT, esperar, Cloudflare em nuvem cinza.
  4. Confira de novo no domínio: login, item, busca por sk_live.
  5. Não aparece? Janela anônima antes de qualquer conclusão.

Nenhum desses passos é programar. É o que um eletricista faz quando a luz não acende: interruptor, fio, bocal — nessa ordem, um por vez.

Seu app está no ar. Agora começa o que o tutorial nunca mostra: quem é dono de cada pedaço disso, o segundo mês. Publicar era a primeira parede. Foi.

Fontes