No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Deploy con React Router en GitHub Pages

25/30
Recursos

Aportes 12

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 鈥渄evDependencies鈥: { } agregar la siguiente l铆nea
"homepage": 鈥渉ttps//<nombre usuario>.github.io/<nombre repositorio>鈥

paso 3.
agregar en scripts lo siguiente
"predeploy": 鈥渘pm run build鈥,
鈥渄eploy鈥:鈥済h-pages -d build鈥

paso 4.
correr npm run deploy

Si hay algun error
cambiar la linea
** 鈥渄eploy鈥: 鈥済h-pages-clean gh-pages -d build鈥**
correr :
npm run deploy
cambiar la l铆nea de nuevo a
** 鈥渄eploy鈥:鈥済h-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: 鈥渄eploy鈥: "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/

Hola compa帽eros aqui les dejo la direccion de mi App, me enfoque en una lista para ver anime <https://ospinafelipedev.github.io/Anime-List/> ![](https://static.platzi.com/media/user_upload/list-81b00efe-1d7d-4114-974b-d54718fb0a04.jpg)

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

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


Pasos para hacer el deploy en Github 鉁堬笍

  • 鈥n la terminal verificar si en modo de producci贸n funciona la app:
npm run build

  • 鈥e va a generar una carpeta llamada dist, para visualizar la app se corre:
npm run preview

  • 鈥e abre el navegador y debe salir la app con todas las funciones.
  • 鈥n la terminal ejecutar:
npm install gh-pages --save-dev

  • 鈥amos 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 鈥渄eploy鈥: 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"
},

  • 鈥brimos 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: "./",
})

  • 鈥uardamos, y en la terminal ejecutamos:
npm run deploy

  • 鈥i sale Published es que todo sali贸 bien.
  • 鈥amos 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.
  • 鈥amos a la pesta帽a de 鈥淪ettings鈥, luego en el panel izquierdo en la pesta帽a de 鈥淧ages鈥, en las opciones de 鈥淏ranch鈥 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.
  • 鈥espu茅s de unos minutos debe aparecer la direcci贸n del despliegue.

    鈥l entrar a la url, debe estar el proyecto funcionando, probar con todas las funciones.


Pasos para hacer el deploy en Netilify 馃殎

  • 鈥r al navegador y abrir: https://app.netlify.com
  • 鈥e da click al bot贸n negro de GitHub.
  • 鈥n el panel izquierdo, entrar en 鈥淪ites鈥, luego al lado derecho en el bot贸n de 鈥淎dd new site鈥 dar click y seleccionar la opci贸n: 鈥淚mport an existing project鈥.
  • 鈥e selecciona la opci贸n de GitHub, luego se selecciona el repositorio.
  • 鈥acer 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 鈥渄eploy鈥.
  • 鈥ay que esperar unos segundos para que aparezca la direcci贸n del deploy.
  • 鈥ebe aparecer la app y debe funcionar como en local.