Publica tu
app React
Sube el build de producción de Vite, Create React App u otra SPA React. Obtén una URL HTTPS, rutas que no se rompen al refrescar y dominio personalizado cuando sea momento de lanzar.
Sube el build, no el proyecto fuente
Los archivos fuente son para desarrollo. DeployPages sirve los archivos estáticos generados por el build de producción.
Vite React
Vite genera `dist` por defecto. Si `vite.config.js` cambia `build.outDir` o `base`, sube esa carpeta real y prueba URLs de archivos estáticos.
Create React App
CRA escribe archivos de producción en `build`. Si la app vive en una subruta, revisa `homepage` porque afecta las rutas de archivos estáticos.
Otras SPA React
Cualquier setup React puede funcionar si produce `index.html`, bundles JavaScript, CSS, imágenes, fuentes y archivos estáticos.
Por qué una app React puede romperse al publicarse
Una SPA React empieza con un solo documento
La mayoría de apps React publican un `index.html` y dejan que el router del navegador decida qué pantalla mostrar después de cargar JavaScript.
Eso funciona localmente porque el servidor de desarrollo sabe volver a `index.html`. En una plataforma estática básica, `/dashboard` puede funcionar al navegar, pero devolver 404 al refrescar.
Qué falla al refrescar
Un servidor de archivos recibe `GET /settings` y busca un archivo o carpeta real con el nombre `settings`.
Tu build React normalmente tiene `index.html` y archivos con hash. Si la plataforma no aplica fallback, devuelve 404 antes de que React Router lea la URL.
Cómo lo resuelve DeployPages
DeployPages aplica fallback SPA para rutas de documento que no existen y sirve `index.html` en lugar de un 404 duro.
Después React arranca, el router lee la URL actual y renderiza la pantalla correcta sin mantener reglas de rewrite manuales.
Por qué usar este flujo
Sube la carpeta `dist` o `build`. Fallback de rutas, HTTPS, compresión y entrega global quedan dentro de la publicación.
Revisiones de producción para apps React
La app puede compilar y aun así fallar en línea. Revisa esto antes de enviar el enlace.
Ruta base de archivos estáticos
Si JavaScript o CSS cargan desde una URL incorrecta, la página puede quedar en blanco. Revisa `base` en Vite y `homepage` en CRA.
Rutas del cliente
Prueba visitas directas y refresh en rutas importantes como `/login`, `/pricing`, `/dashboard` y enlaces profundos.
APIs externas
Una publicación React estática puede llamar APIs externas, pero no ejecuta back-end por sí misma. No incluyas secretos privados en el bundle.
Variables de entorno
La mayoría de herramientas React insertan valores públicos al momento de build. Cambiar una variable después de subir suele requerir rebuild.
Flujo para publicar React
Genera el build
Ejecuta el build de producción localmente para empaquetar React, CSS y archivos en una carpeta publicable.
Verifica la salida
Confirma que la carpeta tenga `index.html` y archivos generados. En Vite suele ser `dist`; en Create React App, `build`.
Sube la carpeta completa
Arrastra todo `dist` o `build` a DeployPages. No subas solo `index.html` o faltarán estilos y scripts.
Prueba una ruta interna
Abre una ruta anidada, refresca el navegador y confirma que la app carga en lugar de devolver 404.
Problemas comunes al publicar React
Pantalla en blanco después de publicar
Abre DevTools y revisa primero JS o CSS faltante. Rutas base incorrectas, archivos ausentes o subir la carpeta equivocada causan muchas pantallas en blanco.
Refrescar una ruta interna devuelve 404
La plataforma está buscando un archivo real para esa ruta. Usa fallback SPA para que rutas de documento desconocidas sirvan `index.html`.
Los archivos estáticos funcionan localmente pero no en línea
Revisa rutas absolutas, configuración de base pública y que la carpeta subida incluya el directorio de archivos generado.
Los cambios de variables de entorno no aparecen
Reconstruye la app con los nuevos valores públicos y sube la nueva salida. El bundle publicado no puede leer secretos de servidor en runtime.
Preguntas frecuentes sobre publicar React
Q:¿Por qué mi app React muestra pantalla en blanco después de publicarla?
Suele deberse a rutas de archivos incorrectas o bundles faltantes. En Vite revisa `base`; en CRA revisa `homepage` y confirma que subiste la carpeta generada completa.
Q:¿Necesito configurar nginx o redirects manualmente?
No para este flujo. DeployPages maneja el fallback SPA para rutas faltantes, sin que mantengas rewrites de servidor.
Q:¿Subo la carpeta del proyecto o `dist`?
Sube la carpeta de producción, no el código fuente. En Vite normalmente es `dist`; en Create React App normalmente es `build`.
Q:¿Puedo usar variables de entorno?
Sí, pero se resuelven cuando ejecutas el build local. DeployPages aloja la salida estática final; no inyecta variables privadas de servidor en runtime.
Q:¿Una app React puede llamar una API después de publicarse?
Sí. Puede llamar a APIs externas desde el navegador. Recuerda que todo lo incluido en el front-end es visible para los usuarios; los secretos necesitan un back-end.
Q:¿También puedo publicar Next.js?
Sí, si lo exportas como sitio estático. Usa `output: 'export'` y sube el directorio `out`. Las rutas SSR necesitan otro runtime.
Q:¿Puedo conectar dominio personalizado después?
Sí. Cuando el sitio esté en línea, agrega tu dominio en el panel y sigue las instrucciones de DNS. HTTPS se aprovisiona cuando el registro resuelve correctamente.