¿Ya tienes listo un trabajo hecho en React y ahora lo quieres subir a Github? ¡Es el paso a seguir! Pero si es tu primera vez es totalmente normal que no sepas qué tienes que hacer. En ese caso no te preocupes, dado que te traemos una guía en la que te explicamos a hacerlo. ¡En breve serás un profesional y podrás repetir el proceso todas las veces que quieras!
¿Cómo subir un proyecto de React a Github paso a paso?
A lo largo de esta guía vas a comprobar que los pasos que tienes que dar para llevar tu aplicación de React a Github Pages no son, ni mucho menos, tan complicados. Presta atención a cada una de las indicaciones:
1. Hacer comprobaciones previas de instalación
Es obvio que no te quieres encontrar con problemas cuando ya estés en proceso de subir la app a Github. Por ello, lo primero que tienes que hacer es una comprobación previa para asegurarte de que tienes instalados en tu equipo los siguientes elementos:
- Node
- Npm
Para ello, abre el terminal de sistema y escribe los siguientes comandos, siempre uno en cada línea de código.
node –v
npm –v
Sabrás que tienes instalados los tres elementos si la respuesta del terminal es una versión de cada uno de ellos. En el caso de que no se encuentre alguno, tendrás que proceder a su instalación. Luego ya puedes continuar al paso 2.
Está claro que ser autodidacta es una de las mejores cualidades que podría tener cualquier aprendiz de programación.
Sin embargo, si quieres acelerar al máximo tu aprendizaje, te recomendamos que veas esta lista con los mejores cursos para aprender React desde cero. Los hemos seleccionado y analizado minuciosamente para ayudarte a elegir el ideal.
2. Termina tu proyecto de React
Por supuesto, para subirlo a Github, primero necesitas completar tu proyecto. En otra guía ya te hemos contado cómo tienes que hacerlo, así que, si tienes dudas, te invitamos a consultarla.
De una manera resumida, te diremos que tienes que usar “npx create-react-app proyecto-para-git“ y cargar este código en la terminal de sistema:
npx create-react-app proyecto-para-git
Sabrás si se ha creado el proyecto de forma eficiente si entras en el directorio del mismo (“proyecto-para-git“) escribes este comando “cd proyecto-para-git“ y luego “npm start“.
Y te aparecerá la ejecución de tu aplicación en la dirección http://localhost:3000.
Eso te confirmará que todo está bien y que el proyecto se ha completado. ¡Ahora solo te queda cargarlo en Github!
3. Crea un repositorio en Github
Sin repositorio en Github no tendrás la forma de subir tu proyecto (dando por entendido que, además, ya te has registrado previamente). Si no sabes de lo que te hablamos, te aconsejamos visitar los diferentes cursos online de React, para complementar tu conocimiento.
4. Configura tu proyecto en React
Ahora abre tu proyecto en un IDE (para este tutorial usaremos Visual Studio). Primero tienes que ir a “package.json“ con la intención de dar forma a una nueva propiedad que recibirá el nombre de “homepage”. El valor que tendrá esta propiedad será la dirección del repositorio de Github en la que vas a desplegar tu proyecto.
Si este tutorial te resulta demasiado complejo échale un ojo a las formaciones propuestas aquí abajo en React y domínalo como nadie.
No obstante, no te sirve con la misma URL tal y como la genera Github, que suele ser de este tipo:
github.com/tu-usuario/proyecto-para-git
En su lugar, tendrás que modificarla para que tenga esta estructura:
tu-usuario.github.io/proyecto-para-git
Por lo tanto, el código quedará de la siguiente manera:
"homepage": "https://tu-usuario.github.io/proyecto-para-git"
Ahora, de nuevo en package.json, tienes que hacer unos añadidos para los comandos “predeploy” y “deploy” con los que preparas el lanzamiento en Github (predeploy) y lo llevas a cabo (deploy).
Dentro de la lista de scripts, antes de “start”, “build”, “test” y “eject” introduce lo siguiente:
"predeploy": "npm run build",
"deploy": "gh-pages –d build"
5. Instala gh-pages
Abre la terminal de Visual Studio con “Ctrl + Shift + ñ“
Instala el paquete npm gh-pages como dependencia de desarrollo.
npm install gh-pages --save-dev
6. Envía los cambios de tu proyecto al repositorio de Github
Para finalizar, hay que enviar los cambios del proyecto al repositorio. Lo harás con el siguiente código:
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/tu-usuario/proyecto-para-git
git push -u origin main
Y por último ingresa el código de deploy:
npm run deploy
Tras esperar un par de minutos, entra en tu repositorio de Github para ver el proyecto. Para ello, entra en “Settings” y en “Pages”. Aparecerá un mensaje en el que se marcará como correcta la disponibilidad de la url con la que has trabajado antes. En el ejemplo sería:
https://tu-usuario.github.io/proyecto-para-git
Este apartado de Github te proporcionará otra información y te permitirá cambiar el tema de publicación del proyecto.
