Deploy con React en Netlify
Tags: react, netlify, webdev
Published: 2021-08-17 23:51:29

## **Introducción.**

Al terminar de desarrollar tu aplicación con React, a menudo nos preguntamos como subir nuestra aplicación a algún servidor para poderla visualizar en Internet y compartirla.

El día de hoy te explicaré una de las maneras para poder realizarlo, en Netlify.

## **¿Qué es Netlify?.**

Netlify es un sistema de gestión de contenido de código abierto para un flujo de trabajo con Git, es una plataforma para un alojamiento gratuito.

Algo muy interesante, es que Netlify viene con **CI/CD** integrado y otras herramientas útiles para que nuestra aplicación sea fácil de implementar. Solo necesitamos enviar nuestro código a un repositorio en la nube como GitHub o GitLab y Netlify hace el resto para que nuestra aplicación esté en línea.

* CI/CD: Son las prácticas combinadas de integración continua **(CI)** y entrega continua o implementación continua **(CD)**.

## **Requisitos:**

- Una cuenta de [Github](https://github.com/)
- Cuenta en Netlify [Netlify](https://www.netlify.com/)
- [Instalar Git](https://git-scm.com/book/es/v2/Inicio---Sobre-el-Control-de-Versiones-Instalaci%C3%B3n-de-Git)
- [Instalar NodeJS](https://nodejs.org/en/download/)

## **Configuración en tu proyecto React**

Cuando nosotros usamos React, normalmente creamos nuestra aplicación usando el siguiente comando en la terminal:

`npx create-react-app example-app`

Para iniciar nuestra aplicación usamos el comando `yarn start`.

Hay dos formas de ver nuestro proyecto compilado:

1.- Cuando usamos el comando anterior (`yarn start`), automáticamente nos abre en nuestro navegador predeterminado el proyecto.

2.- Abrimos directamente desde el navegador la siguiente URL: `http://localhost:3000`

En ambas formas veremos lo siguiente:

<img src='https://i.postimg.cc/h46sGWLs/Netlify-React-01.jpg' border='0' alt='Netlify-React-01'/>

## **Configuración - GitHub**

Github lo vamos a utilizar para alojar nuestro proyecto y poder activar Netlify, de esta forma lo haremos en línea cada vez que introduzcamos nuevas funciones (cambios) en nuestro repositorio.

Primero, creamos nuestro repositorio, no importa si es público o privado. Después de esto, copiamos la URL del repositorio.

**Nota:**

`La URL del repositorio tiene dos tipos. **HTTPS y SSH**.
HTTP requiere que inserte el nombre de usuario y la contraseña de GitHub cada vez que haga cambios. Y SSH requiere que se configure SSH-Key entre nuestra computadora y GitHub.`

Ahora tenemos que compilar nuestro proyecto con el comando `yarn build` en la terminal, este comando ejecutará la construcción de nuestro proyecto y creará una carpeta con el nombre **"build"** en raíz de todo el proyecto. "Es muy importante realizar este paso porque en Netlify configuraremos el comando de construcción."

## **Configuración - Netlify**

A continuación, iniciamos sesión con nuestra cuenta de Netlify.

Clic en crear nuevo sitio:

<img src="https://i.postimg.cc/RFkNtRV3/Netlify-React-02.jpg" alt="Netlify-React-02"/>

Y clic en GitHub:

<img src="https://i.postimg.cc/fWd3N6BY/Netlify-React-03.jpg" alt="Netlify-React-03"/>

Al realizar estos primeros pasos, vamos a elegir nuestro repositorio que creamos anteriormente.

Ahora, damos clic en **"Configure Netlify on Github"**, donde nos saldrá una pantalla de GitHub para darle acceso a Netlify y poder buscar nuestro repositorio. (Esta pantalla nos saldrá por única vez cuando conectemos un nuevo repositorio con Netlify).

<img src="https://i.postimg.cc/BnSt2tsC/Netlify-React-04.jpg" alt="Netlify-React-04"/>

<img src="https://i.postimg.cc/tTZs7fyQ/Netlify-React-05.jpg" alt="Netlify-React-05"/>

Hay que asegurarnos de proporcionar el valor correcto en cada campo.

**Branch to deploy:** La rama (en GitHub) que Netlify extraerá, compilará y publicará nuestra aplicación. Por lo general, es nuestra rama de producción.

**Build command:** Es un comando que Netlify ejecutará para construir nuestra aplicación.

<img src="https://i.postimg.cc/3xtN17xQ/Netlify-React-06.jpg" alt="Netlify-React-06"/>

Una vez completando los campos de configuración, daremos clic en el botón "Deploy site" para comenzar a compilar y publicar nuestra aplicación.

Se vera algo similar cuando finalice el Deploy:

<img src="https://i.postimg.cc/Gp92SN48/Netlify-React-07.jpg" alt="Netlify-React-07"/>

Por defecto, Netlify le dará a nuestra aplicación un subdominio único, pero podemos cambiarlo en el botón "Domain settings."

<img src="https://i.postimg.cc/X7cpZ9MJ/Netlify-React-08.jpg" alt="Netlify-React-08"/>

Clic en "Options" y seleccionamos "Edit site name".

<img src="https://i.postimg.cc/vHd4H3Nk/Netlify-React-09.jpg" alt="Netlify-React-09"/>

Una vez que cambiamos nuestro sitio y guardemos nuestra aplicación, la visitaremos. En este caso, el nombre de mi aplicación es:

https://pokedex-angeel.netlify.app/

<img src="https://i.postimg.cc/Zn60xdCw/Netlify-React-10.jpg" alt="Netlify-React-10"/>

Como vemos, hemos terminado de subir nuestra aplicación en Netlify, una de sus ventajas, es que en automático reconoce los cambios de tu repositorio y realiza el deploy para tener actualizada la versión.

## **Conclusión:**

Con estos pasos que acabamos de ver, podemos darnos cuenta que Netlify es una plataforma con procesos sencillos, interfaces amigables, y lo mejor es que es gratuito, te aconsejo tener muy claro tus comandos de construcción (`npm build`), tu directorio publico y el nombre de tu repositorio para no tener problemas en el deploy.

Nos vemos! 

Sígueme:

[Twitter](https://twitter.com/angeluchh).