DEV Community

Cover image for Haciendo deploy de una app en react a GitHub Pages 馃殌
Gerald Gonz谩lez Zeled贸n
Gerald Gonz谩lez Zeled贸n

Posted on

Haciendo deploy de una app en react a GitHub Pages 馃殌

Hola lector! 馃憢, hoy te traigo otra..馃槚 gu铆a de como hacer un deploy.. 馃殌 pero esta vez es con react! 馃槑

he estado estudiando un poco esta librer铆a y la he sentido bastante sencilla en comparaci贸n con angular, seguramente has le铆do, visto o escuchado alg煤n tutorial o persona que la curva de aprendizaje con angular es muy alta y es cierto. Pero con react no dure ni una semana en aprender a crear componentes, es cierto que me hace falta mucho por aprender, pero como entrada no me parece mal esta librer铆a. Bueno continuemos con el tema principal por el cual estas ac谩! 馃

Estos son los pasos para poner nuestra app react en github pages: 馃憖

Paso 1

Vas a necesitar crear un repositorio en tu github

Creaci贸n del repositorio

Paso 2

En este paso vas a necesitar tener un proyecto o crear uno, para ello puede utilizar la herramienta create-react-app o puedes crearla desde cero eso ya depende de usted, en esta caso te muestro el comando para crearlo con la herramienta create-react-app

gedgonz@gedgonz:~$ npx create-react-app myReactApp
Enter fullscreen mode Exit fullscreen mode

Paso 3

En este paso necesitar谩s instalar la siguiente dependencia en nuestro proyecto gh-pages, nos vamos a nuestra terminal cambiamos al directorio donde esta nuestra aplicaci贸n creada e instalamos la dependencia gh-pages:

gedgonz@gedgonz:~$ cd myReactApp
gedgonz@gedgonz:~$ npm i gh-pages
Enter fullscreen mode Exit fullscreen mode

Paso 4

En este paso configuraremos nuestro archivo Package.json con lo siguiente:

4.1 homepage

Se agregar谩 un nuevo elemento homepage para colocar la ubicaci贸n donde estar谩 alojado nuestro sitio(URL completa de github)
Configuraci贸n previa1

4.2 predeploy y deploy

Se agregar谩n estos nuevos elementos en la secci贸n de script, esto para ejecutar nuestro build y nuestro deploy desde nuestra consola, cabe de recalcar que estos nombres(predeploy y deploy) puede definirlos como usted estime conveniente

Configuraci贸n previa2

Paso 5

Una vez que tengamos esta configuraci贸n tendremos todo listo para hacer el despliegue de nuestra aplicaci贸n en react hacia github pages.

5.1 Creando el build de nuestro proyecto

Una vez definidos los comandos en la secci贸n de los script los ejecutaremos desde nuestra terminal preferida.

gedgonz@gedgonz:~$ npm run predeploy
Enter fullscreen mode Exit fullscreen mode

5.2 Haciendo deploy hacia github pages

Una vez creado nuestro build, ya estamos listo para hace nuestro deploy!! 馃

gedgonz@gedgonz:~$ npm run deploy
Enter fullscreen mode Exit fullscreen mode

si todo ha salido bien en la terminal nos indicara que se realiz贸 el deploy en github pages 馃挭鈽曪笍

Published
Enter fullscreen mode Exit fullscreen mode

Nota

Si su app est谩 trabajando con react-router-dom, ser谩 necesario agregar el basename en la etiqueta a como se muestra en la siguiente imagen, esto para que github redireccione bien las rutas.

Configuraci贸n ruta

Si t煤 sabes hacerlo de una forma m谩s simple mu茅strame en los comentarios, te lo agradecer铆a mucho! 馃檹

te dejo el link de proyecto donde aplico lo explicado anteriormente: reactMovie

Bueno eso ha sido todo para este post, espero que sirva de ayuda a otro como yo que busca como aprender cada d铆a en este mundo tecnol贸gico. 馃憡

Discussion (0)