Base de Conhecimento

Os projetos criados no Lovable são normalmente aplicações Vite que geram um frontend estático. Depois do build, os arquivos da pasta dist podem ser publicados em um domínio ou subdomínio da hospedagem cPanel.

O que você precisará

• acesso ao projeto no Lovable;
• código sincronizado com o GitHub ou baixado pelo Lovable;
• Node.js 22 instalado no computador utilizado para gerar o build;
• acesso ao cPanel;
• domínio ou subdomínio já adicionado à hospedagem;
• variáveis de ambiente exigidas pelo projeto.

1. Obter uma cópia do código

No Lovable, acesse as configurações Git do projeto e conecte-o ao GitHub. Quando a opção estiver disponível na conta, também é possível utilizar Download codebase.

A sincronização com GitHub é recomendada porque preserva o histórico e facilita novas atualizações. Ela copia o código, mas não constitui backup do banco de dados, usuários, arquivos enviados ou segredos do backend.

2. Gerar a versão de produção

Extraia ou clone o projeto em seu computador. Abra um terminal na pasta que contém o arquivo package.json.

Quando existir package-lock.json, execute:

npm ci
npm run build

Se o projeto não possuir package-lock.json, utilize:

npm install
npm run build

Ao final, deverá existir uma pasta chamada dist. Se o comando apresentar erro, não envie o código-fonte ao servidor como tentativa de contornar o build.

3. Variáveis de ambiente

Aplicações conectadas ao Lovable Cloud ou Supabase podem depender de variáveis como:

VITE_SUPABASE_URL
VITE_SUPABASE_PUBLISHABLE_KEY
VITE_SUPABASE_PROJECT_ID

Essas variáveis precisam estar disponíveis durante o comando npm run build. Valores iniciados por VITE_ são incorporados ao frontend e podem ser vistos pelo navegador.

Nunca coloque senhas, chaves privadas, tokens administrativos ou uma chave service_role em variável exposta ao frontend. Segredos devem permanecer no backend ou em Edge Functions.

4. Confirmar a raiz do domínio

1. Acesse cPanel → Domínios → Domínios.
2. Localize o domínio ou subdomínio.
3. Anote a raiz do documento.
4. Abra essa pasta no Gerenciador de Arquivos.

Não presuma que a pasta correta seja sempre public_html. Domínios adicionais normalmente utilizam diretórios próprios.

5. Enviar os arquivos

1. Faça backup do conteúdo atualmente publicado.
2. Compacte os arquivos existentes dentro da pasta dist.
3. Envie o arquivo ZIP para a raiz do documento.
4. Utilize Extrair no Gerenciador de Arquivos.
5. Confirme que index.html ficou diretamente na raiz do domínio.

O caminho correto deve ser semelhante a:

raiz-do-dominio/index.html
raiz-do-dominio/assets/

Evite deixar a estrutura como raiz-do-dominio/dist/index.html, pois o servidor procurará o arquivo inicial na pasta errada.

6. Configurar as rotas da aplicação

Aplicações Lovable normalmente utilizam rotas no navegador. Sem uma regra de fallback, abrir diretamente uma página como /clientes pode retornar erro 404.

Crie um arquivo .htaccess na raiz do domínio com:

RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Se a aplicação for publicada dentro de uma subpasta, a configuração do build e as regras de rota precisarão ser adaptadas. Para usuários iniciantes, é mais simples utilizar o domínio ou um subdomínio diretamente na raiz.

7. Ativar HTTPS e testar

1. Confirme que o DNS aponta para a hospedagem.
2. Aguarde a emissão do certificado pelo AutoSSL.
3. Ative Forçar redirecionamento HTTPS no cPanel.
4. Teste a página inicial e endereços internos em janela privativa.
5. Teste login, formulários, upload de arquivos e integrações.

Como publicar uma atualização

Depois de alterar o projeto, sincronize o código, execute novamente o build e substitua os arquivos publicados pelo novo conteúdo de dist. Variáveis VITE_ alteradas exigem novo build; editá-las apenas no servidor depois da compilação não atualiza os arquivos já gerados.