Como publicar um app feito no Lovable: do domínio ao link compartilhável

Você construiu o app no Lovable. Funciona no preview. Agora precisa de um link que seu cliente possa abrir no celular dele.

Publicar um app feito no Lovable é mais simples do que parece. O processo tem 3 etapas: exportar o código, hospedar e conectar domínio.

O que o Lovable entrega quando você termina de construir

O Lovable gera código real. Não é um app preso dentro da plataforma. O que você constrói visualmente vira um projeto React com Vite, pronto pra rodar em qualquer servidor que aceite HTML estático.

Isso importa porque significa que você não fica preso ao Lovable pra hospedar. Pode publicar em Vercel, Netlify, Cloudflare Pages ou qualquer outro host. A escolha é sua.

Passo 1: exportar o código do Lovable

No editor do Lovable, procure o botão de export ou download. Ele gera um arquivo ZIP com todo o projeto: componentes React, estilos, configuração do Vite e dependências listadas no package.json.

Se o Lovable ainda não tem botão de export direto, use a alternativa: clone o repositório que o Lovable cria no GitHub. Todo projeto no Lovable pode ser conectado a um repositório GitHub. Uma vez conectado, o código fica acessível via git clone.

O que você vai encontrar no ZIP ou no repo:

• pasta src/ com os componentes React
• index.html na raiz
• package.json com as dependências
• vite.config.ts com a configuração de build

Se algo estiver faltando, peça pro Lovable gerar de novo. Às vezes a primeira exportação vem incompleta.

Passo 2: rodar o build local

Antes de subir pra qualquer lugar, rode o build na sua máquina pra garantir que tudo compila.

npm install
npm run build

O Vite vai gerar uma pasta dist/ com os arquivos estáticos prontos pra deploy. Se o build falhar, o erro vai apontar exatamente o que precisa ser corrigido. Dependência faltando, import quebrado, variável de ambiente não definida.

Se o build passa local, vai passar no host.

Passo 3: escolher onde hospedar

Aqui você tem 3 opções principais, todas com plano gratuito suficiente pra um app inicial.

Vercel é a escolha mais natural pra projeto React. Conecta direto no GitHub, faz deploy automático a cada push. O plano gratuito inclui 100 GB de banda e SSL automático. URL fica seu-app.vercel.app.

Netlify funciona do mesmo jeito. Conecta no GitHub, build automático, SSL incluso. Plano gratuito com 100 GB de banda. URL fica seu-app.netlify.app.

Cloudflare Pages é a opção mais barata em escala. Banda ilimitada no plano gratuito, deploy via git ou upload direto. URL fica seu-app.pages.dev.

Qual escolher? Se você já tem conta em algum dos 3, usa esse. Se não tem, Vercel é o mais simples pra começar.

Passo 4: subir o app

Via GitHub (recomendado):

1. Crie um repositório no GitHub e suba o código do Lovable.
2. Conecte o repo na plataforma de host escolhida (Vercel, Netlify ou Cloudflare Pages).
3. Configure o comando de build: npm run build.
4. Configure a pasta de output: dist.
5. Clique em deploy.

Em 2 a 5 minutos o app está no ar com URL própria.

Via upload direto (sem GitHub):

Algumas plataformas aceitam upload da pasta dist/ direto. Cloudflare Pages permite arrastar a pasta. Vercel e Netlify precisam do git.

Se você não quer usar GitHub, Cloudflare Pages é a opção.

Passo 5: conectar domínio próprio

URL seu-app.vercel.app funciona, mas passa menos credibilidade pro cliente. Domínio próprio muda a percepção.

Se você já tem domínio:

Adicione um registro CNAME no DNS apontando pro host. Na Vercel, o valor é cname.vercel-dns.com. Na Netlify, é o nome do site. No Cloudflare Pages, é seu-app.pages.dev.

O host vai gerar um certificado SSL automático. Leva de 5 minutos a 24 horas pra propagar, dependendo do provedor de DNS.

Se você não tem domínio:

Compre um domínio barato em provedores como Namecheap, Registro.br ou Google Domains. Domínio .com custa em torno de US$10 por ano. .com.br custa R$40 por ano no Registro.br.

Aponte o DNS pro host e pronto.

Passo 6: variáveis de ambiente

Se seu app usa API key, URL de backend ou qualquer configuração sensível, não coloque no código. Use variáveis de ambiente.

Na Vercel: Settings > Environment Variables. Adicione cada variável com nome e valor. O deploy seguinte já usa.

Na Netlify: Site settings > Environment variables. Mesmo processo.

No Cloudflare Pages: Settings > Environment variables. Mesmo processo.

Se seu app conecta com Supabase, as variáveis são SUPABASE_URL e SUPABASE_ANON_KEY. Se conecta com OpenAI, é OPENAI_API_KEY. Cada integração tem suas variáveis.

Passo 7: testar antes de enviar pro cliente

Antes de mandar o link, abra o app no celular. Não só no desktop.

Verifique:

• O layout quebra em tela pequena?
• Botões são clicáveis com o dedo?
• Formulários funcionam no mobile?
• O carregamento é rápido (abaixo de 3 segundos)?

Se algo não funciona no mobile, volte no Lovable e ajuste. O preview do Lovable tem modo mobile. Use ele antes de publicar de novo.

O que fazer quando o app precisa de backend

App feito no Lovable é front-end. Se ele precisa salvar dado, autenticar usuário ou processar pagamento, você precisa de backend.

A combinação mais comum é Lovable + Supabase. O Supabase oferece banco de dados, autenticação e storage num pacote só. O Lovable já tem integração nativa com Supabase.

Quando você exporta o código do Lovable que usa Supabase, as credenciais do Supabase ficam nas variáveis de ambiente. Não no código. Isso é seguro.

Se o app precisa de lógica server-side mais complexa (webhook de pagamento, cron job, processamento de imagem), adicione uma Edge Function no Supabase ou uma API Route na Vercel.

Erros comuns na publicação

Build falha no host mas passa local. Geralmente é diferença de versão do Node. O host usa uma versão e sua máquina usa outra. Force a versão no package.json com "engines": {"node": ">=18"}.

App abre mas dá erro 404 em rotas internas. O Vite gera SPA (Single Page Application). Todas as rotas precisam apontar pro index.html. Na Vercel, adicione rewrites no vercel.json. Na Netlify, crie _redirects com /* /index.html 200.

Imagens não carregam. Verifique se os caminhos das imagens são relativos (./imagem.png) e não absolutos (/imagem.png). O Vite resolve relativo. Absoluto quebra em subpath.

SSL não funciona. O host gera SSL automático. Se não funcionou, verifique se o DNS propagou. Use dig seudominio.com pra checar. Se o CNAME não resolveu, SSL não gera.

Quanto custa manter o app no ar

Se o app é leve (pouco tráfego, sem backend pesado), o custo é zero nos 3 hosts mencionados. Vercel, Netlify e Cloudflare Pages têm plano gratuito generoso.

Se o app cresce e passa do limite gratuito:

• Vercel: US$20/mês pelo plano Pro.
• Netlify: US$25/mês pelo plano Pro.
• Cloudflare Pages: US$5/mês pelo plano Pro (o mais barato dos 3).

O Supabase também tem plano gratuito que cobre app inicial. Quando passa do limite, começa em US$25/mês.

O próximo passo

Publicar é a parte fácil. O desafio real é fazer o app resolver um problema que alguém paga pra ter resolvido.

Se você quer aprender a sair da ideia e publicar o primeiro app na mesma semana, a Formação em Vibe Coding da ibe.IA ensina o caminho completo: Lovable, Supabase, deploy, domínio e o que fazer depois que o app está no ar.

Conheça a Formação em Vibe Coding

E se essa leitura te ajudou a entender o que está acontecendo, segue a ibe.IA no Instagram (@ibe.ia) que toda semana sai conteúdo desse jeito.