Como Colocar Domínio Próprio no Seu Projeto LOVABLE (Passo a Passo Completo)

 


Obs: Para que o site funcione em subpastas ao invés de usá-lo na raiz, vou deixar um tutorial mais logo abaixo (2ª parte desse post)


Parte 1: Entendendo os Conceitos Básicos

Antes de iniciar o processo técnico, é importante entender três conceitos fundamentais:

  • Internet: Pense nela como uma cidade gigante.
  • Domínio: É o endereço do seu site nessa cidade (ex: www.seusite.com.br). É como as pessoas encontrarão seu site.
  • Hospedagem: É o terreno onde seu site "mora", ou seja, onde todos os arquivos (fotos, documentos, etc.) ficam armazenados.

O vídeo recomenda a compra de domínios .com.br diretamente no Registro.BR, pois é a empresa detentora dos direitos, o que pode tornar as renovações mais baratas a longo prazo e facilitar a migração entre serviços de hospedagem. Para hospedagem, são mencionadas empresas como Hostinger, HostGator e GoDaddy. Este guia assume que você já possui um domínio e uma hospedagem contratados.

Parte 2: Preparando o Ambiente

  1. Baixe e Instale o Cursor: O primeiro passo é baixar e instalar o software chamado "Cursor". Você pode fazer o download e seguir o processo de instalação padrão.
  2. Baixe o Código do Projeto:
    • No seu projeto dentro do Lovable, clique no ícone do GitHub e depois em "Ver no GitHub".
    • Na página do GitHub, clique no botão verde "Code" e selecione "Download ZIP".
    • Salve o arquivo ZIP em um local de fácil acesso, como a Área de Trabalho.
  3. Extraia os Arquivos:
    • Localize o arquivo ZIP que você baixou.
    • Clique com o botão direito sobre ele e extraia seu conteúdo para uma nova pasta. É importante que os arquivos fiquem dentro de uma pasta organizada.

Parte 3: Processando os Arquivos do Projeto

  1. Abra o Projeto no Cursor:
    • Abra o programa Cursor.
    • Vá em "Open Folder" (Abrir Pasta) e selecione a pasta que você acabou de extrair. O programa irá importar os arquivos do seu projeto.
  2. Instale as Dependências:
    • No Cursor, abra um novo terminal ("Terminal" > "Novo Terminal").
    • Digite o comando npm i e pressione Enter. Aguarde o processo ser concluído. Isso instalará os pacotes necessários para o projeto.
  3. Construa o Projeto para Produção:
    • Após a finalização do comando anterior, digite um novo comando no mesmo terminal: npm run build e pressione Enter.
    • Esse comando irá processar e otimizar os arquivos do seu site, criando uma nova pasta chamada "dist" dentro da pasta do seu projeto. São os arquivos dentro desta pasta "dist" que serão enviados para a sua hospedagem.

Parte 4: Publicando o Site na Hospedagem

  1. Acesse o Gerenciador de Arquivos:
    • Faça login no painel da sua hospedagem (o exemplo usa a Hostinger).
    • Acesse o "Gerenciador de Arquivos" do seu site.
  2. Limpe o Diretório Antigo:
    • Dentro do gerenciador, navegue até a pasta public_html (ou um nome similar).
    • Delete todos os arquivos e pastas que estiverem dentro deste diretório para garantir uma instalação limpa.
  3. Envie os Novos Arquivos:
    • Abra a pasta "dist" que foi criada no seu computador.
    • Selecione todos os arquivos que estão dentro da pasta "dist" e arraste-os para dentro da pasta public_html no seu gerenciador de arquivos da hospedagem.
  4. Verifique o Resultado:
    • Após o upload ser concluído, acesse o endereço do seu domínio em um navegador. Seu novo site, criado no Lovable, deverá estar no ar, totalmente funcional.
Observação: se der erro ao executar o o comando "npm i" no cursor, abram o windows powershell como administrador e colem o seguinte comando: Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser só apertar enter e aguardar alguns segundos, depois feche.

-----------------------------------------
2º parte

(para melhor visualização, acesse o passo-a-passo que deixei no grok: https://grok.com/share/bGVnYWN5_382ac697-83b4-49d8-8777-5a4ac7ba6804 )

### Guia Passo a Passo: Configurar App Vite/React para Funcionar em Subpasta

Aqui vai um tutorial simples e reutilizável para quando você precisar configurar um app (como o gerado pelo Lovable) para rodar em uma subpasta (ex: `/fast-read-buddy/`) em vez da raiz do site. Isso ajusta caminhos de assets e roteamento client-side. Assuma que o projeto já tem Node.js, npm e Cursor instalados, e que você clonou o repo no GitHub.

#### Pré-requisitos:
- Nome da subpasta: Defina algo como `/meu-app/` (com barras inicial e final). Use o mesmo em todos os passos.
- Abra o Cursor na raiz do projeto (pasta clonada).

#### Passo 1: Ajuste o `vite.config.js`
- Abra o arquivo `vite.config.js` (na raiz).
- Adicione a linha `base: '/meu-app/',` no objeto de configuração (dentro da função `defineConfig`).
- Exemplo completo (substitua pelo seu conteúdo atual, adicionando só o `base`):

```javascript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";  // Ou o plugin que você usa
import path from "path";
import { componentTagger } from "lovable-tagger";  // Se aplicável

export default defineConfig(({ mode }) => ({
  base: '/meu-app/',  // Adicione esta linha
  server: {
    host: "::",
    port: 8080,
  },
  plugins: [react(), mode === "development" && componentTagger()].filter(Boolean),
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
}));
```

- Salve o arquivo.

#### Passo 2: Ajuste o Roteamento no `App.tsx` (se houver React Router)
- Abra `src/App.tsx`.
- Procure pela tag `<BrowserRouter>` (ou similar).
- Adicione o atributo `basename="/meu-app/"` nela.
- Exemplo:

```tsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
// ... outros imports

const App = () => (
  // ... providers
  <BrowserRouter basename="/meu-app/">  {/* Adicione o basename aqui */}
    <Routes>
      {/* Suas rotas */}
    </Routes>
  </BrowserRouter>
  // ...
);
```

- Se não houver roteamento, pule este passo.
- Salve o arquivo.

#### Passo 3: Build e Teste Local
- No terminal do Cursor (na raiz do projeto), rode:
  ```
  npm run build
  ```
  (Isso gera a pasta `dist/` com caminhos ajustados.)
- Para testar em dev mode (com subpasta):
  ```
  npm run dev
  ```
- Acesse no browser: `http://localhost:8080/meu-app/` (deve carregar sem erros).

#### Passo 4: Deploy na Subpasta
- Copie o conteúdo da pasta `dist/` para a subpasta no seu servidor/hosting (ex: via FTP para `/public_html/meu-app/` ou GitHub Pages).
- Configure o servidor para SPAs (se aplicável):
  - **Vercel/Netlify**: Automático (adicione `base` no vercel.json ou netlify.toml se precisar).
  - **Apache**: Adicione no `.htaccess` na subpasta:
    ```
    RewriteEngine On
    RewriteBase /meu-app/
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /meu-app/index.html [L]
    ```
  - **Nginx**: Adicione no config do site:
    ```
    location /meu-app/ {
      try_files $uri $uri/ /meu-app/index.html;
    }
    ```
- Acesse via `https://seusite.com/meu-app/` para verificar. Abra o console do browser (F12) e cheque por erros em assets ou rotas.

#### Dicas Extras:
- Se adicionar mais rotas no futuro, o `basename` herda automaticamente.
- Para reverter: Remova o `base` e o `basename`, rode `npm run build` e teste na raiz.
- Erros comuns: "Failed to load resource" = verifique o nome da subpasta (case-sensitive); 404 em rotas = fallback não configurado no servidor.
- Tempo estimado: 5-10 minutos.

Tags