Cómo implementar una aplicación React en páginas de GitHub

En este artículo, aprenderá cómo implementar una aplicación React sin problemas utilizando la página de GitHub . Vamos a empezar.

requisitos previos:

• En primer lugar, necesita una cuenta de GitHub ,
• Descargue e instale Git en su máquina, luego configúrelo
• Node.js y npm instalados en su máquina (se aceptan versiones 14.18.0 incluye npm 6.14.15))

Cómo instalar la aplicación Create-React:

• Para instalar su aplicación de reacción, primero vaya a su espacio de trabajo y ejecute el siguiente comando en la Terminal:

 npx create-react-app my-funcy-app

• Luego vaya al repositorio del proyecto donde se instaló su aplicación:

  
  

 cd my-funcy-app

• Por último, pero no menos importante, ejecute el siguiente comando para ver su aplicación en el navegador:

  
  

 npm run start 

Si ve algo como esto en el navegador localhost, está listo para comenzar 👾.

Sigue leyendo…

Antes de la implementación, debe agregar su proyecto a GitHub usando la línea de comando:

• Cree un nuevo repositorio en GitHub.

• Abre tu terminal.

• Inicialice el directorio local como un repositorio de Git:

  git init

• Agregue los archivos a su nuevo repositorio local:

  git add .

• Confirme los archivos que ha almacenado en su repositorio local:

  git commit -m "initial commit"

• Copie la URL HTTPS de su repositorio recién creado

  
  

• En el símbolo del sistema, agregue la URL del repositorio remoto donde se enviará su repositorio local.

git remote add origin remote repository URL

luego git remote -v

• Envía los cambios en tu repositorio local a GitHub usando el siguiente comando:

git push -f origin master

Eso es todo, su proyecto está vinculado de forma remota con el repositorio de GitHub.

Despliegue:

Ahora, después de crear su hermosa aplicación, es hora de compartirla con el mundo. Entonces, implementemos su aplicación React en las páginas de GitHub :

Regrese a su terminal y ejecute este comando para instalar gh-pages como "dependencia de desarrollo", lo que le permitirá crear una nueva rama en su repositorio de GitHub:

 npm install gh-pages — save-dev

Después de eso, vaya a su archivo package.json en su directorio raíz y agregue la propiedad de la homepage de inicio en el nivel superior.

 "homepage": "https://username.github.io/repository-name",

En mi caso, el archivo package.json ahora se ve así:

Todavía en su archivo package.json y agregue esas dos líneas en la propiedad de scripts :

 “predeploy”: “npm run build”, “deploy”: “gh-pages -d build”

En mi caso, mis scripts se ven así:

Guarde package.json y ejecute el siguiente comando para implementarlo en las páginas de GitHub:

 npm run deploy 

Ahora, si cambia a su repositorio de GitHub y luego a la sección Configuración -> Páginas de GitHub, podrá ver la URL que asignó a la propiedad de la página de inicio en su package.json

¡Felicidades 🎉! ha implementado con éxito su aplicación de reacción utilizando la página de GitHub.

Si recibe un error 404 en su navegador después de hacer clic en la URL, siga leyendo.

Solución del problema del enrutador React:

No te preocupes por eso; tenemos soluciones para este problema 😉. Sigue adelante.

Si está enrutando en su aplicación usando BrowserRoute de react-router-dom

 import { BrowserRoute as Router } from "react-router-dom"

Te encontrarás con la página de error 404 mencionada anteriormente. Porque las páginas gh no son compatibles con los enrutadores del lado del cliente que usan el historial de HTML5.

Solución: Entonces, para resolver este problema, hay dos formas que puede tomar para implementar su aplicación, ya sea reemplazando el BrowserRouter a HashRouter para que tenga:

 import { HashRouter as Router } from "react-router-dom"

Entonces su código será como el siguiente:

 <Router> <App /> </Router>

O por otro método. Puede configurar un archivo 404.html en su carpeta /public , así que profundicemos en este método:

Regrese ahora a su App.js y vuelva a cambiar el tipo de enrutador a BrowserRouter y aún en el mismo archivo para actualizar el componente del enrutador agregando un accesorio de nombre basname para obtener dinámicamente el repository name , porque como recordará, especificó la homepage de inicio en su package.json :

 <Router basename={process.env.PUBLIC_URL}> <App /> </Router>

Ese es el primer camino, ya casi has terminado.

Ahora vaya a su carpeta /public , cree un archivo 404.html y agregue este código de este repositorio . Asegúrese de que pathSegmentsToKeep en la línea 26 esté configurado en 1 y guarde el archivo.

Ahora, copie las líneas 9-21 de este repositorio . y péguelo en su archivo /public/index.html encima de la etiqueta de cierre </head>.

Y ya está listo para continuar con su despliegue.

¡Felicidades!

¡Gracias por leer! Espero que este artículo te haya sido útil.