Cómo implementar una aplicación React en Netlify

Voy a enseñarle cómo implementar y alojar su aplicación React con Netlify.

Netlify es un servicio que automatiza las compilaciones, implementaciones y administra sus sitios web. Es una de las soluciones de implementación más rápidas y fáciles de estos días.

Netlify ofrece un plan gratuito. Entonces, primero, iniciaremos sesión en Netlify usando cualquiera de las opciones (Github, Gitlab, Bitbucket, Correo electrónico) que se proporcionan en la página de inicio de sesión.

Comenzaremos creando una compilación de nuestra aplicación ejecutando este comando:

npm run build

Entonces, ahora se generará nuestra carpeta de compilación que contendrá todos los archivos listos para producción.

Ahora, hay dos formas de implementar nuestra aplicación en Netlify.

Arrastrar y soltar

Netifly lo ha hecho tan fácil que solo tenemos que arrastrar y soltar nuestra carpeta de compilación en su aplicación en línea (imagen del extremo derecho arriba), y nuestra aplicación se implementará en una URL en vivo.

Nota: La aplicación en línea Netlify es la pantalla que aparece después de haber iniciado sesión en su cuenta netlify.

CLI de Netlify

Netifly también proporciona una interfaz de línea de comandos que le permite implementar su aplicación directamente desde la línea de comandos. Eso es lo que haremos ahora.

Entonces, primero, instalaremos la CLI usando el siguiente comando:

npm install netlify-cli -g

Ahora, estamos listos para implementarlo. Para desplegar la aplicación tenemos que asegurarnos de que estamos en la carpeta del proyecto y luego ejecutaremos este comando:

netlify deploy

Es posible que obtengamos una ventana emergente que nos solicite iniciar sesión con Netlify y otorgar acceso a la CLI de Netlify .

Ahora, haremos clic en Autorizar. Ahora que estamos autorizados, podemos seguir las instrucciones de la línea de comandos para implementar la aplicación.

Solicitudes de línea de comando

  1. En la consola, dice que “ Esta carpeta aún no está vinculada a un sitio. ¿Que te gustaría hacer?" Quiere saber si queremos vincular este directorio a un sitio existente o crear y configurar un nuevo sitio. Dado que este es un sitio nuevo, seleccionaremos Crear y configurar un sitio nuevo.

2. Nos da la opción de darle un nombre a nuestro sitio. Voy escribo cartera en netlify (Puede escribir cualquier nombre disponible que te gusta).

3. Ahora te pedirá la cuenta de Netlify que quieres usar, así que seleccionaré mi cuenta (Abhishek Jakhar) , puedes seleccionar la tuya.

4. Ahora, como ruta de implementación, necesitamos especificar el directorio de compilación de nuestro proyecto que contiene los activos para la implementación. Entonces, escribiremos build allí y presionaremos enter.

5. Ahora, nuestro sitio se creará y se implementará primero en un borrador de URL, que podemos ver copiando y pegando la URL en el navegador.

Ahora, de vuelta en la consola, dice "Si todo se ve bien en su URL borrador, tómalo para vivir con la marca --prod" .

Entonces, para que nuestra aplicación esté activa, ejecutaremos el comando que se muestra en la línea de comando

netlify deploy --prod

Nos pedirá una vez más que especifiquemos la ruta de implementación para la compilación en vivo, que nuevamente es nuestra carpeta de compilación.

Ahora, en la salida de la consola, obtenemos dos URL. Una URL de implementación única, que representa la URL única para cada implementación individual, y una URL en vivo que siempre muestra su última implementación.

Entonces, cada vez que actualice su sitio web y lo implemente, obtendrá una URL única para esa implementación. Básicamente, si implementamos varias veces, tendremos varias URL únicas para que pueda dirigir a los usuarios a una versión específica de su aplicación. Pero la URL activa siempre muestra sus últimos cambios en la misma URL.

Nota: Netlify protege automáticamente su sitio a través de HTTPS de forma gratuita .

Error de página no encontrada

Si está publicando una aplicación que utiliza un enrutador como React Router, deberá configurar redirecciones y reescribir reglas para sus URL. Porque cuando hacemos clic en cualquier elemento de navegación para cambiar la página (ruta) y actualizar el navegador, obtenemos una página de error 404.

Así que Netlify hace que configurar redirecciones y reescribir reglas para sus URL sea realmente fácil. Necesitaremos agregar un archivo dentro de la carpeta de compilación de nuestra aplicación llamado _redirects. Dentro del archivo, necesitamos incluir la siguiente regla de reescritura.

/* /index.html 200

Esta regla de reescritura servirá el archivo index.html en lugar de proporcionar un 404, sin importar qué URL solicite el navegador.

Entonces, ahora, para ver los últimos cambios en la URL en vivo, debemos implementar con netlify deploy. Nuevamente, especificaremos build como ruta de implementación. Ahora, cuando veamos la URL en vivo y actualizamos la aplicación después de cambiar la ruta, ya no veremos la página de error 404.

Eso es todo al respecto. En netlify.com puede ver la configuración de su sitio. Allí puede hacer cosas como configurar un dominio personalizado o conectar el sitio a un repositorio de GitHub.

Netlify: plataforma todo en uno para automatizar proyectos web modernos

Implemente sitios web estáticos modernos con Netlify. Obtenga CDN, implementación continua, HTTPS con 1 clic y todos los servicios que ... www.netlify.com

Espero que haya encontrado esta publicación informativa y útil. ¡Me encantaría escuchar tus comentarios!

¡Gracias por leer!