Binary Coffee

Despliega React-App en Netlify Gratis + CI/CD

github react
Netlify es una plataforma que en su plan **basic** o **gratuito** permite un ancho de banda de 100GB mensuales, 300 minutos de build y un hilo para la compilación/construcción de nuestras aplicaciones. <iframe width="560" height="315" src="https://www.youtube.com/embed/BAxGN2VMkOI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ## Necesitamos tener: 1. Git instalado en el ordenador. 2. Cuenta de [Github](github.com). 3. Cuenta de [Netlify](netlify.com). 4. Una aplicación contruida con React para desplegar. La aplicación que voy a desplegar es https://github.com/raulcr98/qr-generator-react, una que construí en un tutorial anterior, puedes ver el artículo aquí: https://binary-coffee.dev/post/como-crear-codigos-qr-con-react. ## Pasos: 1. Lo primero que debemos hacer es crear un nuevo repositorio en GitHub. 2. Luego abrimos la terminal en la carpeta de nuestro proyecto y ejecutamos: ``` echo "# test" >> README.md git init git add . git commit -m "first commit" git branch -M main git remote add origin https://github.com/username/repository_name.git git push -u origin main ``` 3. Vamos a Netlify y nos logueamos. Y desde la vista de inicio seleccionamos **New site from Git**. ![](https://api.binary-coffee.dev/uploads/Captura_de_pantalla_de_2021_01_07_13_35_24_aace88fb3e.png) 4. En el siguiente paso seleccionamos GitHub y luego el repositorio que creamos en el paso 1. Es posible que no te salga si no permites que tenga acceso a todas tus repositorios. ![](https://api.binary-coffee.dev/uploads/Captura_de_pantalla_de_2021_01_07_13_35_34_1d52dbd2d0.png) ![](https://api.binary-coffee.dev/uploads/Captura_de_pantalla_de_2021_01_07_13_35_54_62b5a506ca.png) 5. Luego seleccionas la rama main, el build command debe ser `yarn build` y Publish directory `/build`. Presionamos en **Deploy site**. ![](https://api.binary-coffee.dev/uploads/Captura_de_pantalla_de_2021_01_07_13_36_23_0fa704e9fb.png) 6. Vamos a la página inicial y clickeamos en sites el proyecto que acabamos de crear. Y nos aparecerá la url de nuestra página. ![](https://api.binary-coffee.dev/uploads/Captura_de_pantalla_de_2021_01_07_13_38_27_209ebaf3a9.png) 7. Si deseamos cambiar el dominio de nuestra web simplemente vamos a **Domain Settings** -> **Options** -> **Edit site name** y cambiamos por el de nuestra preferencia. ![](https://api.binary-coffee.dev/uploads/Captura_de_pantalla_de_2021_01_07_13_38_51_f0941e5df2.png) ![](https://api.binary-coffee.dev/uploads/Captura_de_pantalla_de_2021_01_07_13_38_59_64cac337e8.png) Ahora cada vez que realicemos un cambio en nuestro proyecto solo debemos subir los cambios al repositorio en GitHub y automáticamente se actualizará nuestro proyecto. Esto es todo espero que haya sido de utilidad. Cualquier duda o sugerencia puedes hacerme saber mediante los comentarios.
Opiniones