
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 archivopackage.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. 🪄✨📦