Implementación de React Router en Proyectos Legacy

Curso de React.js: Navegación con React Router

Contenido del curso

No sé dónde empezar

Fundamentos de navegación en la web

Introducción a React Router DOM 6

Fake authentication con React Router DOM 6

React Router en TODO Machine

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:07

Implementación de React Router en Proyectos Legacy

Curso de React.js: Navegación con React Router

Clase 25 de 30

Clase 25 / 30

Recursos

¿Cómo solucionar errores comunes al desplegar aplicaciones en GitHub Pages?

Desplegar aplicaciones web en GitHub Pages puede parecer un dolor de cabeza, especialmente cuando nos enfrentamos a errores inesperados mientras trabajamos con herramientas como React Router. Hoy, exploraremos por qué pueden surgir estos problemas y cómo solucionarlos eficazmente. El objetivo es mostrar que, con los ajustes correctos, es posible implementar tu proyecto sin complicaciones, independientemente de las versiones o la estructura anterior de tu proyecto.

¿Por qué puede fallar al desplegar en GitHub Pages?

Uno de los errores más comunes al desplegar aplicaciones en GitHub Pages se debe a una configuración incorrecta en el archivo package.json. Aquí te explicamos por qué:

Manejo de nombres y rutas: GitHub Pages utiliza el nombre de tu proyecto (name) y la ruta de la página principal (homepage) indicados en package.json para compilar la aplicación web y ajustar las rutas adecuadamente.
Desajuste de nombres: Si cambias el nombre del repositorio o el directorio después de haber clonado o iniciado el proyecto, debes asegurarte de que estos cambios se reflejen en el package.json, de lo contrario, las rutas pueden no coincidir.

Ejemplo de cómo ajustar el archivo package.json:

{
  "name": "NombreDelProyecto",
  "homepage": "https://tuusuario.github.io/NombreDelProyecto"
}

¿Qué hacer si el script de deploy falla?

A veces, al correr el script de deploy, pueden surgir errores como "couldn't find remote rev". Aquí te indicamos cómo resolverlo:

Limpiar construcciones previas: Usa gh-pages -clean para limpiar construcciones previas que puedan estar causando conflictos.

Ejecuta lo siguiente:
```
gh-pages -clean
```
Revisar el script de deploy: Verifica que las referencias en el script apunten correctamente. Puede ser útil correr el script pre-deploy para asegurarte de que la aplicación compile bien antes de intentar desplegarla.
Reintentar el deploy: Una vez limpio y configurado, vuelve a correr el script de deploy:
```
npm run deploy
```

¿Cómo confirmar que la aplicación fue desplegada correctamente?

Después de ejecutar el script y confirmar que no hay errores en el proceso de despliegue, verifica lo siguiente:

Rama GH-Pages: Entra en tu repositorio y verifica que una rama llamada gh-pages ha sido creada y contiene el archivo index.html.
Configurar la URL de despliegue: Entra en la sección de Settings > Pages para confirmar que tu sitio está al aire. Te mostrará la URL donde está desplegada tu aplicación.
Verificación visual: Abre la URL en un navegador diferente o una ventana de incógnito para confirmar que todo se carga correctamente y funciona la navegación.

¿Qué tener en cuenta para un despliegue sin problemas en el futuro?

Customiza tu package.json: Cambia el nombre del usuario y del repositorio siempre que sea necesario.
Prueba antes de desplegar: Asegúrate de que todo funcione correctamente en local.
Documenta los pasos y errores: Mantén un registro de las soluciones a errores que encuentres; podría ahorrarte tiempo en el futuro.

Con estas prácticas, tus despliegues a GitHub Pages serán mucho más fluidos y sin complicaciones. ¡Adelante, sigue explorando y mejorando tus aplicaciones con React Router!

Maria Gabriela Rodriguez Cuevas

Hace 3 años

🚀 Clase #25: Deploy con React Router en GitHub Pages 25/30 🚀

Pasos para hacer el deploy en Github ✈️

•En la terminal verificar si en modo de producción funciona la app:

npm run build

•Se va a generar una carpeta llamada dist, para visualizar la app se corre:

npm run preview

•Se abre el navegador y debe salir la app con todas las funciones.
•En la terminal ejecutar:

npm install gh-pages --save-dev

•Vamos a VS Code y abrimos el archivo package.json, antes del cierre de la última llave, se agrega:

"homepage": "https://nombre_usuario.github.io/nombre_repositorio/"

En la parte de los scripts se agrega "deploy": gh-pages -d dist queda así:

"scripts": {
	"dev": "vite",
	"build": "vite build",
	"lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
	"preview": "vite preview",
	"predeploy": "npm run build",
	"deploy": "gh-pages -d dist"
},

•Abrimos el archivo vite.congig.js y agregamos: base: "./", el código queda:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [react(), svgr()],
	base: "./",
})

•Guardamos, y en la terminal ejecutamos:

npm run deploy

•Si sale Published es que todo salió bien.
•Vamos al repositorio en GitHub. En la página de GitHub, al recargar, en la lista desplegable de las ramas deben salir al menos las ramas main y gh-pages.
•Vamos a la pestaña de “Settings”, luego en el panel izquierdo en la pestaña de “Pages”, en las opciones de “Branch” ya la herramienta que instalamos de gh-pages seleccionó por nosotros la opción de la rama gh-pages y la carpeta raíz: /root.
•Después de unos minutos debe aparecer la dirección del despliegue. •Al entrar a la url, debe estar el proyecto funcionando, probar con todas las funciones.

Pasos para hacer el deploy en Netilify 🚁

•Ir al navegador y abrir:
•Se da click al botón negro de GitHub.
•En el panel izquierdo, entrar en “Sites”, luego al lado derecho en el botón de “Add new site” dar click y seleccionar la opción: “Import an existing project”.
•Se selecciona la opción de GitHub, luego se selecciona el repositorio.
•Hacer las configuraciones según sea el caso, pregunta por el nombre del dueño del proyecto, la rama el cual queremos que esté el proyecto (en mi caso la rama main), finalmente dar click al botón verde que dice “deploy”.
•Hay que esperar unos segundos para que aparezca la dirección del deploy.
•Debe aparecer la app y debe funcionar como en local.

Comentarios (16)16 comentarios

Maria Fernanda Monagas Vegas

Hace 4 años

En mi caso antes de agregar react-router-dom ya lo habia desplagado en GitHub Pages, lo que hice fue subir los cambios nuevos con git push y posterior a se corren 2 comandos, para actualuzar GitHubPages. npm run build

Rubén Ernesto Aragón Gil

Gracias por la info

Juan Pablo Cortés

Me ha pasado muchas veces el error XD. Así que comparto mis notas de cómo hacer el deploy en gh-pages. Recomendacion

paso 1. npm instal gh-pages -D … paso 2. En package.json después de “devDependencies”: { } agregar la siguiente línea "homepage": “https//<nombre usuario>.github.io/<nombre repositorio>” … paso 3. agregar en scripts lo siguiente "predeploy": “npm run build”, “deploy”:“gh-pages -d build” … paso 4. correr npm run deploy … Si hay algun error cambiar la linea ** “deploy”: “gh-pages-clean gh-pages -d build”** correr : npm run deploy cambiar la línea de nuevo a ** “deploy”:“gh-pages -d build”** … correr npm run deploy …

Max Andy Diaz Neyra

Gracias por el resumen, papux

Andrés Felipe Cubillos Ospina

Compañero muchas gracias, me sirvio de mucha ayuda, me ahorre tiempo y no me salio ningun error 👏👏

Gilbert Ardila

uyyy, yo nunca lo pude hacer con gh-pages, preferí desplegarlo con netlify o vercel, es un millon de veces más facil y rapido

Yo sí pude, me he equivocado tantas veces que creo que manejo más o menos git jeje

David Espino

En mi caso, tuve un problemita al desplegar en github pages, se solucionó corriendo el siguiente código para eliminar el anterior origen remoto antes de ligar mi repositorio local a mi repositorio en github

git remote remove origin

Juan Castro

Profesor

:clap:

Maury Sugheiry Alcala Romero

En mi caso hice lo siguiente: Para proyectos ya desplegados podemos hacer lo siguiente: Correr los comandos en la terminal  npm run build npm run deploy Y si no actualiza los cambios hacer los siguiente : En el archivo package.json En el scripts escribir: "deploy": "gh-pages-clean gh-pages -d build" Luego corremos en la terminal el siguiente comando npm run deploy Luego borrar gh-pages-clean en el package.json y correr nuevamente el comando npm run deploy en la terminal Luego vamos a nuestro GitHub y ya podemos ver nuestra rama gh-pages ya desplegada…. sigue los pasos de Juan DC paso a paso y lo lograras.

Bryan Figueroa

Después de horas y horas de hacer debug por horas y de fallo con el gh-pages, pude hacer el deploy correctamente jsjsj

Ivan González

Dejo mi TODO app hasta éste punto del curso :D

https://ivangonzalezr.github.io/To-Do-ReactJS_App/

Laura Naranjo

Porqué al desplegarlo en github pages no se ven los componentes TodoCounter y TodoSearch mientras está en estado loading?

Cómo tienes tu código? En mi deploy sí funcionan correctamente.

Hola compañeros aqui les dejo la direccion de mi App, me enfoque en una lista para ver anime

Andersson Rincon

Ahora con la funcion beta de github actions es un poco mas sencillo, y mas si lo hacen con Vite.js, ellos en su documentacion explican como hacer diploy muy facil, solo hay que crear una carptera y un archivo y en la configuracion de vite agregar la ruta del repositorio y listo. Con los push se va actualizando automaticamente produccion.

Arturo Mauricio Terceros Beltrán

Para los que necesiten un resumen de la clase paso a paso, con todos los comandos. Solo denle clic 👇 Desplegando la app

Luis Angel Olivárez Estrada

https://luiznaiper.github.io/react-task-router/

Yeah :)

Jose Ever Muñoz Muñoz

Hace 2 años

sigo los pasos, no obstante en el paso final cuando hago npm run deploy, me pide credenciales, las pongo y vuelve a pedirmelas, las vuelvo a poner y me las pide nuevamente, y así y no sube nada ¿alguien sabe como solucionarlo?

Daniel Morales

Antes que todo tuve que cambiar el "git origin" ya que tenia el de platzi.

Estos son los comandos que utilicé:

git remote -v
git remote set-url origin url_repositorio

Harold Zurita Simon

Deploy con React Router en GitHub Pages

. Para realizar el deploy se debe de cambiar el name y homepage del archivo package.json. .

"name": "curso-react-router-proyecto2"

"homepage": "https://platzi.github.io/curso-react-router-proyecto2"

. Esto se debe a que gh pages toma estos valores para que cuando transpile la aplicación con webpack que es lo que utiliza create-react-app por dentro, cambie todas las rutas para que ya no apunten al localhost, sino que apunten a la url de homepage. . El name y el homepage deben coincidir y ahora el nombre ya no es curso-intro-react sino que curso-react-router-proyecto2. . Entonces, corremos el comando: .

. Se nos generará la carpeta de build, después se lo manda a una nueva rama en nuestro repositorio de git, y luego de crear esa rama con ese build lo manda a esa misma rama gh-pages en nuestro repositorio remoto. . En caso de error se puede utilizar el comando gh-pages-clean en el siguiente script: .

"deploy": "gh-pages-clean gh-pages -d build"

Se corre el comando:

. posteriormente, se vuelve a cambiar el script al script anterior: .

"deploy": "gh-pages -d build"

. Se corre nuevamente el comando: .

. Finalmente, el sitio está al aire y funciona correctamente.

Fundamentos de navegación en la web

Cuándo y por qué usar React Router

SSR vs SPA: cómo funciona cada una

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalar React Router Dom 6 paso a paso

Browser Router vs Hash Router en GitHub Pages

Primeras rutas con React Router Dom 6

Link y NavLink para navegación en React

Rutas dinámicas con React Router DOM y useParams

useNavigate para navegar con JavaScript

Outlet y rutas anidadas en React Router

Fake authentication con React Router DOM 6

Rutas privadas con fake auth en React

Rutas privadas y públicas en React

Rutas protegidas con Navigate en React

Roles y permisos en aplicaciones web: Autenticación y autorización

Retos avanzados en React: manejo de estado y composición de componentes

Redirect al login con useLocation en React

Rutas dinámicas con roles de usuario

React Router en TODO Machine

Cómo migrar React portals a rutas reales

Estructura de carpetas con React Router Dom 6

Botón de editar todos con React y SVG

Generación de IDs únicos para gestionar tareas en React

Migrar modales a rutas con useNavigate

Cómo funciona editTodo con useParams

Texto por defecto en textarea con useLocation

Implementación de React Router en Proyectos Legacy

Próximos pasos

Sincronizar el buscador con la URL

Migrando a React Router Dom 5 en proyectos reales

Migra Platzi Movies de JS a React

Clonar React Router desde cero

Navegación Avanzada con React Router DOM 6

Implementación de React Router en Proyectos Legacy