¿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 Páginas de Cloudflare.

Frontend Applications

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. Por lo tanto, 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 busca la parte de implementación.

No hay Reaccionar, 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. Sin embargo, 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.

Preparar

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 la 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 un sencillo Reaccionar y  Natural JavaScript aplicación para la demostración. Puede elegir cualquier otra biblioteca o marco con el que esté familiarizado. Vamos a configurar Reaccionar aplicación primero.

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.

Teniendo 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érgete en él.

Deployment

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 estamos nombrando como el manifestación.

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

Enviemos 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.

• Inicializa el git con git init mando.
• Agregue todos sus cambios a git local usando el comando git add ..
• Confirme los cambios con git commit -m "message" mando. Reemplace la mensaje con un mensaje adecuado para el compromiso.
• Ahora, tenemos que conectar nuestro repositorio remoto al proyecto local.
• El comando para conectarlo es git remote add origin 'your_repo_path'. Reemplazar su_repo_ruta con su repositorio remoto. La ruta del repositorio será la siguiente git@github.com:username/repo_name. Mi ruta de repositorio para el manifestación is git@github.com: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 siguiente tarea es implementarlo en el 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.

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

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

• Haga clic en el Crear un proyecto desde el panel de control de la página.

• Navegará a la siguiente página.

• Haga clic en el Conectar la cuenta de 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 Seleccionar solo repositorios, luego debe seleccionar repositorios del menú desplegable. Haga clic en el Seleccionar repositorios menú desplegable que aparece después de seleccionar el 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 Instalar y autorizar botón. 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 Comience la configuración del botó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 Configuraciones de construcción. Tenemos que seleccionar el proceso de compilació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 Marco preestablecido para ver todas las opciones

• Aquí estamos desplegando Reaccionar y  JavaScript simple aplicaciones.
• Si está implementando un Reaccionar aplicación, luego seleccione Crear aplicación React Desde el desplegable.
• Para una JavaScript simple aplicación sin ningún paquete, luego seleccione Ninguna.

• Si está implementando alguna otra aplicación de interfaz, seleccione la Marco preestablecido opción de construcción.
• Podemos seleccionar Ninguna y entra en la costumbre comando de construcción también. Según su aplicación, selecciónela.
• Después de la configuración de compilación, haga clic en el Guardar e implementar para finalizar nuestro proceso de implementación.
• Una vez que haga clic en el Ahorrar y desplegar , el proceso de implementación comenzará de la siguiente manera.

• El proceso tardará unos minutos en desplegar 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.

Para concluir

¡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 guías marco sección en la documentación.

A continuación, ¿qué tal implementar la interfaz para 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.

Feliz implementación 🙂