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 . Vamos a empezar. página de GitHub requisitos previos: En primer lugar, necesita una , cuenta de GitHub Descargue e instale en su máquina, luego Git 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 en su directorio raíz y agregue la propiedad de la de inicio en el nivel superior. package.json homepage "homepage": "https://username.github.io/repository-name", En mi caso, el archivo ahora se ve así: package.json Todavía en su archivo y agregue esas dos líneas en la propiedad de : package.json 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 en su navegador después de hacer clic en la URL, siga leyendo. error 404 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 de BrowserRoute 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. Entonces, para resolver este problema, hay dos formas que puede tomar para implementar su aplicación, ya sea reemplazando el a para que tenga: Solución: BrowserRouter HashRouter import { HashRouter as Router } from "react-router-dom" Entonces su código será como el siguiente: O por otro método. Puede configurar un archivo en su carpeta , así que profundicemos en este método: 404.html /public Regrese ahora a su y vuelva a cambiar el tipo de enrutador a y aún en el mismo archivo para actualizar el componente del enrutador agregando un accesorio de nombre para obtener dinámicamente el , porque como recordará, especificó la de inicio en su : App.js BrowserRouter basname repository name homepage package.json Ese es el primer camino, ya casi has terminado. Ahora vaya a su carpeta , cree un archivo y agregue este código de . Asegúrese de que en la línea 26 esté configurado en y guarde el archivo. /public 404.html este repositorio pathSegmentsToKeep 1 Ahora, copie las líneas 9-21 de . y péguelo en su archivo encima de la etiqueta de cierre este repositorio /public/index.html . Y ya está listo para continuar con su despliegue. ¡Felicidades! ¡Gracias por leer! Espero que este artículo te haya sido útil.