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
- 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.
-
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.
-
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
-
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.
-
Instale as Dependências:
- No Cursor, abra um novo terminal (“Terminal” > “Novo Terminal”).
- Digite o comando
npm ie pressione Enter. Aguarde o processo ser concluído. Isso instalará os pacotes necessários para o projeto.
-
Construa o Projeto para Produção:
- Após a finalização do comando anterior, digite um novo comando no mesmo terminal:
npm run builde 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.
- Após a finalização do comando anterior, digite um novo comando no mesmo terminal:
Parte 4: Publicando o Site na Hospedagem
-
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.
-
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.
- Dentro do gerenciador, navegue até a pasta
-
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_htmlno seu gerenciador de arquivos da hospedagem.
- 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.