Vite compila proyectos de React, Vue, Svelte, Solid y JavaScript puro en una carpeta de archivos estáticos, dist/. Lobsite aloja esa carpeta. Ejecuta npm run build, luego npx lobsite, y la app estará publicada en una dirección *.lobsite.app con HTTPS. Si la app tiene enrutado en el cliente, un ajuste hace que funcionen los enlaces profundos.
¿Crear un juego de navegador con una plantilla Vite? El Guía de hosting de Phaser cubre los recursos del juego, el tamaño del lienzo y las versiones de prueba junto con este flujo de trabajo de implementación.
Cómo funciona
- Compila con
npm run build(es decir,vite build). La app queda endist/, con archivos con hash endist/assets/. - Ejecuta
npx lobsiteen el proyecto. Despliegadist/, nopublic/, que Vite ya copió al build. El primer deploy no necesita cuenta y dura 6 horas. - Activa el modo de una sola página si la app tiene router: añade
spa = truealobsite.tomlo activa Aplicación de una sola página en los ajustes del sitio. Después conserva el sitio con el enlace para reclamarlo, en una cuenta gratuita.
Enrutado y modo de una sola página
Una app de Vite con React Router, Vue Router o TanStack Router tiene un único index.html. Abrir /settings directamente pide al servidor un archivo que no existe. Con el modo de una sola página activado, Lobsite responde a esas rutas con tu index.html y el router dibuja la página:
# lobsite.toml
spa = true
Solo las peticiones de página reciben la app. Un archivo que falta, como un antiguo /assets/index-3f9a.js, recibe un 404 de verdad, así que quien aún tenga abierta la versión anterior tras un deploy ve un error claro, no HTML en lugar de un script. El deploy muestra un consejo cuando package.json tiene un router y el modo de una sola página está desactivado. Más en la documentación.
vite.config y el build
basese queda en su valor por defecto,/: la app se sirve desde la raíz de su dirección. Cámbialo solo para un sitio de proyecto de GitHub Pages y quítalo al mudarte.- Las variables de entorno que empiezan por
VITE_se escriben en el build. Cualquiera que abra la app puede verlas, así que no guardes secretos en ellas; los archivos.envnunca se despliegan. - Varias páginas (
build.rollupOptions.inputcon más de un archivo HTML) forman un sitio multipágina: cada página es un archivo y no hace falta el modo de una sola página. npm run previewsirvedist/en local, la comprobación más rápida antes de un deploy.
Caché de archivos con hash
Vite pone un hash del contenido de cada archivo en su nombre, como index-3f9a.js, así que un archivo con un nombre dado nunca cambia. Lobsite también guarda los archivos por contenido, de modo que un deploy solo sube los fragmentos que cambiaron. Para que los navegadores conserven esos archivos un año, añade una regla de cabecera:
[[headers]]
for = "/assets/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"
index.html se vuelve a comprobar siempre, así que los visitantes reciben la versión nueva justo después de un deploy.
spa = true en lobsite.toml o un interruptor en el panel: los enlaces profundos abren tu app y los archivos que faltan siguen dando 404.
Los archivos se guardan por su hash. Volver a desplegar un sitio sin cambios sube 0 bytes.
Previsualiza antes de publicar. Vuelve atrás con un clic, redirecciones incluidas.
Cada sitio recibe una dirección *.lobsite.app con HTTPS desde el primer deploy.
Las redirecciones, cabeceras y formularios están en lobsite.toml y viajan con cada deploy.
Un deploy sin cuenta está publicado 6 horas. El enlace para reclamarlo lo conserva, gratis.
Comparativa de hostings para Vite
| Lobsite | Netlify | Vercel | GitHub Pages | |
|---|---|---|---|---|
| Enlaces profundos en una app de una sola página | spa = true o un interruptor en el panel |
Una regla en _redirects |
Un rewrite en vercel.json |
No: copia index.html a 404.html, servido con estado 404 |
| Archivos de script que faltan | 404 | El index.html de la app |
El index.html de la app |
404 |
| Build en el servidor | No: despliegas dist/ |
Sí | Sí | En GitHub Actions |
| Cuenta antes del primer deploy | No: publicado 6 horas, luego consérvalo gratis | Sí | Sí | Sí, y un repositorio |
| Dominio propio | Sí, gratis | Sí | Sí | Sí |
Netlify y Vercel compilan desde Git y ejecutan funciones de servidor. Lobsite es la forma más rápida de poner en línea una app de Vite compilada desde tu máquina, CI o un agente de IA, con enrutado de una sola página en una línea o un clic.
Preguntas frecuentes
¿Por qué las páginas de mi app de Vite que no son la portada muestran «Not found»?
La app usa enrutado en el cliente y el servidor no tiene archivos para esas rutas. Activa el modo de una sola página: spa = true en lobsite.toml o Aplicación de una sola página en los ajustes del sitio.
¿Lobsite ejecuta mi build de Vite?
No. Compila en tu máquina o en CI y luego despliega dist/. Lo que comprobaste con npm run preview es exactamente lo que se publica.
¿Puedo usar variables de entorno de Vite?
Sí, las VITE_, que se escriben en el build al ejecutarlo. Vuelve a compilar tras cambiarlas. Todo lo secreto va en un servidor, no en una app de Vite.
¿Un sitio multipágina de Vite necesita el modo de una sola página?
No. Cada página HTML es su propio archivo, y about.html se abre en /about. Deja el modo de una sola página desactivado para que una dirección mal escrita reciba tu 404.html.