¿Cómo implementar sus sitios web React en GitHub?

Crear una aplicación web siempre es emocionante para los desarrolladores, especialmente cuando ingresa al mundo de la programación por primera vez. Construyes la interfaz de tu aplicación después de mucha lucha y quieres mostrar tu habilidad, tu creatividad y, por supuesto, tu arduo trabajo al mundo. Algunas de las personas pueden estar familiarizadas con el sitio web de alojamiento gratuito donde pueden alojar su aplicación. Algunos de ustedes también pueden estar familiarizados con las páginas de Github para implementar la página web estática. Si no lo sabe, aquí está el enlace para comprobarlo… Uso de GitHub para alojar un sitio web estático gratuito . Bueno, estos recursos son bastante populares para hacer que su aplicación web viva en el servidor, y por qué no, si es bastante útil y está disponible sin costo . 

¿Sabe que puede crear un sitio web genial con la popular biblioteca de JavaScript React y que también puede implementarse en páginas de GitHub? no te lo crees…?? Instale React Developer Tool en su sistema y verifique el enlace Portfolio por su cuenta. ¿No es genial y sorprendente aprender y crear una aplicación web usando React? ¿No es genial y sorprendente implementar su aplicación web React en páginas de GitHub sin costo y mostrarla al mundo? 

Ahora, si usted es alguien que está emocionado de aprender ReactJS, aquí está el enlace GeeksforGeeks ReactJS , pero para implementar su hermosa aplicación en las páginas de GitHub, necesitamos aprender algunas cosas más. Entonces, en este blog, analizaremos los procedimientos paso a paso para implementar su aplicación React en las páginas de GitHub. 

Terminologías básicas

1. React: una popular biblioteca de JavaScript desarrollada por Facebook que se utiliza para crear y manejar componentes flexibles para la interfaz de usuario. 

2. Git: un increíble sistema de control de versiones de código abierto para manejar proyectos pequeños y grandes. Se utiliza para colaborar con otros desarrolladores y realizar un seguimiento de los cambios en el código fuente durante el desarrollo del software. 

3. GitHub: una plataforma de alojamiento de código para colaboración y control de versiones. Se utiliza para trabajar y almacenar proyectos de desarrollo web. 

4. Páginas de Github: le permite convertir sus repositorios de GitHub en un sitio web elegante para exhibir su cartera, proyectos, documentación o cualquier otra cosa que desee publicar, pero recuerde que no hay una base de datos para configurar ni un servidor para configurar. 

5. NodeJS y npm : Node.js es un entorno de tiempo de ejecución del servidor para ejecutar Javascript en el servidor y npm es un administrador de paquetes que se usa para descargar e instalar diferentes paquetes para proyectos de JavaScript. 

requisitos previos

1. Descarga Git y realiza el proceso de instalación predeterminado. 

2. Se debe instalar una versión adecuada de NodeJS y npm. Aquí está el comando para verificar la instalación y la versión. 

$ node --version

$ npm --version

3. Se instala una versión adecuada de create-react-app . Aquí está el comando para verificar la instalación y la versión. 

$ create-react-app --version

Si no está instalado, use el siguiente comando para instalarlo globalmente. 

$ npm install -g create-react-app

4. Una cuenta de GitHub. 

Ahora comienza la verdadera diversión (Procedimiento)

1. En primer lugar, cree una aplicación React en su sistema utilizando el comando que se indica a continuación. Le estamos dando el nombre de «reaccionar-desplegar» a esta aplicación. Esta es la aplicación que implementará en las páginas de GitHub. Este proceso creará una nueva carpeta llamada «react-deploy» en su directorio. 

$ create-react-app react-deploy

2. Ahora ingrese su nueva aplicación y ejecute el siguiente comando para iniciar la aplicación. Verá que su aplicación se está ejecutando en un servidor de desarrollo local http://localhost:3000 . 

#change directory
$ cd react-deploy
#run application in the development environment
$ npm start

3. Después de verificar que su aplicación se ejecuta perfectamente sin ningún error en un servidor local, cree un nuevo repositorio en GitHub. Le damos a este nombre «mi-aplicación», que es diferente del nombre de la aplicación que ha creado en el paso anterior. Sin embargo, también puede elegir el mismo nombre, es decir, «reaccionar-desplegar» para su nombre de repositorio de GitHub. Depende totalmente de ti. 

4. Instale el paquete gh-pages como una «dependencia de desarrollo» de la aplicación. 

#install gh-pages package
$ npm install --save gh-pages

5. Agregue algunas propiedades al archivo package.json de la aplicación . En el nivel superior, agregue una propiedad de página de inicio. Defina su valor como la string http://{username}.github.io/{repo-name} , donde {username} es su nombre de usuario de GitHub y {repo-name} es el nombre del repositorio de GitHub (my- app) que creó en el paso 3.

Echa un vistazo al ejemplo que se da a continuación… 

"homepage": "http://anuupadhyay.github.io/my-app", 

Ahora necesita agregar dos propiedades más. En la propiedad de secuencias de comandos existentes, agregue una propiedad de implementación previa y una propiedad de implementación , cada una con los valores que se muestran a continuación: 

"scripts": {
  //...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build",
  //...
  "build": "react-scripts build && cp build/index.html build/404.html", // this will prevent page reloads to give a  404 error
}

Una vez hecho lo anterior, su archivo package.json se verá así… 

A continuación, si está utilizando el enrutador de react-router-dom, debe cambiar las etiquetas del enrutador del navegador a 

//...
  BrowserRouter basename={process.env.PUBLIC_URL}
//... 

6. En este paso, cree un repositorio de Git en la carpeta de la aplicación y agregue el repositorio de GitHub como «remoto» en su repositorio de Git local. Esto hará que el paquete gh-pages sepa dónde quiere que implemente su aplicación en el paso 7. También hará que git sepa dónde quiere que empuje su código fuente (es decir, las confirmaciones en su rama principal) en paso 8 

#create a new git repository
$ git init
#add remote repository
$ git remote add origin https://github.com/anuupadhyay/my-app.git

7. Ahora aquí está la magia. Siga el comando a continuación y genere una compilación de producción de su aplicación para implementar su código en las páginas de GitHub. 

#deploy application
$ npm run deploy

Eso es todo. Su aplicación React se publica en las páginas de GitHub y, si desea verificarla, simplemente vaya a la pestaña de configuración de su aplicación en su repositorio de Github y desplácese hacia abajo. Verás algo como a continuación… 

En nuestro caso, se puede acceder a la aplicación en: https://anuupadhyay.github.io/my-app/ 

8. En este punto, si explorará el repositorio de GitHub, notará que la rama maestra no existía, sí existía una rama gh-pages. Significa que este último contenía el código de la aplicación creada, a diferencia del código fuente de la aplicación. Entonces, para crear una rama maestra predeterminada y enviarle su código fuente, ejecute el comando que se indica a continuación… 

#add all changed file paths to staged changes
$ git add .
#commit all staged changes
$ git commit -m "Create a React app and publish it to GitHub Pages"
#pushed local repository to remote repository on GitHub
$ git push origin master

Después de este último paso explora una vez más el repositorio de GitHub. Notará que ahora existía una rama maestra y que contenía el código fuente de la aplicación. Verá algo como a continuación en su repositorio de GitHub. 

Entonces, la rama maestra contenía el código fuente y la rama gh-pages contenía el código de la aplicación creada .