Saltar al contenido

Cómo crear una aplicación de reacción y desplegarla en las páginas de GitHub

Ahora que tenemos nuestra aplicación funcionando localmente, queremos mostrar al mundo todo el magnífico trabajo que hicimos. Muchas plataformas proponen alojar aplicaciones JavaScript de primera línea. En esta guía, nos centraremos en la de GitHub, llamada GitHub Pages.

GitHub Pages es un servicio de GitHub que te permite alojar tu aplicación front-end directamente desde tu repositorio GitHub. Todo lo que tienes que hacer es editar tu código y empujarlo en una rama específica de git, o carpeta, de tu repositorio y GitHub se encargará automáticamente del resto por ti.Un requisito previo para usar GitHub Pages es, obviamente, alojar tu código en un repositorio GitHub. Para ello, recomendaría la lectura de esta otra guía Create a Git Repository and Branching Code sobre cómo crear un repositorio Git y alojarlo en GitHub.

Cómo crear una aplicación de reacción y desplegarla en las páginas de GitHub
Cómo crear una aplicación de reacción y desplegarla en las páginas de GitHub

De un vistazo, GitHub Pages te propondrá desplegar automáticamente los recursos estáticos presentes en una rama específica de tu proyecto git. Por convención, la gente generalmente usa una rama de GitHub Pages. Así que cada vez que necesites empujar recursos estáticos (HTML, CSS, y JS) en esta rama, serán automáticamente desplegados y accesibles en https://yourusername.github.io/yourprojectname.

El camino difícil

Para construir su aplicación React y generar recursos estáticos listos para ser desplegados a partir de ella, create-react-app CLI creó automáticamente un script de construcción en su archivo package.json. Este comando construirá su aplicación usando la configuración de su Webpack para la producción y generará los recursos estáticos bajo una carpeta de construcción.

Antes de hacerlo, tenemos que indicar a webpack que nuestra aplicación no se ejecutará a nivel de raíz de nuestro host sino bajo un subpath en una página como https://your_github_username.github.io/your_project_repository_name/.

En tu archivo package.json, añade la propiedad de la página de inicio.

1 "homepage": "https://your_github_username.github.io/your_project_repository_name/"

json

Esto ayudará a Webpack a construir el camino correcto para sus enlaces de recursos. Por defecto, Webpack asume que tu aplicación se ejecuta a nivel de raíz y, en este caso, tu aplicación no podría encontrar ningún recurso estático en https://your_github_username.github.io/.

Ahora, para construir su aplicación, simplemente ejecute el siguiente comando:

123$ hilado build// o$ npm run build

bash

Verá que se ha creado una carpeta/construcción en la raíz de su proyecto que contiene todos los recursos estáticos necesarios para hacer que su aplicación se ejecute en un servidor HTTP.

Ahora, el objetivo es crear una rama git llamada gh-pages que contendrá sólo el contenido de la construcción / carpeta.

Tenemos que crear la rama y revisarla.

1$ git checkout -b gh-pages

bash

Y luego, borraremos todo excepto los archivos relacionados con git y la carpeta de construcción. Después de eso, moveremos el contenido de la carpeta build/ en el nivel raíz y luego confirmaremos y empujaremos nuestros cambios.

12$ git commit -a -m "Create gh-pages branch with static content"$ git push origin gh-pages

bash

Para activar el despliegue automático de tu rama, entra en la configuración de tu proyecto en GitHub y en la sección GitHub Pages, elige la rama de GitHub Pages como fuente.

Desde aquí, GitHub se encargará automáticamente del resto del trabajo por ti. Detectará que has empujado en esta rama específica, desplegará sus recursos estáticos, y lo expondrá en una url como https://your_github_username.github.io/your_project_repository_name/.

No reinventar la rueda

Habrá notado que es un poco engorroso eliminar todo lo que hay en la rama de las páginas gh y mantener sólo los recursos estáticos cada vez que queremos desplegar nuestra aplicación. Algunos chicos inteligentes crearon una herramienta para purgar automáticamente los archivos innecesarios de esta rama, manteniendo sólo los que se han generado durante el proceso de construcción y empujando tu rama de gh-pages en tu repositorio de GitHub.

Esta herramienta se llama «gh-pages».

Para poder usarlo, lo instalaremos como una dependencia de npm dev de nuestro proyecto.

123$ yarnadd -D gh-pages// or$ npm i -D gh-pages

bash

Aunque esta herramienta puede ser utilizada de forma programada, en el contexto de esta guía nos centraremos en el uso de su característica de línea de comandos. Lo que nos gustaría tener es un script npm que nos permita desplegar nuestra aplicación en las páginas GitHub con un solo comando.

Añadamos una nueva definición de guión en la sección de guiones de nuestro archivo package.json.

1234 "scripts":{/// ... Otros scripts generados por create-react-app "deploy": "gh-pages -d build"}

json

Ahora podemos desplegar nuestra aplicación simplemente ejecutándola:

123$ yarn deploy// or$ npm run deploy

bash