Blog Alex Rudson

Carregando

dicas de informáticaIA

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

Alex Rudson | 17 de setembro de 2025
Assistir no YouTube

 

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.
8 Visitas Totais
8 Visitantes Únicos
Tags 
ANTIGOS
O mapa do risco financeiro
MAIS RECENTES
Eclesiastes e os Filósofos do Pessimismo
Please Don't Spam Here. All the Comments are Reviewed by Admin.
Por favor, não envie spam aqui. Todos os comentários são revisados pelo administrador.
Merci de ne pas envoyer de spams. Tous les commentaires sont modérés par l'administrateur.

Postar um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *