O Vite compila projetos React, Vue, Svelte, Solid e JavaScript puro numa pasta de arquivos estáticos, dist/. 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. Se o app tem roteamento no cliente, uma configuração faz os links diretos funcionarem.
Fazendo um jogo de navegador com um modelo Vite? O Guia de hospedagem Phaser abrange ativos de jogos, dimensionamento de telas e compilações de testes junto com esse fluxo de trabalho de implantação.
Como funciona
- Faça o build com
npm run build(ou seja,vite build). O app vai paradist/, com arquivos com hash emdist/assets/. - Rode
npx lobsiteno projeto. Ele publicadist/, nãopublic/, que o Vite já copiou para o build. O primeiro deploy não precisa de conta e dura 6 horas. - Ative o modo de página única se o app tem um roteador: adicione
spa = trueaolobsite.toml, ou ative Aplicação de página única nas configurações do site. Depois mantenha o site com o link de resgate, numa conta gratuita.
Roteamento e modo de página única
Um app Vite com React Router, Vue Router ou TanStack Router tem um único index.html. Abrir /settings diretamente pede ao servidor um arquivo que não existe. Com o modo de página única ligado, o Lobsite responde a esses caminhos com o seu index.html, e o roteador desenha a página:
# lobsite.toml
spa = true
Só requisições de página recebem o app. Um arquivo ausente, como um antigo /assets/index-3f9a.js, recebe um 404 de verdade, então um visitante que ainda tem a versão anterior aberta depois de um deploy vê um erro claro, e não HTML no lugar de um script. O deploy mostra uma dica quando o package.json tem um roteador e o modo de página única está desligado. Mais na documentação.
vite.config e o build
basefica no padrão,/: o app é servido da raiz do endereço. Defina só para um site de projeto do GitHub Pages e remova quando mudar.- Variáveis de ambiente que começam com
VITE_são escritas no build. Qualquer pessoa que abra o app pode vê-las, então não coloque segredos nelas; os arquivos.envem si nunca são publicados. - Várias páginas (
build.rollupOptions.inputcom mais de um arquivo HTML) formam um site de várias páginas: cada página é um arquivo e o modo de página única não é necessário. npm run previewservedist/localmente, a checagem mais rápida antes de um deploy.
Cache de arquivos com hash
O Vite coloca um hash do conteúdo de cada arquivo no nome, como index-3f9a.js, então um arquivo com determinado nome nunca muda. O Lobsite também guarda arquivos pelo conteúdo, então um deploy envia só os pedaços que mudaram. Para os navegadores guardarem esses arquivos por um ano, adicione uma regra de cabeçalho:
[[headers]]
for = "/assets/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
O index.html é sempre checado de novo, então os visitantes recebem a nova versão logo depois de um deploy.
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.
Redirecionamentos, cabeçalhos e formulários ficam no lobsite.toml e acompanham cada deploy.
Um deploy sem conta fica no ar por 6 horas. O link de resgate o mantém, de graça.
Hospedagens para Vite comparadas
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Links diretos num app de página única | spa = true ou um botão no painel |
Uma regra em _redirects |
Um rewrite no vercel.json |
Não: copie index.html para 404.html, servido com status 404 |
| Arquivos de script ausentes | 404 | O index.html do app |
O index.html do app |
404 |
| Build no servidor | Não: você publica dist/ |
Sim | Sim | No GitHub Actions |
| Conta antes do primeiro deploy | Não: no ar por 6 horas, depois mantenha grátis | Sim | Sim | Sim, e um repositório |
| Domínio próprio | Sim, grátis | Sim | Sim | Sim |
Netlify e Vercel fazem build a partir do Git e rodam funções no servidor. O Lobsite é o jeito mais rápido de colocar no ar um app Vite compilado, a partir da sua máquina, do CI ou de um agente de IA, com roteamento de página única numa linha ou num clique.
Perguntas frequentes
Por que as páginas do meu app Vite, fora a inicial, mostram "Not found"?
O app usa roteamento no cliente e o servidor não tem arquivo para esses caminhos. Ative o modo de página única: spa = true no lobsite.toml, ou Aplicação de página única nas configurações do site.
O Lobsite roda o meu build do Vite?
Não. Faça o build na sua máquina ou no CI e depois publique dist/. O que você conferiu com npm run preview é exatamente o que vai ao ar.
Posso usar variáveis de ambiente do Vite?
Sim, as VITE_, que são escritas no build quando você o roda. Faça o build de novo depois de mudá-las. Tudo o que é secreto fica num servidor, não num app Vite.
Um site Vite de várias páginas precisa do modo de página única?
Não. Cada página HTML é um arquivo próprio, e about.html abre em /about. Deixe o modo de página única desligado, para que um endereço digitado errado receba o seu 404.html.