Guía para implementar una aplicación React en Netlify

En esta guía, aprenda cómo implementar una aplicación React JavaScript en un servidor Netlify en vivo, a través de la interfaz de arrastrar y soltar, Netlify CLI, Netlify Dashboard, desde un proveedor de Git como GitHub, GitLab y BitBucket.

Introducción

Implementación es el proceso de mover nuestro código de un sistema de control de código fuente a una plataforma de alojamiento donde se almacena y se puede servir como una aplicación para los usuarios finales. Por lo general, esto se hace en la nube o en un servidor local.

Antes de la llegada de las plataformas en la nube como Netlify, el alojamiento solo lo realizaban proveedores de alojamiento que requerían una nueva carga de todos los activos estáticos (archivos de compilación generados después de ejecutar npm run build) cada vez que realizaba un cambio. Esta carga se realizó utilizando un software FTP o un sistema de administración de alojamiento web como cPanel, que puede ser muy estresante y técnico.

¡Netlify está destinado a resolver ese problema! Le proporciona tres métodos simples para implementar una aplicación: interfaz de arrastrar y soltar, interfaz de importación de proyectos e interfaz de línea de comandos (CLI). Aunque todos ellos están hechos para ser simples, cada uno está diseñado con un caso de uso diferente en mente.

En esta guía, veremos cómo implementar una aplicación React en Netlify y cubriremos los pros y los contras de cada forma de implementar una aplicación React. Después de eso, explicaremos rápidamente cómo lidiar con el error 404 Página no encontrada en Netlify.

¿Por qué usar Netlify?

Netlify es un proveedor de alojamiento en la nube que proporciona servicios de back-end sin servidor para sitios web estáticos. Está diseñado para maximizar la productividad en el sentido de que permite a los desarrolladores (especialmente orientados a la interfaz de usuario) y a los ingenieros crear, probar e implementar rápidamente sitios web/aplicaciones.

Funciona al conectarse a su repositorio de GitHub desde donde extrae el código fuente. Después de eso, ejecutará un proceso de compilación para renderizar previamente las páginas de nuestro sitio web/aplicación en archivos estáticos.

Existen numerosas razones a favor de usar Netlify, estas son solo algunas de ellas:

  • Netlify es menos costoso: crear y alojar un sitio web estático le ahorrará dinero a largo plazo. Netlify aumenta significativamente la velocidad del sitio a través de una distribución global y una representación previa automatizada.
  • Netlify hace que sea increíblemente simple implementar un sitio web; de hecho, la forma más sencilla de lograrlo es usar GitHub, GitLab o Bitbucket para configurar la implementación continua.
  • Netlify hace que sea súper fácil lanzar un sitio web con su solución de administración de DNS integrada.
  • Fácilmente podríamos implementar solo una rama específica de nuestro proyecto Git; esto es útil para probar nuevas funciones que pueden o no llegar a la rama maestra/principal, o para determinar rápidamente cómo un PR afectará su sitio.
  • Netlify le permite obtener una vista previa de cualquier implementación que realice o quiera realizar; esto le permite a usted y a su equipo ver cómo se verán los cambios en producción sin tener que implementarlos en su sitio existente.
  • Netlify proporciona una práctica función de envío de formularios que nos permite recopilar información de los usuarios.

Comenzando

En esta guía, implementaremos una aplicación de tintes y sombras de color en Netlify. Es una aplicación React simple que extrae tintes y sombras del paquete values.js.

Antes de comenzar, repasemos algunos de los requisitos previos para usar Netlify:

Enviar su código a GitHub

Primero debemos enviar nuestro proyecto a cualquier proveedor de Git antes de que podamos implementar nuestras aplicaciones en Netlify. Para esta guía, usaremos la terminal para enviar nuestra aplicación React a GitHub.

Pero comencemos con la creación de un repositorio de GitHub primero. Luego, asegúrese de completar la información necesaria y haga clic en Crear repositorio:

De vuelta en la terminal, comencemos preparando todos nuestros archivos, para que podamos enviarlos al repositorio, luego crear una nueva rama principal usando los siguientes comandos:

1
2
3
4
$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M main

Una vez hecho esto, ahora podemos enviar al repositorio remoto creado usando los siguientes comandos:

1
2
$ git remote add origin https://github.com/username/git-repo.git
$ git push -u origin main

¡Nuestro código debería aparecer cuando actualicemos el repositorio! Continuando, hay tres métodos principales para realizar implementaciones de Netlify. Veamos todos los métodos y comparémoslos al final.

Implementación de la aplicación en Netlify

Netlify ofrece un plan gratuito que nos permite crear una cuenta o iniciar sesión usando cualquiera de las opciones que se encuentran en la página de inicio de sesión (como se ve en la imagen de abajo).

Después de iniciar sesión, accederemos a nuestro panel de control de Netlify, donde usaremos el método de arrastrar y soltar y el método de importación de proyectos para implementar nuestra aplicación en Netlify.

Implementar la aplicación en Netlify con arrastrar y soltar

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

1
$ npm run build

Una vez que esto se complete con éxito, se creará nuestra carpeta de compilación, que contendrá todos los archivos listos para producción (estos son los archivos que subiremos a Netlify usando el método de arrastrar y soltar).

{.icon aria-hidden=“true”}

Nota: Esto solo funcionará para archivos estáticos como HTML, CSS y JS. Es por eso que primero tuvimos que construir nuestro proyecto para que pudiera generar nuestros archivos estáticos.

Haga clic en "Agregar nuevo sitio" > "Implementar manualmente" en nuestra página de descripción general de Netlify. Esto nos llevará a la página donde soltaremos nuestros archivos estáticos. También podemos acceder a la suelte la página aquí siempre que estemos logueados.

El siguiente paso sería eliminar la carpeta de compilación que se generó para que se implemente de inmediato en una URL en vivo como se ve a continuación:

Implementar la aplicación en Netlify con la CLI de Netlify

La interfaz de línea de comandos (CLI) de Netlify nos permite implementar nuestra aplicación directamente desde la línea de comandos, así como configurar la implementación continua para que Netlify implemente automáticamente nuevas versiones de nuestro sitio cuando enviamos confirmaciones a nuestro repositorio Git conectado.

El primer paso sería instalar la CLI usando el siguiente comando:

1
$ npm install netlify-cli -g

Este comando instalará Netlify globalmente. En caso de que desee instalar Netlify CLI localmente, ejecute el siguiente comando desde el directorio raíz de nuestro proyecto:

1
$ npm install netlify-cli --save-dev

{.icon aria-hidden=“true”}

Nota: Una vez que se haya instalado correctamente, podemos ejecutar netlify en nuestra terminal para ver una lista de todos los comandos de Netlify y lo que hacen.

El primer paso para implementar nuestra aplicación React usando Netlify CLI es autenticarse y obtener un token de acceso a través de la línea de comandos ejecutando el siguiente comando desde cualquier directorio:

1
$ netlify login

Esto abrirá una pestaña del navegador para autenticarnos y otorgarnos acceso a la CLI de Netlify:

Una vez que esto sea exitoso, ahora podemos implementar nuestra aplicación usando el comando deploy:

1
$ netlify deploy

Esto generará algunas preguntas con respecto a la configuración:

Como ya tenemos nuestra aplicación de reacción alojada en GitHub, solo necesitamos "Vincular este directorio a un sitio existente". Ahora aparecerá la siguiente pregunta:

Esta carpeta estará vinculada al repositorio de GitHub donde empujamos nuestro código, y aparecerá automáticamente siempre que se agregue como origen remoto. Después de eso, nuestro sitio se creará y se implementará en una URL borrador, que podemos ver copiando y pegando la URL en el navegador:

Según nuestra consola, "si todo se ve bien en su borrador de URL, impleméntelo en la URL de su sitio principal con el indicador --prod." Esto nos permite obtener una vista previa de cualquier implementación que hagamos para que nosotros y nuestros El equipo puede ver cómo se verán los cambios en producción sin tener que implementarlos en nuestro sitio existente.

Entonces, para hacer que nuestra aplicación esté activa, ejecutaremos el siguiente comando:

1
$ netlify deploy --prod

Una vez que esto se complete con éxito, se nos proporcionarán dos URL importantes: la URL de implementación única (que representa la URL única para cada implementación individual) y la URL en vivo (que siempre muestra su última implementación):

Entonces, cada vez que actualicemos e implementemos nuestro sitio web, obtendremos una URL única para esa implementación. Esencialmente, si implementamos varias veces, tendremos varias URL únicas que puede usar para dirigir a los usuarios a una versión específica de su aplicación. Sin embargo, la URL activa siempre muestra nuestros cambios más recientes en la misma URL.

Importando proyecto a Netlify Dashboard

Hasta ahora, hemos visto cómo implementar una aplicación React arrastrando y soltando, así como la CLI de Netlify. Si no queremos usar la CLI, podemos hacer todo manualmente importando el proyecto desde su proveedor de Git a nuestra página de Netlify. Esto también puede realizar funciones similares a la CLI de Netlify.

El primer paso sería visitar la página de nuestro equipo de Netlify, luego hacer clic en "Agregar nuevo sitio" > "Importar un proyecto existente" como se ve a continuación:

Después de eso, nos llevará a una página donde podemos seleccionar el proveedor de Git donde está alojado el código fuente de su sitio/aplicación. En nuestro caso, optamos por GitHub. Ya podemos buscar el repositorio de GitHub una vez autorizado:

Ahora podemos manejar la implementación una vez que hayamos identificado el proyecto. Esto nos lleva a una página donde podemos especificar qué rama queremos implementar, por ejemplo, si estamos probando una versión específica. Esta página también nos permite especificar el comando de compilación y la ubicación del archivo de compilación (Netlify maneja esto automáticamente, excepto que deseemos cambiarlo). Cuando hayamos terminado, haremos clic en el botón "Implementar sitio".

Cuando nuestra implementación sea exitosa, deberíamos obtener una URL activa. También podemos modificar la configuración en la página de descripción general de la configuración, como la configuración del dominio, ver los registros de implementación, etc.

Comparación de las opciones de implementación

Los primeros tres métodos nos ayudan con la implementación, pero los últimos dos métodos ayudan con otras funciones, como la implementación continua, la implementación de ramas específicas, el manejo de pruebas, etc.

La interfaz de arrastrar y soltar es útil cuando desea implementar archivos de compilación rápidamente sin tener que enviar su código a ningún proveedor de Git. La CLI y el panel de control de Netlify realizan las mismas funciones bajo el capó. La CLI de Netlify acepta todos los comandos a través de una terminal limpia, por lo que no tendrá que lidiar con la navegación innecesaria y puede esperar que cambie con menos frecuencia que una página web.

Elegir lo mejor es una cuestión de preferencia personal de un desarrollador, y muchos prefieren la CLI debido a la menor sobrecarga requerida: puede usarla desde el IDE, es limpia y concisa, y no cambia tanto. a través del tiempo.

Error de manejo de página no encontrada

Si estamos usando un enrutador, como React Router, necesitaremos configurar redireccionamientos y reglas de reescritura para nuestras URL. Porque recibimos una página de error 404 cuando hacemos clic en cualquier elemento de navegación para cambiar la página (ruta) y actualizar el navegador.

Como resultado, Netlify hace que configurar redireccionamientos y reglas de reescritura para nuestras URL sea realmente fácil. Tendremos que agregar un archivo llamado _redirects a la carpeta de compilación de nuestra aplicación, para que esto suceda automáticamente, lo colocaremos en la carpeta pública. La siguiente regla de reescritura debe incluirse en el archivo:

1
/*  /index.html 200

Independientemente de la URL que solicite el navegador, esta regla de reescritura servirá el archivo index.html en lugar de devolver un 404. Por lo tanto, para ver los cambios más recientes en la URL activa, debemos volver a implementar utilizando cualquiera de los métodos preferidos. . Ya no veremos la página de error 404 después de cambiar nuestra ruta y actualizar la aplicación:

Conclusión

Implementación es el proceso de mover nuestro código de un sistema de control de código fuente a una plataforma de alojamiento donde se almacena y se puede servir como una aplicación para los usuarios finales. Por lo general, esto se hace en la nube o en un servidor local.

Antes de la llegada de las plataformas en la nube como Netlify, el alojamiento solo lo realizaban proveedores de alojamiento que requerían una nueva carga de todos los activos estáticos (archivos de compilación generados después de ejecutar npm run build) cada vez que realizaba un cambio. Esta carga se realizó utilizando un software FTP o un sistema de administración de alojamiento web como cPanel, que puede ser muy estresante y técnico.

En esta guía, hemos visto cómo implementar fácilmente una aplicación React en Netlify de tres maneras: a través de la interfaz de arrastrar y soltar, la CLI de Netlify y el panel de Netlify. También aprendimos cómo corregir el error 404 que ocurre cuando su aplicación React usa un enrutador.