* Creado usando create-react-app
En este tutorial, le mostraré cómo puede crear una aplicación React e implementarla en páginas GitHub.
Para crear la aplicación React, utilizaré create-react-app , que es una herramienta que las personas pueden usar para crear una aplicación React desde cero. Para implementar la aplicación React, usaré gh-pages , que es un paquete de NPM que las personas pueden usar para implementar cosas en las páginas GitHub, un servicio de alojamiento web gratuito proporcionado por GitHub.
Si sigues con este tutorial, terminarás con una nueva aplicación React, anulada en las páginas de GitHub, que puedes personalizar.
Este tutorial ha sido traducido de su inglés original a los siguientes idiomas:
Se instalan nodo y NPM. Estas son las versiones que usaré al hacer este tutorial:
$ node --version
v16.13.2
$ npm --version
8.1.2La instalación de NPM agrega dos comandos al sistema,
npmynpx, tanto de los cuales usaré al hacer este tutorial.
Git está instalado. Aquí está la versión que usaré al hacer este tutorial:
$ git --version
git version 2.29.1.windows.1Una cuenta de Github.
Nombre del repositorio: puede ingresar cualquier nombre que desee*.
* Para un sitio de proyecto, puede ingresar cualquier nombre que desee. Para un sitio de usuario, GitHub requiere que el nombre del repositorio tenga el siguiente formato:
{username}.github.io(por ejemplo,gitname.github.io)
El nombre que ingrese aparecerá en algunos lugares: (a) en referencias al repositorio en todo GitHub, (b) en la URL del repositorio y (c) en la URL de la aplicación React implementada.
En este tutorial, implementaré la aplicación React como un sitio de proyecto.
Entraré: react-gh-pages
Privacidad del repositorio: seleccione público (o privado *).
* Para los usuarios gratuitos de GitHub, el único tipo de repositorio que se puede usar con las páginas de GitHub es público . Para los usuarios de GitHub Pro (y otros usuarios que pagan), los repositorios públicos y privados se pueden usar con páginas GitHub.
Elegiré: público
Inicializar repositorio: deje todas las casillas de verificación vacías.
Eso hará que GitHub cree un repositorio vacío, en lugar de prepulgar el repositorio con un archivo de
README.md,.gitignorey/oLICENSE.
En este punto, su cuenta de GitHub contiene un repositorio vacío, que tiene el nombre y el tipo de privacidad que especificó.
Crea una aplicación React llamada my-app :
En caso de que desee usar un nombre diferente de
my-app(por ejemplo,web-ui), puede lograrlo reemplazando todos los ocurrencias demy-appen este tutorial, con ese otro nombre (es decir,my-app>web-ui).
$ npx create-react-app my-appEse comando creará una aplicación React escrita en JavaScript. Para crear uno escrito en TypeScript, puede emitir este comando en su lugar:
$ npx create-react-app my-app --template typescript
Ese comando creará una nueva carpeta llamada my-app , que contendrá el código fuente de una aplicación React.
Además de contener el código fuente de la aplicación React, esa carpeta también es un repositorio GIT. Esa característica de la carpeta entrará en juego en el paso 6.
Nombres de ramas:
mastervs.mainEl repositorio GIT tendrá una rama, que se nombrará (a)
master, el valor predeterminado para una nueva instalación de Git; o (b) el valor de la variable de configuración GIT,init.defaultBranch, si su computadora está ejecutando Git versión 2.28 o posterior y ha establecido esa variable en su configuración GIT (por ejemplo, a través de$ git config --global init.defaultBranch main) .Como no he configurado esa variable en mi instalación de Git, la rama en mi repositorio se nombrará
master. En caso de que la rama en su repositorio tenga un nombre diferente (que puede verificar ejecutando$ git branch), comomain; Puede reemplazar todas las ocurrencias demasterdurante el resto de este tutorial, con ese otro nombre (por ejemplo,master→main).
Ingrese la carpeta recién creada:
$ cd my-appEn este punto, hay una aplicación React en su computadora y usted está en la carpeta que contiene su código fuente. Todos los comandos restantes que se muestran en este tutorial se pueden ejecutar desde esa carpeta.
gh-pages Instale el paquete NPM gh-pages y lo designe como una dependencia del desarrollo:
$ npm install gh-pages --save-dev En este punto, el paquete gh-pages NPM está instalado en su computadora y la dependencia de la aplicación React se documenta en el archivo package.json de la aplicación React.
homepage al archivo package.json Abra el archivo package.json en un editor de texto.
$ vi package.jsonEn este tutorial, el editor de texto que usaré es VI. Puede usar cualquier editor de texto que desee; Por ejemplo, Código de Visual Studio.
Agregue una propiedad homepage en este formato*: https://{username}.github.io/{repo-name}
* Para un sitio de proyecto, ese es el formato. Para un sitio de usuario, el formato es:
https://{username}.github.io. Puede leer más sobre la propiedad de lahomepageen la sección "Páginas GitHub" de la documentacióncreate-react-app.
{
"name": "my-app",
"version": "0.1.0",
+ "homepage": "https://gitname.github.io/react-gh-pages",
"private": true, En este punto, el archivo package.json de la aplicación React incluye una propiedad llamada homepage .
package.json Abra el archivo package.json en un editor de texto (si aún no está abierto en uno).
$ vi package.json Agregue una propiedad predeploy y una propiedad deploy al objeto scripts :
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build", En este punto, el archivo package.json de la aplicación React incluye scripts de implementación.
Agregue un "remoto" al repositorio de git local.
Puede hacerlo emitiendo un comando en este formato:
$ git remote add origin https://github.com/{username}/{repo-name}.git Para personalizar ese comando para su situación, reemplace {username} con su nombre de usuario GitHub y reemplace {repo-name} con el nombre del repositorio de GitHub que creó en el Paso 1.
En mi caso, correré:
$ git remote add origin https://github.com/gitname/react-gh-pages.gitEse comando le dice a GIT dónde quiero que empuje las cosas cuando yo, o el paquete NPM
gh-pagesque actúe en mi nombre, emite el comando$ git pushdesde este repositorio de Git local.
En este punto, el repositorio local tiene un "remoto" cuya URL apunta al repositorio de GitHub que creó en el Paso 1.
Empuje la aplicación React al repositorio de GitHub
$ npm run deployEso hará que los scripts
predeployedeploylos scripts definidos enpackage.jsonse ejecuten.Debajo del capó, el script
predeploycreará una versión distribuible de la aplicación React y la almacenará en una carpeta llamadabuild. Luego, el scriptdeployempujará el contenido de esa carpeta a una nueva confirmación en la ramagh-pagesdel repositorio de GitHub, creando esa rama si aún no existe.
Por defecto, la nueva confirmación en la sucursal
gh-pagestendrá un mensaje de confirmación de "actualizaciones". Puede especificar un mensaje de confirmación personalizado a través de la opción-m, como esta:$ npm run deploy -- -m " Deploy React app to GitHub Pages "
En este punto, el repositorio de GitHub contiene una rama llamada gh-pages , que contiene los archivos que constituyen la versión distribuible de la aplicación React. Sin embargo, aún no hemos configurado las páginas de GitHub para servir esos archivos.
gh-pages/ (root)¡Eso es todo! ¡La aplicación React se ha implementado en las páginas de GitHub!
En este punto, la aplicación React es accesible para cualquier persona que visite la URL de homepage que especificó en el paso 4. Por ejemplo, la aplicación React que implementé está accesible en https://gitname.github.io/react-gh-pages.
En un paso anterior, el paquete gh-pages NPM empujó la versión distribuible de la aplicación React a una rama llamada gh-pages en el repositorio de GitHub. Sin embargo, el código fuente de la aplicación React aún no se almacena en GitHub.
En este paso, le mostraré cómo puede almacenar el código fuente de la aplicación React en GitHub.
Comprometer los cambios que realizó mientras siguió este tutorial, a la rama master del repositorio de Git local; Luego, empuje esa rama hacia la rama master del repositorio de GitHub.
$ git add .
$ git commit -m " Configure React app for deployment to GitHub Pages "
$ git push origin masterRecomiendo explorar el repositorio de GitHub en este momento. Tendrá dos ramas:
masterygh-pages. La ramamastercontendrá el código fuente de la aplicación React, mientras que la rama degh-pagescontendrá la versión distribuible de la aplicación React.
create-react-appCNAME al usar un dominio personalizadocreate-react-app en algo único!master : el código fuente de la aplicación Reactgh-pages : la aplicación React creada a partir de ese código fuenteGracias a estas personas por contribuir al mantenimiento de este tutorial.
Esta lista se mantiene manualmente, por ahora, e incluye (a) cada persona que presentó una solicitud de extracción que finalmente se fusionó en master , y (b) cada persona que contribuyó de una manera diferente (por ejemplo, proporcionando comentarios constructivos) y que aprobó yo incluyendolos en esta lista.
