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
npm run deploy
Fundamentos de navegación en la web
Navegación Web con React Router: Fundamentos y Prácticas Avanzadas
Server-side Rendering vs Single Page Applications: Ventajas y Desventajas
Uso de React Router DOM 6 en Proyectos React
Introducción a React Router DOM 6
Instalación de React Router DOM 6 en un proyecto React
Uso de Hash Router en Aplicaciones Web con React Router DOM
Creación de Rutas Dinámicas con React Router DOM 6
Navegación en React Router: Uso de Link y NavLink
Rutas dinámicas con React Router DOM y useParams
Uso de useNavigate en React Router DOM para navegación dinámica
Uso de Outlet y Nested Routes en React Router DOM 6
Fake authentication con React Router DOM 6
Autenticación y Autorización en Apps con React Router y Hooks
Control de Acceso en Menú con Autenticación React
Protección de Rutas con React Router y Hooks
Roles y permisos en aplicaciones web: Autenticación y autorización
Retos avanzados en React: manejo de estado y composición de componentes
Mejorando la Redirección Post-Login en Aplicaciones Web
Roles y Permisos Avanzados en React Router v6
React Router en TODO Machine
Migración de Todo Machine a React Router 6
Organización de carpetas y rutas en React con React Router DOM 6
Maquetación de Botón Editar en Lista de Tareas con React
Generación de IDs únicos para gestionar tareas en React
Migración de modales a rutas en React: implementación práctica
Editar ToDos en React con Custom Hook y URL Parameters
Mejora de la Experiencia del Usuario al Editar To Do's en React
Implementación de React Router en Proyectos Legacy
Próximos pasos
Filtrado de Búsquedas en URL con React Router
Migración de React Router: de la versión 6 a la 5 en proyectos empresariales
Clonación de Platzi Movies usando React y React Router
Clonación de React Router en Componentes React
Navegación Avanzada con React Router DOM 6
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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é:
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.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"
}
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
Después de ejecutar el script y confirmar que no hay errores en el proceso de despliegue, verifica lo siguiente:
gh-pages
ha sido creada y contiene el archivo index.html
.package.json
: Cambia el nombre del usuario y del repositorio siempre que sea necesario.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!
Aportes 14
Preguntas 2
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
npm run deploy
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
…
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
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
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.
Después de horas y horas de hacer debug por horas y de fallo con el gh-pages, pude hacer el deploy correctamente jsjsj
Dejo mi TODO app hasta éste punto del curso 😄
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.
Para los que necesiten un resumen de la clase paso a paso, con todos los comandos. Solo denle clic 👇
Desplegando la app
.
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:
.
npm run deploy
.
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:
npm run deploy
.
posteriormente, se vuelve a cambiar el script al script anterior:
.
"deploy": "gh-pages -d build"
.
Se corre nuevamente el comando:
.
npm run deploy
.
Finalmente, el sitio está al aire y funciona correctamente.
npm run build
dist
, para visualizar la app se corre:npm run preview
npm install gh-pages --save-dev
package.json
, antes del cierre de la última llave, se agrega:"homepage": "https://nombre_usuario.github.io/nombre_repositorio/"
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"
},
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: "./",
})
npm run deploy
main
y gh-pages
.gh-pages
seleccionó por nosotros la opción de la rama gh-pages
y la carpeta raíz: /root
.
main
), finalmente dar click al botón verde que dice “deploy”.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?