7. Deployment of Host and Remote App over Vercel | Microfrontend Communication | Amar Kumar Ram

Summary

En este video, Amar Kumar Ram guía a los espectadores a través del proceso de despliegue de una interfaz de usuario Angular en Versal, una plataforma que ofrece un servicio gratuito con ciertas limitaciones, como la ausencia de entornos ilimitados y la necesidad de conectar con un repositorio de GitHub para activar una tubería CI/CD. Se destaca la compatibilidad de Versal con más de 35 frameworks, incluyendo Angular, lo que es ideal para las aplicaciones desarrolladas en dicho lenguaje. La demostración incluye la creación de un proyecto en Versal, la conexión con repositorios de GitHub, la configuración de variables de entorno y la actualización de la URL de la aplicación remota para asegurar la comunicación entre la aplicación principal y la remota. Finalmente, se muestra la aplicación desplegada en producción y se invita a los espectadores a probarla y hacer preguntas en los comentarios.

Takeaways

• 🚀 Amar Kumar Ram está enseñando cómo desplegar una interfaz de usuario Angular en Versal utilizando la versión gratuita.
• 🔑 Versal ofrece un entorno de producción (prod) en su versión gratuita, sin entornos ilimitados que se encuentran en la versión Pro.
• 🤖 Se necesita conectar Versal con un repositorio de GitHub para activar automáticamente la canalización CI/CD.
• 🌐 Versal admite más de 35 frameworks, incluyendo Angular, lo cual es perfecto para las aplicaciones desarrolladas en este tutorial.
• 📝 Durante el proceso de registro, Versal pedirá que elijas un plan (en este caso, la versión gratuita) y conectará con la cuenta de GitHub.
• 🔄 Al hacer clic en el botón 'Import', Versal detectará automáticamente el framework y el nombre del proyecto.
• 🛠️ Se pueden configurar ajustes de compilación y salida, y definir variables de entorno, pero en la versión gratuita, las variables de entorno se aplican solo a producción.
• 🔄 Al hacer clic en 'Deploy', Versal mostrará el progreso de la implementación y, al finalizar, se puede ver una captura de pantalla de la aplicación desplegada.
• 🔗 Es importante actualizar la URL del código de la aplicación host para apuntar a la URL del dominio en lugar de localhost para que la aplicación remota se cargue correctamente.
• 📌 Al realizar cambios en la rama master de GitHub y empujarlos, Versal detectará automáticamente los cambios y desencadenará la canalización CI/CD para desplegarlos.
• 🔍 Se puede inspeccionar la página y la pestaña de red para ver los errores y ajustes necesarios para la comunicación entre la aplicación host y la aplicación remota.
• 🎉 Después de realizar los cambios y desplegar, se confirma que tanto la aplicación host como la aplicación remota están funcionando correctamente y se han desplegado en producción.

Q & A

¿Qué plataforma se utiliza para desplegar la aplicación front-end mencionada en el script?

Versal se utiliza para desplegar la aplicación front-end.

¿Cuál es la limitación principal de la versión gratuita de Versal en términos de entornos?

La versión gratuita de Versal no ofrece entornos ilimitados y solo proporciona el entorno de producción (prod).

¿Cómo se desencadena la canalización CI/CD en Versal?

La canalización CI/CD se desencadena automáticamente cuando Versal detecta un cambio en la rama maestra del repositorio de GitHub conectado.

¿Qué frameworks son compatibles con la versión gratuita de Versal?

La versión gratuita de Versal admite más de 35 frameworks, incluido Angular.

¿Cómo se conecta Versal con el repositorio de GitHub?

Después de registrarse en Versal, se conecta con GitHub haciendo clic en 'Continuar con GitHub' y completando el proceso de autenticación.

¿Qué información se proporciona para importar un proyecto desde GitHub?

Se hace clic en el botón 'Importar' y se seleccionan los repositorios deseados (host app y remote app) para importarlos a Versal.

¿Cómo se pueden ajustar los ajustes de compilación y salida de un proyecto en Versal?

Se pueden ajustar los ajustes de compilación y salida habilitando el botón 'Anular' y realizando los cambios necesarios.

¿Qué sucede si se agregan variables de entorno en la versión gratuita de Versal?

Las variables de entorno agregadas en la versión gratuita de Versal solo se agregarán para el entorno de producción.

¿Cómo se resuelve el problema de la aplicación host al intentar cargar la aplicación remote desde 'Local Host'?

Se actualiza la URL en el código de la aplicación host para apuntar al dominio correcto de la aplicación remote en lugar de 'Local Host'.

¿Qué sucede cuando se realiza un push de cambios a la rama maestra del repositorio de GitHub conectado a Versal?

Versal detecta automáticamente los cambios y desencadena la canalización CI/CD para desplegar los cambios nuevos.

¿Cómo se puede verificar si la comunicación entre la aplicación host y la aplicación remote funciona correctamente?

Se pueden realizar pruebas interactuando con los botones y controles de ambas aplicaciones para verificar que los cambios se reflejen correctamente de una a otra.

¿Dónde se proporcionará el enlace para probar la aplicación desplegada después del éxito del despliegue?

El enlace se proporcionará en la descripción del video para que los espectadores puedan probar la aplicación.

Outlines

00:00

🚀 Despliegue de la aplicación Angular con Versal

Amar Kumar Ram, creador del canal, introduce el tema del video: el despliegue de una interfaz de usuario de Angular utilizando Versal. Se menciona que se utilizará la versión gratuita de Versal, la cual tiene limitaciones como la falta de entornos ilimitados y solo ofrece un entorno de producción (PRD). Además, se destaca la necesidad de conectar Versal con el repositorio de GitHub para activar una tubería de CI/CD que desencadene automáticamente el proceso de despliegue cuando se realicen cambios en la rama maestra. Finalmente, se menciona que Versal es compatible con más de 35 frameworks, incluyendo Angular, lo que es ideal para la aplicación desarrollada en el canal.

05:01

🔗 Conexión de GitHub con Versal y despliegue

Se describe el proceso de registro en Versal y la conexión del repositorio de GitHub. Se detalla cómo importar proyectos desde GitHub y seleccionar aquellos que se desean desplegar. Se destaca que Versal detecta automáticamente el framework de Angular y permite ajustes en la configuración de compilación y salida. También se menciona la posibilidad de definir variables de entorno, aunque en la versión gratuita solo se aplican al entorno de producción. Seguidamente, se muestra el progreso del despliegue y la verificación de que la aplicación se ha desplegado correctamente. Se resalta la necesidad de actualizar la URL en el código para que la aplicación host pueda cargar la aplicación remota desplegada. Finalmente, se muestra cómo Versal detecta automáticamente los cambios en la rama maestra y desencadena la tubería de CI/CD para desplegar las actualizaciones. Se concluye con una demostración de la comunicación entre la aplicación host y la aplicación remota, y se ofrece el enlace para que el espectador pueda probar la aplicación desplegada.

Keywords

💡Versal

Versal es una plataforma utilizada para desplegar aplicaciones web. En el video, se utiliza Versal para desplegar tanto la aplicación host como la aplicación remote, conectándose con el repositorio de GitHub para activar una canalización CI/CD que desencadena automáticamente el proceso de despliegue cuando se realizan cambios en el repositorio.

💡Despliegue

El despliegue es el proceso de implementar una aplicación o servicio en un entorno de producción. En el contexto del video, se refiere a la publicación de la aplicación front-end en Versal, donde la aplicación se pone disponible para su uso final.

💡GitHub

GitHub es una plataforma de desarrollo colaborativo de software que utiliza el sistema de control de versiones Git. En el video, GitHub se utiliza como el repositorio de código donde se almacenan y gestionan los cambios en la aplicación, y se conecta con Versal para el despliegue continuo.

💡CICD

CICD (Continuous Integration/Continuous Deployment) se refiere a la integración continua e implementación continua, prácticas que automatizan el proceso de despliegue de aplicaciones. En el video, la conexión entre GitHub y Versal permite que cualquier cambio en la rama master desencadene automáticamente la canalización CICD.

💡Framework

Un framework es un conjunto de herramientas o una estructura que proporciona soporte y funcionalidades predefinidas para el desarrollo de aplicaciones. En el video, se menciona que Versal admite más de 35 frameworks, incluyendo Angular, que es el framework utilizado para desarrollar las aplicaciones host y remote.

💡Angular

Angular es un framework de aplicaciones web de código abierto desarrollado y mantenido por Google. En el video, se utiliza Angular para desarrollar tanto la aplicación host como la aplicación remote, lo que permite aprovechar las características y las herramientas que ofrece el framework para la construcción de interfaces de usuario.

💡Rama Master

La rama master, también conocida como main, es la rama principal de un repositorio de código en Git. En el video, se selecciona la rama master para ser desplegada en Versal, lo que significa que los cambios en esta rama son los que se implementan en la versión de producción de la aplicación.

💡Variables de entorno

Las variables de entorno son pares de valores que representan la configuración de una aplicación y que se utilizan para adaptar su comportamiento a diferentes entornos sin necesidad de cambiar el código. En el video, se menciona que en la versión gratuita de Versal, las variables de entorno se aplican solo para el entorno de producción.

💡Versión Gratuita

La versión gratuita de Versal ofrece ciertos límites en comparación con la versión de pago, como no contar con entornos ilimitados. En el video, se opta por la versión gratuita, conociendo sus limitaciones, para desplegar la aplicación en el entorno de producción.

💡Aplicación Host

La aplicación host es la aplicación principal que se despliegue y que puede contener o interactuar con otras aplicaciones, como la aplicación remote. En el video, la aplicación host se despliega en Versal y se actualiza para que pueda comunicarse con la aplicación remote desplegada.

💡Aplicación Remote

La aplicación remote es una aplicación que se despliega y que puede ser interactuada o gestionada por la aplicación host. En el video, se despliega la aplicación remote en Versal y se prueba su comunicación con la aplicación host a través de eventos y actualizaciones de datos.

Highlights

Amar Kumar Ram explains how to deploy a micro front end using Versal.

Versal's free version is used, which has limitations such as no unlimited environments.

Only the prod environment is available in the free package, meaning any deployment goes directly to production.

Versal needs to be connected with a GitHub repo to enable an automatic CI/CD pipeline.

Changes in the master branch of the connected GitHub repo will automatically trigger the CI/CD pipeline.

The free version of Versal supports over 35 frameworks, including Angular.

A step-by-step sign-up process is provided for connecting a GitHub repo with Versal.

Demonstration of deploying both a host application and a remote application on Versal.

The process includes selecting repos, importing projects, and configuring build and output settings.

Environment variables can be defined directly in Versal, but only for the production environment in the free version.

A successful deployment leads to a page showing the application screenshot and providing a link to the live site.

Testing the deployed remote application by increasing the counter value confirms its functionality.

Deployment of the host application involves creating a new project and importing the app into Versal.

An issue with loading the remote application from localhost is identified and resolved by updating the URL in the code.

After updating the URL and committing the changes, Versal automatically detects and deploys the new changes due to CI/CD.

The host application is tested to ensure that the communication between the host and remote applications is functioning correctly.

The video concludes with a demonstration that both applications have been successfully deployed on production.

Amar Kumar Ram provides the deployment URLs in the video description for viewers to test the applications.

The video encourages viewers to ask questions in the comments section if they have any queries.

Transcripts

[Music]

hello everyone this is Amar Kumar Ram

welcome back to my Channel today we are

going to understand how to deploy micr

front end that we have created in the

series before going into the repo let me

tell you that we are going to use versal

to deploy our code we are going to use

the free version of it so let's go to

the pricing

section here we can see the limitations

that we are not going to get un limited

environments that is in the pro package

so what environment we are going to get

in the free package we are going to get

only the prad environment so whatever we

will Deploy on versal it will directly

be deployed on prod second thing we need

to understand that we need to connect

versal with our GitHub repo so that

automatic cicd pipeline can be triggered

what I mean by that suppose we select

our Master Branch to be deployed then

versal will detect any change that will

be made in the master branch of our

connected repo and will trigger the cicd

pipeline automatically I'll come to that

when we'll do the deployment last thing

we need to understand is the free

version supports 35 Plus Frameworks

which includes angular also as we

developed our host application and

remote application in angular only we

are good to go with versel now let's go

through the sign up process on how to

connect our GitHub repo with versel but

before that let's have a look on our

GitHub repos so here I have an example

of multi repo where remote app and host

app are in separated repos now we will

deploy this host app and remote app over

versal and these are the same code that

we have done in this series till now now

let's connect this remote app and host

app repo with versal for that we'll

click on the signup button then the

portal will ask us to choose the plan

type and we will go with the free

version that is Hobby one also it will

ask to put our name so let's put our

name in my case it is Amar Kumar Ram

and we'll click on

continue on the next step it will ask to

connect our GitHub gitlab or bit bucket

whatever you use I'm using GitHub so

I'll click on continue with GitHub after

connecting with GitHub it will

authenticate you if you have enabled the

two steps verification in your GitHub

account after successful sign up it will

automatically redirect you to the

dashboard page where you can click on

the import button to import your project

as the description is ADD a repo from

your git provider so let's click on

import button on the next step it will

show all repos that I have over GitHub

among all I need to select only host app

and remote app because we are going to

work with those repo only I'll provide

the link of remote app and host app repo

Link in the description of this video so

that you can clone those project and

practice the deployment process now

let's click on the import button of host

app and remote app we'll start with

remote app

first after clicking on import button we

can see that versal has automatically

detected the framework that is angular

and our project name that is remote

iPhone app we also have an option to

change the root directory if needed by

clicking on the edit button in our case

it is not required so we'll proceed

further in the next step we have build

and output settings which we can change

by enabling the override button but in

our case we'll go with the default

settings that has been picked by versal

also if you have some environment

variables you can just directly defined

in this environment variable accordion

by putting the key and the value and

clicking on the add button please note

that since it's a free version so

whatever environment variables you will

add it will be added for the production

only but if you want to add environment

variables for different environments

such as Dave QA uat perf Etc then you

need to go and upgrade your plan on

versus I do not have any environment

variable so I'll just minimize this and

click on deploy so it will show us that

the deployment progress status currently

project is in the build phase after

successful deployment we will land on

this page where a screenshot of our

application will be shown here and we

can also check this website by clicking

on the image itself so let's click on

this and we can see that our remote

application has been successfully

deployed I'll provide this link in the

description of the video so that you can

also test it as we know that in our

remote application if I click on the

counter button then the counter value

will increase so let's test it if I

click on the counter it is increasing

the counter value so everything is

working fine here now let's deploy the

host application for that we'll go to

the versal we'll click on continue to

dashboard or we can click on this arrow

button and hover on Amar Kumar Ram's

project then it will show me the

projects that have been deployed

currently I have only one project that

is remote app which is deployed our

production now we will create another

project so let's click on create project

now we'll import the host application

here and keeping the default settings

we'll click on deploy button again now

deployment process has been started we

can see the logs by opening the building

phase we can see the logs

here so our host application is

successfully deployed however the

screenshot is not available maybe

because it is loading the remote

application ad hoc so let's click on the

screenshot of it

as we can see our host application is

rendering successfully where we have

this button control MF counter value but

we are not able to load the remote

application that has been deployed here

on remote hyphen app hyph ior doval

doapp it is because we are trying to

face the remote application from The

Local Host so we need to update the URL

in the code and commit it again let me

show you how it is failing for that I'll

inspect this page P we'll go to the

network Tab and then if I reload the

page we can see that there is a remote

application.js

file which is hitting on Local Host 4300

but it should hit this domain that is

remote hyph app hyph i.v. app and after

that we can have forward slash remote

entry. JS if I press enter we can see

that remote entry has been successfully

created at the remote side so we need to

point to this URL inad of Local Host so

let's go to the host app code and do the

necessary change and see if that is

working fine or not so this is our host

application here we'll go to the source

folder then app folder then app hyph

routing. module. TS file here we are

pointing to Local Host 4300 and we can

also see that we are on the master

branch of our host app repo that is in

the GitHub now let's update this remote

entry URL for that we'll copy this UR

URL and paste it here in the remote

entry value now we'll save the file now

we'll open the G bash and in the changes

section we can see that there is a

change in the app routing module file

which will add and put in the staged

changes after that we'll commit

it remote app URL changed now before

pushing the new changes into the master

branch of this host app repo I just want

you to recall one important feature of

versal that is as soon as we'll push

changes in the master Branch it will be

detected by versal and automatic cicd

pipeline will be triggered to deploy the

new changes to observe that let's go to

the versal portal here we'll click on

the continue to dashboard button in the

production deployment section I can see

that the last deployment is done on host

app repo and to trigger the automatic

cicd pipeline it is saying that to

update your production deployment push

to the master Branch so let's try it

I'll push the code

now

code has been pushed and we can see on

versal that it has detected the changes

and the comment that I have made is

remote app URL change is now picked by

versal and it is building the changes

now so I do not need to do anything

versal will take care everything if your

GitHub repo is connected with the versal

so new changes has been deployed

successfully let's check over the portal

now I'll refresh the

page and we can see that we are able to

load the remote application and remote

entry. JS file is coming from remote

hyphen appy

i.v. apppp SL remote entry. JS now we

will test the host application and

remote application whether it is working

as expected or not as we know from our

development Journey if I click on the

counter button it will increase the

counter value so let's click on the

counter button and it is increasing the

value of counter so I have increased

till three now if I click on control MF

counter value it should increase the

counter value to four and it is working

fine see if I clicking again and again

it is increasing the counter value so

that is the event trigger from the host

application to the remote application

now we'll do the vice versa so if I type

anything and click outside the same text

will appear in place of this text that

is this is host application so I'll

write here we have

successfully deployed the code and I'll

click outside so the text in the host

application has been changed now and by

this we can confirm that the

communication between the host

application and the remote application

is working perfectly fine and we have

successfully deployed the host

application and the remote application

on production now I will paste this URL

in the description of the video so that

you can also test it and if you have any

query then please do ask in the comment

section so let's meet in the next video

till that be happy take care signing

[Music]

off