Artículo original escrito por Reed Barger
Artículo original How to Auto-Deploy Your React Apps with Cloudflare Pages
Traducido y adaptado por Josue Custodio
En este artículo, te mostraré cómo implementar rápidamente cualquier aplicación React con la ayuda de las páginas de Cloudflare.
Verás cómo no solo crear e implementar tu aplicación en minutos usando solo algunas herramientas, sino también cómo implementar automáticamente cualquier cambio futuro que realices a través de tu cuenta de GitHub.
Cómo empezar
Para comenzar, necesitarás las siguientes herramientas:
- El administrador de paquetes npm y el software de control de versiones Git
- Tu propia cuenta de GitHub (gratuita) y tu cuenta de Cloudflare
Crea nuestro proyecto React
Para implementar una aplicación React, primero necesitamos crear una.
Creemos una aplicación React en nuestra computadora con la ayuda de Create-React-App. Podemos hacerlo dándole el nombre "cloudflare-react":
npx create-react-app cloudflare-react
Crea nuestro repositorio de Github
Y una vez que nuestro proyecto se haya creado con éxito, sigamos adelante y creemos un repositorio de GitHub para él.
Usamos GitHub para poder mantener un registro en línea y fácil de administrar de nuestros proyectos individuales. GitHub también permite que otros usuarios realicen mejoras en nuestro código a través de solicitudes de extracción.
Cloudflare usa GitHub para realizar un seguimiento de todo nuestro código y cada vez que hacemos cambios.
Para rastrear nuestra nueva aplicación React, creamos un nuevo repositorio de GitHub yendo a github.com/new.
A continuación, podemos simplemente agregar todos nuestros archivos y enviarlos con un mensaje que diga lo que estamos haciendo:
git add .
git commit -m "Deploy to Cloudflare Pages"
A continuación, debemos agregar el control remoto de Git apropiado, que se utiliza para enviar nuestro código comprometido a nuestro nuevo repositorio de GitHub.
GitHub le dirá el comando que necesitas incluir para tu repositorio recién creado. Debería verse algo como esto:
git remote add origin someurlY finalmente, podemos simplemente correr git push -u origin master.
Después de actualizar nuestra página de repositorio de GitHub, deberíamos ver todo el código de nuestro proyecto React, enviado a GitHub.
Este es el primer requisito principal para implementar una aplicación en las páginas de Cloudflare: tener una aplicación React viviendo en GitHub.
Crea una cuenta de Cloudflare
A continuación, vamos a Cloudflare para implementar nuestro proyecto React.
Si aún no tienes una cuenta gratuita de Cloudflare, puedes ir a pages.cloudflare.com y hacer clic en "Sign Up":
Una razón principal por la que tú y la mayoría de los desarrolladores estarían interesados en utilizar Cloudflare Pages es que Cloudflare tiene una CDN mundial. Esto permite una entrega más rápida de nuestra aplicación implementada.
Cloudflare también tiene recursos como la administración de DNS, que es especialmente útil si desea que su aplicación tenga su propio dominio personalizado.
Vincula GitHub a Cloudflare Pages
La primera vez que visites Cloudflare Pages, se te pedirá que creas un proyecto desde tu repositorio de GitHub, por lo que seleccionarás el botón conectar cuenta de GitHub:
Luego se te pedirá que instales y autorice Cloudflare pages.
Este paso nos permite elegir a qué tiene acceso Cloudflare, si queremos darle acceso a todos nuestros repositorios o solo a repositorios seleccionados:
Si deseas implementar varios proyectos en el futuro, te recomiendo seleccionar todos los repositorios.
Como resultado, Cloudflare tendrá la capacidad de acceder a cualquier código e implementación que hayamos realizado para que pueda implementarse en la web.
Implementa nuestro proyecto React en Cloudflare Pages
Una vez que hayamos dado autorización a Cloudflare para hacerlo, veremos una pantalla donde podemos elegir qué proyecto de nuestro repositorio de GitHub queremos implementar:
En nuestro caso, elegiremos nuestro repositorio "cloudflare-react", luego de lo cual presionaremos Comenzar configuración.
Desde allí, podemos elegir qué nombre de proyecto queremos que tenga nuestra aplicación React con Cloudflare. Este nombre de proyecto es importante porque determina el subdominio en el que se implementará.
Como elegimos "cloudflare-react", se implementará en cloudflare-react.pages.dev:
Podemos elegir qué rama implementar, así como la configuración de compilación.
Ten en cuenta que todo lo que realmente tenemos que hacer es elegir qué marco preestablecido estamos usando. Cloudflare tiene una opción preestablecida para nuestro marco: Create React App.
Cuando lo elijamos, incluirá la configuración predeterminada para cualquier proyecto Create React App: para implementar el proyecto ejecutando el comando de compilación "npm run build" y el directorio de salida (la carpeta en la que se construirá nuestro código React al ejecutar este comando de compilación) se llama "build".
Hay otros ajustes preestablecidos útiles para cualquier aplicación React que se haya creado con un marco como Next.js o Gatsby. Puedes usar las páginas de Cloudflare para implementar casi cualquier tipo de aplicación React que se le ocurra.
Finalmente, podemos presionar el botón de despliegue. El proceso de implementación tomará de cuatro a cinco minutos la primera vez. Sé paciente, pero ten en cuenta que cualquier implementación posterior llevará mucho menos tiempo.
Vemos algunos registros útiles sobre la construcción de nuestro proyecto y el progreso de nuestra implementación. Si hubiera un error en ese proceso, lo veríamos en los registros y obtendríamos alguna indicación de lo que necesitábamos arreglar.
Luego, para ver nuestro proyecto implementado, podemos presionar el botón Continuar al proyecto, presionar "Visitar sitio" y podemos ver nuestra aplicación ejecutándose en la URL: your-project-name.pages.dev.
Realiza cambios con implementaciones automáticas
Si bien fue muy fácil implementar instantáneamente nuestra aplicación React en la web después de que la enviamos a GitHub, el siguiente paso es realizar cambios en nuestra aplicación y volver a implementarla.
Como verás, esta funcionalidad de implementación automática (integración continua) ya se ha configurado.
En el caso de mi aplicación, decidí instalar React Router DOM para agregar una página de información. En la página de inicio, también agregué un enlace a la página Acerca de:
Después de que termines de realizar ese cambio que puedes ver en el video de arriba, pasé por el mismo proceso de ejecutar git add ., git commit con un mensaje sobre los cambios que hice, y luego git push.
Después de hacerlo, si volvemos a nuestro panel de Cloudflare Pages, podemos ver que inmediatamente Cloudflare ha recogido esta nueva implementación porque está vinculada a nuestra cuenta de GitHub y puedes ver cualquier implementación o solicitud de extracción que se realizó a nuestro repositorio.
Como resultado, vuelve a implementar instantáneamente nuestra aplicación con los cambios que hicimos. A medida que se lleva a cabo nuestra implementación, podemos presionar "View build" y podemos ver información específica sobre esta implementación, junto con los registros.
Como verás, cualquier cambio realizado después de la implementación inicial toma mucho menos tiempo (solo toma alrededor de un minuto en total para que la implementación finalice correctamente). También verás que tiene su propio hash de implementación único al comienzo de nuestra URL. Esto nos permite hacer referencia única a cada implementación.
Si eliminamos el hash, vemos que los cambios que hicimos también se implementan en el nombre de nuestro proyecto elegido: cloudflare-react.pages.dev.
Conclusión
Espero que este tutorial te muestre lo fácil que es comenzar con las nuevas páginas de Cloudflare. Puedes comenzar a implementar tus aplicaciones React hoy para aprovechar su CDN global y todas las características adicionales que Cloudflare tiene para ofrecer.
Cloudflare Page todavía es un proyecto bastante nuevo, pero ya ofrecen muchas herramientas que vale la pena revisar. Lo recomiendo encarecidamente como tu servicio de implementación para la próxima aplicación React que desees compartir con el mundo.