Tres pasos para publicar proyectos de React en GitHub

Bruno Cabral. Con el pasar de los años, muchas herramientas se han vuelto imprescindibles para la contratación de personas para puestos relacionados con el mundo de la programación. Asimismo, muchas cosas por parte de los buscadores de empleo también han cambiado: cuanto más se pueda ver y medir tu trabajo, más fácil será que te encuentren y te contraten para un determinado puesto. Para llenar este vacío, tenemos varias plataformas de alojamiento de código disponibles, una de las más conocidas es GitHub.

Si ya te familiarizas con la programación, sin duda ya tienes un perfil en GitHub e incluso un proyecto publicado allí (y si no lo tienes, sinceramente, es hora de dejar atrás el prejuicio). Sin embargo, cuando subimos nuestro código a la cuenta de GitHub, solo es posible ejecutarlo si realizamos algunos pasos, como clonar el repositorio y ejecutarlo en nuestra máquina local. Convengamos que con el advenimiento de la tecnología y la búsqueda de la practicidad, no sería posible que GitHub solo nos brindara esta forma de acceder a los proyectos.

Con el fin de facilitar la visualización de nuestras aplicaciones, en este artículo le enseñaremos en tres pasos cómo publicar proyectos en GitHub sin dedicar mucho tiempo a hacerlo.

¿Cómo publicar proyectos en GitHub?

1 - Instala Github en tu máquina y crea un proyecto React

Para poder subir y descargar nuestros proyectos a través de GitHub es necesario instalarlo en nuestro terminal. Simplemente ejecuta los siguientes comandos si usas Linux:

sudo apt-get install git-all

git config --global user.name "Tu nombre"

git config --global user.email “tuemail@exemplo.com”

Si usas macOS, ejecuta brew install git (debes tener brew instalado). Para el sistema operativo Windows, haz clic aquí para ir a la página de descarga oficial de GitHub. Si todo salió bien, vamos al siguiente paso. Al ejecutar los siguientes comandos, recibirás como respuesta la versión de git instalada y los datos que ya registraste, respectivamente:

git --version

git config --list

Para que GitHub funcione de manera óptima en tu máquina local, también es necesario crear y registrar una clave SSH. El paso a paso lo proporciona el propio GitHub para hacernos la vida más fácil.

Si aún no has creado un proyecto de React, ejecuta los comandos que se enumeran a continuación (si ya lo hiciste, ve directamente al paso 2). Si todo se hace correctamente, se cargará una página con el logotipo de React en tu navegador:

npx create-react-app publicando-meu-projeto

cd project-react-redux

npm install

npm start

Nota: usamos npm como una herramienta de administración de paquetes, pero siéntete libre de usar lo que te resulte más cómodo.

2 - Crea un repositorio en GitHub y conéctalo con tu proyecto

En la pantalla inicial de GitHub, haz clic en el botón verde escrito "New" ubicado en la esquina superior izquierda de la pantalla. Te redirigirá a una página de creación de proyectos, donde deberás informar el nombre de la creación, la persona a cargo y si será pública o privada. Dado que publicamos en la plataforma para presentar nuestro trabajo, proyectos como éste siempre serán públicos:

Cuando creamos el repositorio, se presentarán en pantalla un conjunto de recomendaciones. Las usaremos para conectar nuestro proyecto local con GitHub.

No es necesario iniciar git (git init) en nuestro repositorio de React porque cuando ejecutamos el comando “create-react-app”, esta acción ya está realizada. De esta forma, basta con ejecutar los comandos listados, recordando la necesidad de cambiar el campo “tu-clave-SSH” por la clave que nos proporcionó GitHub al crear el proyecto:

git add .

git commit -m "first commit"

git branch -M main

git remote add origin sua-chave-SSH

git push -u origin main

3 -  Instala y configura GitHub Pages

GitHub Pages es un servicio que proporciona la propia plataforma para que podamos alojar sitios web que utilicen HTML, CSS y JavaScript, de forma que sea posible ejecutarlos y publicarlos para que cualquiera pueda acceder a ellos (en el caso de proyectos públicos). Todas las aplicaciones creadas a través de GitHub Pages están alojadas en el dominio github.io y lo que haremos en los próximos pasos es realizar una build para nuestro repositorio de GitHub en una rama llamada gh-pages, que la plataforma reconoce automáticamente como una página web del repositorio.

Para ello, escribe el siguiente comando a través de la terminal en la carpeta raíz de tu proyecto:

npm add -D gh-pages

Una vez instaladas las páginas de gh, crearemos el script para que podamos cargar nuestro contenido en esta rama de páginas de gh. Haremos esto agregando algunas oraciones al documento package.json, ubicado en la carpeta raíz de la aplicación creada. En este documento JSON, agregaremos una nueva clave llamada "página de inicio", que tendrá como valor una cadena que contendrá "https://github-account-name.github.io/project-name" donde "github-account- name" github-account” debe ser reemplazado por su nombre de usuario de GitHub y “project-name” será el nombre que le dimos al crear el repositorio en la plataforma. Además, agregaremos las siguientes líneas a la clave de scripts:

"predeploy": "npm run build",

"deploy": "gh-pages -d build"

El último paso que debemos hacer para publicar nuestro sitio web es escribir el siguiente comando:

npm run deploy

Si está utilizando la gestión de rutas (muy recomendable para publicar y organizar proyectos), es necesario cambiar la ruta principal creada de “/” a “/nombre-del-proyecto”. Esto evitará cualquier conflicto con futuros proyectos publicados en las Páginas de GH. En este ejemplo, lo cambiamos a '/online storage'.

Para acceder a la publicación de tu proyecto, simplemente copia esta dirección existente en la tecla "hompage" y pégala en la URL de tu navegador. Si no aparece nada, espera unos minutos para que el proyecto se copie efectivamente a la branch responsable de mostrarlo y luego intenta nuevamente. Si aún no funciona, vuelve a leer el tutorial para asegurarte de que no te olvidaste de nada.

Siempre que hagamos cambios en nuestro proyecto, debemos actualizar la rama gh-pages usando el comando npm run deployment. También recuerda mantener la rama principal actualizada, realizando regularmente nuevas confirmaciones y reenviando los cambios al repositorio usando el comando git push.

Consideraciones finales

Es sumamente importante para el programador tener un portafolio con sus proyectos que demuestren sus capacidades. Te dejamos aquí nuestras recomendaciones para que publiques todas tus aplicaciones en GitHub y en las GH Pages, incluso para que sigas tu propia evolución.

Además, mantener el perfil actualizado en tus proyectos evita que los pierdas por cualquier problema local que pueda ocurrir en tu equipo. ¿Qué esperas?