Deploy con React Router en GitHub Pages

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 😄

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

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

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

Yeah 😃

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:
.

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.

🚀 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: https://app.netlify.com
   
• •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.