¿Cómo implementar aplicaciones frontend en páginas de Cloudflare?

La implementación de aplicaciones frontend es uno de los grandes problemas hace un tiempo. Pero hoy, es pan comido. Incluso uno más nuevo puede implementar aplicaciones con la ayuda de servicios de súper alojamiento.

Muchas plataformas de alojamiento nos permiten implementar aplicaciones frontend en minutos. Nuestro sitio estará listo públicamente en minutos.

¿No es genial?

Sí lo es.

Aprendamos a implementar aplicaciones frontend en las páginas de Cloudflare.

Aplicaciones frontend

Antes de sumergirnos en la parte de implementación de la aplicación, necesitamos crear una aplicación frontend.

¿Cómo hacerlo?

Incluso tú lo sabes. Entonces, no vamos a discutirlo aquí ahora.

Sabemos que existen muchas bibliotecas y marcos para que podamos crear aplicaciones frontend. Pero, la parte central de esas bibliotecas o marcos es JavaScript. Ya sabe todo eso, ya que está buscando una forma de implementar su aplicación frontend. Puede omitir esta parte y pasar a la implementación si solo está buscando la parte de implementación.

Hay React, Vue, Angular, JavaScript y muchos más. Se pueden crear aplicaciones basadas en sus requisitos.

Como podemos ver, hay un montón de opciones para crear aplicaciones frontend. ¿Qué pasa con la implementación? ¿Es el mismo proceso para todas las aplicaciones frontend?

Sí, el proceso de implementación es el mismo para todas las aplicaciones frontend. Pero, el proceso que hace que las aplicaciones frontend estén listas para su implementación puede variar según las bibliotecas y los marcos.

Habrá un comando para compilar para la mayoría de las aplicaciones de front-end creadas con bibliotecas y marcos. Puede que ya lo sepas. Si no sabe qué es, es posible que deba investigarlo en función de su biblioteca o marco de interfaz.

Necesitamos una aplicación para implementar. Configuremos una aplicación simple. Puede omitir esta parte si ya tiene una aplicación frontend para implementar.

Configuración

Antes de la configuración, debemos tener en cuenta una cosa. El punto de entrada debe ser index.html para que nuestra aplicación frontend lo implemente en las páginas de Cloudflare. Puede encontrar el archivo index.html (la ubicación puede variar según la biblioteca y el marco) después del proceso de compilación.

Vamos a crear una aplicación JavaScript simple React and Plain para la demostración. Puede elegir cualquier otra biblioteca o marco con el que esté familiarizado. Primero configuremos la aplicación React .

Ejecute el siguiente comando para crear la aplicación React.

 npx create-react-app demo

Actualice la aplicación con su creatividad o déjela como está. Solo cambiaré algo para asegurarme de que se implemente correctamente al final.

Ahora, creemos una aplicación JavaScript simple.

Tener index.html es obligatorio para nosotros. Entonces, creemos el archivo con el nombre index.html . Ahora, puede agregar más archivos como styles.css, script.js, imágenes, etc., para que se vea elegante. Pero no es obligatorio :).

Nuestra sencilla configuración para la implementación ya está completa. ¿Qué sigue? Es el momento de la implementación. Sumérjase en él.

Despliegue

Las páginas de Cloudflare nos permiten implementar nuestra aplicación frontend desde GitHub. Entonces, hay dos partes en el proceso de implementación.

• Primero, necesitamos tener nuestro código de aplicación en GitHub.
• En segundo lugar, implementar la aplicación en las páginas de Cloudflare.

La mayoría de las veces, no tendrá que preocuparse por la primera parte, ya que mantenemos nuestro código en plataformas de alojamiento desde el primer día del proyecto. Puede omitir la primera parte y dirigirse a la parte de implementación.

Si no ha enviado su código a GitHub o está en otras plataformas de alojamiento de código, es posible que deba cambiarlo a GitHub para implementarlo en las páginas de Cloudflare. Puede seguir los pasos a continuación para enviar su código a GitHub o hacerlo por su cuenta.

1. Enviar código a GitHub

¿Tienes una cuenta de GitHub? Sí, supongo que en la mayoría de los casos. En caso de que no tenga uno, cree uno aquí.

• Vaya a GitHub e inicie sesión en su cuenta.
• Crea un repositorio con el nombre de tu proyecto. Aquí, lo nombramos como la demostración .

• Un repositorio recién creado tendrá el siguiente aspecto. Muestra algunos comandos de git para llenar su repositorio con código.

Empujemos nuestro código al repositorio que acabamos de crear. Puede seguir los pasos a continuación o hacerlo usted mismo si ya está familiarizado con él. Comencemos abriendo nuestro proyecto en terminal o cmd.

• Inicialice el git con el comando git init .
• Agregue todos sus cambios a git local usando el comando git add . .
• Confirme los cambios con el comando git commit -m "message" . Reemplace el mensaje con un mensaje adecuado para la confirmación.
• Ahora, tenemos que conectar nuestro repositorio remoto al proyecto local.
• El comando para conectarlo es git remote add origin 'your_repo_path' . Reemplace your_repo_path con su repositorio remoto. La ruta del repositorio será la siguiente [email protected]:username/repo_name . Mi ruta de repositorio para la demostración es [email protected]:hafeezulkareem/demo .
• El último paso es enviar el código a nuestro repositorio remoto. Podemos hacerlo usando el comando git push -u origin main .

Veamos las instantáneas de código en el repositorio de GitHub.

Terminamos de enviar nuestro código a Github. Nuestra próxima tarea es implementarlo en las páginas de Cloudflare . Sin más preámbulos, comencemos a implementar.

2. Implementación en páginas de Cloudflare

Implementemos el sitio en las páginas de Cloudflare. Antes de continuar, tenemos que crear una cuenta de Cloudflare. Si aún no tiene una cuenta en Cloudflare, cree una aquí. Después de completar la creación de la cuenta de Cloudflare, estará listo para implementar su sitio.

• Ve al sitio de Páginas de Cloudflare.
• Ingrese a su cuenta. Verá el tablero de la siguiente manera.

• Si ha iniciado sesión en el sitio web de Cloudflare , es posible que no vea el panel de control de sus páginas.
• Navega al panel de control de las páginas haciendo clic en el botón Páginas en el lado derecho de tu panel de Cloudflare. Consulte la imagen de abajo.

• Haga clic en el botón Crear un proyecto en el panel de control de las páginas.

• Navegará a la siguiente página.

• Haga clic en la cuenta Connect GitHub para obtener nuestro repositorio de aplicaciones de GitHub .
• Serás redirigido a la página de aplicaciones de GitHub para autorizar las páginas de Cloudflare.

• Podemos dar acceso a todos los repositorios o seleccionados. Es mejor dar acceso a los repositorios que estamos implementando en las páginas de Cloudflare. Puede dar acceso a todos los repositorios si lo desea.
• Seleccione una de las dos opciones.
• Si ha seleccionado Todos los repositorios , no es necesario seleccionar el repositorio específico de los repositorios. Haga clic en el botón Instalar y autorizar .
• Si ha seleccionado Solo seleccionar repositorios , debe seleccionar los repositorios del menú desplegable. Haga clic en el menú desplegable Seleccionar repositorios que aparece después de seleccionar la opción Seleccionar solo repositorios .

• Ingrese el nombre de su repositorio de la siguiente manera.

• Su repositorio se mostrará una vez que ingrese el nombre. Seleccione el repositorio. Puede ver el repositorio seleccionado en la parte superior de la lista de la siguiente manera.

• Haga clic en el botón Instalar y autorizar . Serás redirigido a la página de implementación de Cloudflare Pages.
• Verá todos los repositorios autorizados en la página.

• Seleccione el repositorio que desea implementar.

• Después de seleccionar el repositorio para implementar, haga clic en el botón Comenzar configuración .

• Lo llevará a los siguientes pasos del proceso de implementación, es decir, configurar compilaciones e implementaciones .

• Cuando se desplaza hacia abajo, encontrará una sección llamada Configuración de compilación . Tenemos que seleccionar el proceso de construcción apropiado para nuestra aplicación frontend.
• Tenemos que seleccionar el proceso de construcción en función del marco o biblioteca que estamos usando.
• Haga clic en el ajuste preestablecido de Framework para ver todas las opciones.

• Aquí, estamos implementando aplicaciones React y Plain JavaScript .
• Si está implementando una aplicación React , seleccione Crear aplicación React en el menú desplegable.
• Para una aplicación de JavaScript simple sin ningún paquete, seleccione Ninguno .

• Si está implementando alguna otra aplicación de interfaz, seleccione la opción de compilación preestablecida de Framework adecuada.
• Podemos seleccionar Ninguno e ingresar el comando de compilación personalizado también. Según su aplicación, selecciónela.
• Después de la configuración de compilación, haga clic en el botón Guardar e implementar para finalizar nuestro proceso de implementación.
• Una vez que haga clic en el botón Guardar e implementar , el proceso de implementación comenzará de la siguiente manera.

• El proceso tardará unos minutos en implementar nuestro sitio. Espera y disfruta.
• Una vez finalizado el proceso de implementación, le muestra la URL del sitio con un mensaje de éxito.

• Visite el sitio con la URL proporcionada.

• Podemos actualizar la configuración del sitio desde la página del proyecto.

• Las páginas de Cloudflare implementarán automáticamente las actualizaciones cada vez que enviemos un nuevo código al repositorio.

Eso es. Hemos terminado con la implementación de nuestra aplicación frontend en las páginas de Cloudflare.

Conclusión

¡Viva! hemos implementado nuestra aplicación frontend en las páginas de Cloudflare. Después de implementar la aplicación de interfaz, es posible que deba cambiar la configuración, actualizar cosas, etc. consulte la documentación de Cloudflare aquí. Si desea ver los pasos para implementar una guía de marco específica, puede dirigirse a la sección de guías de marco en la documentación.

A continuación, ¿qué tal implementar el frontend en Netlify?

Nota: Es posible que los sitios de demostración que se muestran en el artículo no estén disponibles públicamente después de un tiempo.

Despliegue feliz