Deploy de una App React a Github Pages

Github brinda una herramienta de hosting gratuita para una página en tu repositorio. En este artículo te explico como subir tu app react en simples pasos.

Introducción

En este tutorial vamos a ver cómo crear una app de react y hostearla en Github Pages.

En nuestro proyecto tendremos principalmente 2 branches: Master que va a contener el código de nuestra app y es el que vamos a estar modificando y el branch gh-pages que contiene la versión de la app que ya a pasado por el build y será mostrada en la url de Github pages.

Este procedimiento va a mostrar la creación de una app react y repositorio de cero pero sus pasos se pueden replicar para una app o repositorio ya creados.

Procedimiento

Paso 1: Crear un repositorio

Vamos a crear un repositorio en Github llamado react-gh-pages

Paso 2: Crear una nueva app react en nuestra máquina

$ create-react-app my-react-app

Esta es la aplicación que vamos a cargar más adelante y como resultado nos creará una carpeta con los archivos iniciales de la app

Paso 3: Instalar el paquete gh-pages como una “dev-dependency” de la app

$ cd my-react-app
$ npm install gh-pages --save-dev

Paso 4: Agregar propiedades al archivo package.json

En el nivel raíz agregar la propiedad homepage donde tendremos la url de nuestra página http://{username}.github.io/{repo-name}, donde username es el usuario de Github y repo-name es el nombre del repositorio del paso 1

//...
"homepage": "http://gitname.github.io/react-gh-pages"

En la propiedad scripts(Que ya existe) debemos agregar las propiedades predeploy y deploy con los valores que les muestro a continuación:

"scripts": {
  //...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

Paso 5: Inicializar el repositorio Git y asociar a mi remote

$ git init
Initialized empty Git repository in C:/path/to/react-gh-pages/.git/
$ git remote add origin https://github.com/gitname/react-gh-pages.git

Esto va a hacer que gh-pages sepa donde queremos deployar nuestra app en el siguiente paso. Ademas hará que sepa donde queremos hacer push de nuestro código.

Paso 6: Generar un build de producción para nuestra app y realizar el deploy a Github Pages

$ npm run deploy

Esto es todo! Ahora nuestra app es accesible desde nuestra url.

Notas adicionales

Con este proceso no enviamos el código al branch principal eso podemos hacerlo con el comando

$ git add .
$ git commit -m "Creación de app para alojar en Github Pages"
$ git push origin master

Es importante asegurarnos que en la sección Github Pages de nuestro proyecto el branch correcto sea asignado

Referencias

Facebook’s tutorial on deploying a React app to GitHub Pages