En este artículo, vamos a aprender las formas más populares de desplegar una aplicación React en Netlify. Además, conoceremos los cambios de configuración que tendrás que realizar para desplegar una app React basada en Routing.

Lo que más me gusta de Netlify es que proporciona un montón de características útiles de forma gratuita, tales como:

  • Una forma de desplegar un website estático en segundos.
  • Despliegue continuo, lo que significa que cuando conectas tu repositorio de Github/Gitlab/Bitbucket, se activa automáticamente el despliegue cuando se envían nuevos commits al repositorio.
  • La garantía de que el website nunca se caerá, incluso durante las nuevas implantaciones.
  • Le permite volver fácilmente a cualquier versión anterior de su sitio web con un solo clic.
  • Posibilidad de previsualizar rápidamente cualquiera de las versiones de la aplicación previamente desplegadas.
  • Cambio de dominio o subdominio al instante.

Y mucho más

Así que vamos a ver cómo desplegar una aplicación React en Netlify.

¿Te gustaría aprender Redux desde el principio y construir una aplicación para pedir comida desde cero? Puedes consultar el curso Mastering Redux.

Arrastrar y soltar la carpeta build en Netlify

La forma más rápida y sencilla de desplegar una aplicación React es, simplemente, arrastrar y soltar la carpeta build en Netlify.

Para crear dicha carpeta, simplemente hay que ejecutar el comando npm run build o yarn build desde la línea de comandos, dentro la carpeta del proyecto.

Una vez creada la carpeta build, sólo hay que soltar la carpeta en el área correspondiente, bajo el menú sites, como se muestra a continuación:

drag_drop

Cómo desplegar una aplicación en Netlify desde un repositorio de GitHub

Esta es, sin duda, mi forma favorita de desplegar aplicaciones en Netlify.

La ventaja de utilizar este método es que cada vez que subas cualquier cambio al repositorio de GitHub, se desplegará automáticamente en Netlify. También se pueden ver todas las versiones desplegadas y retroceder fácilmente a cualquier versión de código que funcione previamente con un solo clic.

Si ya tienes un repositorio subido a GitHub, entonces solo tienes que conectarlo.

Para comenzar, tras iniciar sesión en la cuenta de Netlify, en el panel de control, se hace clic en el botón Nuevo sitio desde Git.

netlify_home

Nuevo clic en el botón GitHub para conectar el repositorio GitHub.

git_provider

Se abrirá una nueva pestaña. Asegúrate de que la ventana emergente está activada en tu navegador.

select_repository

Busca el repositorio de GitHub, en la caja de búsqueda Search repos. Si el repositorio no se muestra, haz clic en el botón Configure the Netlify app on GitHub en la parte inferior de la página.

configure_netlify

Una vez que hayas hecho clic, desplázate hacia abajo en la página y haz clic en el desplegable Select repositories, busca el repositorio y haz clic en el botón Guardar.

select_repo

Serás redirigido a la página anterior, que muestra todos los repositorios disponibles.

Busca el repositorio que quieres desplegar. En el ejemplo, está seleccionado el repositorio react-book-management-app que se puede ver cómo se crea en el artículo enlazado.

find_repository-1

Una vez  hayas seleccionado el repositorio, podrás ver la siguiente pantalla:

deploy_repository

Para esta aplicación, no necesitamos cambiar nada.

Las opciones Build command y Publish directory se rellenarán automáticamente. Asegúrate de introducir estos campos si tienes un comando diferente en package.json para construir tu aplicación o esos campos no se rellenan automáticamente.

Ahora, haz clic en el botón Deploy site. Una vez que hayas hecho clic, verás el mensaje de Site deploy in progress.

deploying

Tendrás que esperar un poco mientras se despliega. Una vez completado el despliegue, verás la siguiente pantalla:

deployed

Abre el enlace en la nueva pestaña y verás tu aplicación desplegada en vivo.

deployed_app

¡Impresionante! Ahora, si haces algún cambio en el código fuente y subes ese cambio a GitHub, Netlify lo detectará y volverá a desplegar tu aplicación con tus últimos cambios.

Si compruebas la aplicación, verás que la aplicación funciona bien con la navegación y eres capaz de añadir/editar/borrar un libro.

working_app

Pero hay un problema. Si accedes directamente a la ruta /add o actualizas dicha ruta, obtendrás un error de página no encontrada como se muestra a continuación:

page_not_found

Obtendrás el mismo error si intentas actualizar la ruta de la página de edición (edit page).

Esto se debe a que, cuando accedemos a cualquier ruta en nuestra máquina local, React Router se encarga del enrutamiento. Pero cuando desplegamos la aplicación en cualquier servidor, al acceder directamente a la ruta, se enviará la petición al propio servidor (Netlify en nuestro caso).

Pero como no hay un manejador de ruta /add en el lado del servidor, se verá un error de página no encontrada. Pero Netlify proporciona una manera de arreglar esto.

Crea un nuevo archivo con el nombre _redirects dentro de la carpeta public de nuestro proyecto y añade el siguiente contenido:

/* /index.html 200

Aquí, le estamos diciendo a Netlify que redirija todas las rutas al archivo index.html.

El archivo index.html contiene todo el código de nuestra aplicación React. Se genera dentro de la carpeta de compilación cuando Netlify  ejecuta el comando de compilación yarn build mientras se despliega la aplicación.

Y como el enrutamiento es manejado por nuestra aplicación React, que está contenida en el archivo index.html, nuestra aplicación funcionará sin un problema de página no encontrada.

Ahora, sube los cambios al repositorio de GitHub para que Netlify despliegue la aplicación de nuevo con estos cambios.

Y una vez desplegada, si compruebas ahora la aplicación desplegada, podrás ver que la aplicación funciona bien y no obtenemos un error de página no encontrada.

no_page_not_found

Ya está. Ya hemos terminado de desplegar nuestra aplicación en Netlify.

Cómo cambiar, de forma sencilla, el dominio en Netlify

Si compruebas el nombre del sitio desplegado, verás que no es fácil de recordar, especialmente si tiene muchas aplicaciones desplegadas. Pero Netlify proporciona una manera de cambiar eso fácilmente.

Haz clic en el botón Site settings que aparece en la sección de resumen del sitio.

site_settings

A continuación, haz clic en el botón Change site name e introduce un nuevo nombre. Guarda con el botón Save y ahora se podrá acceder a la aplicación con el nombre modificado.

changed_site_name
Por lo general, me gusta dar el mismo nombre que el nombre del repositorio para que sea fácil encontrar una aplicación en particular si tenemos muchas aplicaciones desplegadas en Netlify.

Si quieres saber cómo desplegar una aplicación React + Node.js en producción, consulta este artículo.

¡Gracias por leer este artículo!

Puedes encontrar el código  completo de GitHub junto con este cambio de redirección en este repositorio.

Puede ver la demostración en vivo de la aplicación desplegada aquí.

¿Quieres aprender todas las características de ES6+ en detalle, incluyendo let y const, promesas, varios métodos de promesa, desestructuración de arreglos y objetos, arrow functions, async/await, importación y exportación y mucho más desde cero?

Echa un vistazo al libro Mastering Modern JavaScript. Este libro cubre todos los prerrequisitos para aprender React y te ayuda a mejorar en JavaScript y React.

Puedes consultar una preview gratuita aquí

Además, puedes consultar el curso gratuito de Introducción a React Router para aprender React Router desde cero.

Por último, ¿Quieres estar al día con el contenido regular sobre JavaScript, React, Node.js? Sigue el LinkedIn de Yogesh Chavan.

Traducido del artículo de Yogesh Chavan - How to Deploy a React Router-Based Application to Netlify