Deploy de una App React a Github Pages

Introducción

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

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

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"
"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

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

$ npm run deploy

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

Referencias

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

--

--

COO at Activity Consultoría S.A.S

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store