DEV Community 👩‍💻👨‍💻

Cover image for Como subir tu proyecto de React a GitHub Pages
Julio Santacruz
Julio Santacruz

Posted on • Updated on

Como subir tu proyecto de React a GitHub Pages

Introducción

En esta ocasión de mostrare como hacer deploy de tu proyecto de react al servidor de paginas estáticas de github pages. Si sabes que es react seguramente sabrás que GitHub y tendrás tu cuenta, si es así sígueme en github. Por otro lado Github Pages es un servicio adicional de hosting de paginas estáticas (solo HTML, JavaScript y CSS) que NO FUNCIONA COMO SERVIDOR BACKEND, es un servicio gratuito y sencillo de usar.

Preparación

Antes de iniciar el proceso de deploy en GitHub Pages debes tener lo siguiente:

  • [x] Cuenta de GitHub
  • [x] Git instalado en tu computadora
  • [x] Proyecto web en su repositorio en GitHub

Instalación de gh-pages

El primer paso será instalar el paquete gh-pages que nos ayudara a convertir el código de react a archivos estáticos que nos acepte el hosting

npm install --save-dev gh-pages
Enter fullscreen mode Exit fullscreen mode

recuerda que las banderas "--save-dev" asignan la instalación como dependencias de desarrollo. Una vez que se haya instalado verifica en el archivo package.json que se haya agregado el paquete

},
...
"devDependencies": {
    "gh-pages": "^4.0.0"
    }
...
   }
Enter fullscreen mode Exit fullscreen mode

Configuración package.json

Para configurar nuestro archivo package.json debemos agregar las siguientes reglas, la primera será homepage la vamos agregar después de "devDependencies"

 },
...
"devDependencies": {
    "gh-pages": "^4.0.0"
    },
 "homepage": "https://USUARIO_GITHUB.github.io/NOMBRE_DE_REPOSITORIO"
...
   }
Enter fullscreen mode Exit fullscreen mode

Para esta regla de "homepage" es importante que coloques TU usuario de github y el nombre del repositorio que estas utilizando, por ejemplo

"homepage": "https://aramxD.github.io/react-fetch-exercise"
Enter fullscreen mode Exit fullscreen mode

Ahora vamos a agregar un par de scripts, llamados "predeploy" y "deploy" que nos ayudara a preparar nuestra aplicación para subirla a los servidores de GitHub

},
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    ...
    "predeploy":"npm run build",
    "deploy": "gh-pages -d build
    ...
},
Enter fullscreen mode Exit fullscreen mode

No olvides guardar los cambios

Ejecutamos Deploy

Con los scripts preparados ejecutamos en nuestra terminar el script "deploy"

npm run deploy
Enter fullscreen mode Exit fullscreen mode

No olvides que la terminal debe esta en la carpeta de nuestro proyecto.
Una vez que termine la ejecución de nuestro comando, podrás ver que se creo una carpeta llamada "build"

carputa build

En esta carpeta encontraras lo archivos estáticos de nuestro proyecto

Commit y push

Para finalizar debemos guardar los cambios y agregarlos a nuestro repositorio, primero agregamos los cambios con:

git add --all
Enter fullscreen mode Exit fullscreen mode

lo siguiente será crear el commit con los cambios

git commit -m"deploy ready"
Enter fullscreen mode Exit fullscreen mode

para finalizar enviamos los cambios al repositorio con "push"

git push origin master
Enter fullscreen mode Exit fullscreen mode




Resultados

Para comprobar que todo haya salido bien, entra a tu repositorio y dirígete a settings, en el lado izquierdo encontraras el apartado de Pages ahí encontraras el link publico de tu proyecto.
github settings

Nota: En ocasiones es necesario esperar unos minutos para que se actualicen los servidores de GitHub Pages y se muestre nuestro proyecto

Oldest comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.