Cómo publicar un SPA en Github Pages con React Router.

Vamos a crear y publicar un nuevo proyecto React en 2025, en tan solo tres pasos nomás. Y eso, porque vamos a publicar en Github Pages, sino serían simplemente dos pasos: la creación y el apagado del SSR. Comencemos pues, con la creación del proyecto. 1️⃣

npx create-react-router@latest proyecto_react_2025 && $_

Después de decir que sí a las instalaciones, podemos entrar al proyecto para ejecutar el segundo paso $_. 🤯

// react-router.config.ts

import type { Config } from "@react-router/dev/config";

export default {
  ssr: false,
} satisfies Config;

Dentro del archivo react-router.config.ts, diciendo que no queremos tener SSR basta para que nuestra App sea ahora una Single Page App. 🥳 Y este, fue el paso dos. 2️⃣

Pero, para que no te vayas tan rápido, vamos a comprobar que esto es una app del cliente. Lo comprobaremos, publicando nuestro nuevo sitio web en Github Pages. 🤖

Paso 3/3: Publicando en Github Pages

Para la publicación debemos:

• Crear un bundle para producción con Vite. Usaremos el comando npm run build que ya está en el archivo package.json.
• También debemos configurar nuestro nombre de dominio en el archivo de configuración de Vite.
• Finalmente, crearemos un Github Action, para que se actualize nuestro sitio web cada que hacemos push a main.

Estos archivos yaml viven dentro de la carpeta .github/workflows de nuestro proyecto. 👽

Estamos listos para el push pues. 👀 Podemos ver cómo se ejecuta el action, en la pestaña actions del repo, una vez que empujamos.

Nuestro nuevo y reluciente sitio web hecho con React Router, está listo y en producción. ✅

Bien hecho geek. Recuerda que tengo todo un curso de React Router. 🤓👍🏼

Abrazo. Bliss. 🪄✨📦