A maioria dos apps React hoje é compilada com o Vite numa pasta de arquivos estáticos: um index.html e o JavaScript que desenha cada página. O Lobsite hospeda essa pasta. Rode npm run build, depois npx lobsite, e o app fica no ar num endereço *.lobsite.app com HTTPS. Os links diretos do React Router funcionam assim que o modo de página única é ativado.
Como funciona
- Faça o build do app com
npm run build. Um projeto Vite escrevedist/; um projeto antigo de Create React App escrevebuild/. - Rode
npx lobsiteno projeto. Ele encontra a pasta de build e publica. O primeiro deploy não precisa de conta e dura 6 horas. - Ative o modo de página única para o React Router:
spa = truenolobsite.toml, ou Aplicação de página única nas configurações do site. Mantenha o site com o link de resgate, numa conta gratuita.
React Router e links diretos
Com createBrowserRouter ou <BrowserRouter>, os endereços ficam como /orders/42. Clicar num link funciona em qualquer lugar, porque o React Router troca a página no navegador. Abrir esse endereço direto, ou recarregá-lo, pede /orders/42 ao servidor, e isso não é um arquivo. O modo de página única responde com o seu index.html, e o React Router desenha a página certa.
<HashRouter>(endereços como/#/orders/42) funciona sem o modo de página única, já que o servidor só vê/. As rotas de navegador ficam mais bonitas e são o que os buscadores esperam.- O modo framework do React Router com
ssr: falsetambém gera um app de página única. Comprerender, as páginas listadas viram arquivos HTML próprios, e o modo de página única cobre o resto. - TanStack Router e wouter funcionam igual ao React Router.
O deploy mostra uma dica quando encontra um roteador no package.json e o modo de página única está desligado.
Vindo do Create React App
A equipe do React descontinuou o Create React App em fevereiro de 2025 e recomenda um framework ou o Vite para apps novos. Um projeto CRA ainda pode ser publicado: o npx lobsite encontra build/ e pula public/, que o CRA copia para o build. Migrar para o Vite muda algumas coisas na hospedagem:
- a pasta de build passa a ser
dist/, encontrada do mesmo jeito; - as variáveis de ambiente
REACT_APP_passam a serVITE_, lidas comimport.meta.env; - o
index.htmlsai depublic/e vai para a pasta raiz do projeto.
Se o app precisa de renderização no servidor, veja o Next.js com export estático, ou uma hospedagem que roda React num servidor.
spa = true no lobsite.toml, ou um botão no painel: links diretos abrem seu app, arquivos ausentes continuam dando 404.
Os arquivos são guardados pelo hash. Refazer o deploy de um site sem mudanças envia 0 bytes.
Veja a prévia antes de ir ao ar. Volte atrás com um clique, redirecionamentos inclusos.
Todo site ganha um endereço *.lobsite.app com HTTPS desde o primeiro deploy.
Aponte um formulário para /_lobsite/forms/contact. Filtro de spam incluso.
Um deploy sem conta fica no ar por 6 horas. O link de resgate o mantém, de graça.
Hospedagens para React comparadas
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Links diretos do React Router | spa = true ou um botão no painel |
Uma regra em _redirects |
Um rewrite no vercel.json |
Não: HashRouter, ou 404.html servido com status 404 |
| Arquivos de script ausentes após um deploy | 404, um erro claro | O index.html do app |
O index.html do app |
404 |
| Renderização no servidor | Não | Sim, com um framework | Sim, com um framework | Não |
| Conta antes do primeiro deploy | Não: no ar por 6 horas, depois mantenha grátis | Sim | Sim | Sim, e um repositório |
| Formulários sem backend | Sim, quando o site está numa conta | Sim | Não | Não |
| Domínio próprio | Sim, grátis | Sim | Sim | Sim |
Para um app React que roda no navegador, que é o que o Vite gera, o Lobsite publica com um comando, envia só os pedaços que mudaram e guarda uma URL de prévia para cada deploy.
Perguntas frequentes
Por que recarregar uma página do React Router mostra "Not found"?
O endereço só existe dentro do app, então o servidor não tem arquivo para ele. Ative o modo de página única com spa = true no lobsite.toml, ou Aplicação de página única nas configurações do site.
Posso hospedar aqui um projeto Create React App?
Sim. Rode npm run build e npx lobsite; a pasta build/ é encontrada e publicada. Ative o modo de página única se ele usa React Router com rotas de navegador.
Um formulário em React consegue enviar dados sem backend?
Sim, se o formulário estiver no HTML compilado, por exemplo no index.html, e enviar para /_lobsite/forms/contact. Um formulário que só o React desenha não é encontrado no deploy, e os envios são recusados. A documentação de formulários explica como manter o formulário no HTML e enviá-lo com fetch().
Preciso de Next.js para hospedar um app React?
Não. Um app React compilado com o Vite são arquivos simples e roda em qualquer hospedagem estática. O Next.js é para renderização no servidor ou páginas pré-renderizadas, e tem seu próprio export estático.