# ¿Cómo usé AWS Amplify para desplegar mis microfrontends? **Primero empecemos hablando sobre ¿qué son los microfrontends?** Es la misma idea que existe en el backend con los microservicios pero trasladadas al front; es decir, tendremos BD, backend y front independientes. Por ejemplo si tuviéramos una tienda de e-commerce tendríamos las siguientes aplicaciones: * **Para el registro/login del usuario:** sería una micro-aplicación que puede estar en React * **Para el producto:** sería una micro-aplicación que puede estar en Angular * **Para el carrito de compras:** sería una micro-aplicación que puede estar en Vue * **Para el checkout:** esta micro-aplicación podría estar en React ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680287737651/8f87b121-55ca-4f80-8bb0-3e7972dccb76.png align="center") **¿Que ventajas nos ofrecen los microfrontends?** Es ideal porque te permite reutilizar los microfrontends en otras aplicaciones, manteniendo un solo código. Cada microfrontend tiene **su propio repositorio de código**, **su propio archivo package.json** y su propia configuración de implementación de compilación. De esta manera, cada microfrontend **tiene un proceso de compilación independiente y una implementación/CI independiente.** Lo que nos brinda tiempos de construcción rápidos. En un futuro todo el frontend en las grandes empresas, con equipos alrededor del mundo irán usando este enfoque, para aplicaciones muy grandes que requiere que diferentes equipos hagas diferentes cosas **¿Cómo orquestar los microfrontends?** Para esta solución se ha usado [**Single SPA**](https://single-spa.js.org/) Single SPA es un framework que trabaja como orquestador de microfronts, gestiona tu microfronts con frameworks y librerías como React, Vue, y Angular, lo que nos permite usarlos en la misma página sin tener tener que actualizarla. **El proyecto** Ahora que ya tenemos más claro, que son los microfronts, vamos a comentar sobre la solución de esta oportunidad: es un proyecto que consume algunas API’s para mostrar información de personajes de Rick and Morty y Harry Potter. Para los microfrontends se utilizó React y se crearon 5 microfrontends, los cuales se alojan en repos diferentes, los cuales los puedes descargar desde los siguientes enlaces: * [fr-shell](https://github.com/alfalfita/fr-shell/) * [fr-header](https://github.com/alfalfita/fr-header) * [fr-list](https://github.com/alfalfita/fr-list) * [fr-category](https://github.com/alfalfita/fr-category) * [fr-utils](https://github.com/alfalfita/fr-utils) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680285440450/390d2b93-3bc8-4221-b962-bf372b9def2e.png align="center") Ahora para su despliegue utilice **AWS Amplify** **¿Qué es AWS Amplify?** Es un framework que nos ayuda en todo el ciclo de vida de nuestras aplicaciones en la nube. Tiene diferentes componentes que podemos usar, en este caso usaremos el componente de hosting. El cual nos permitirá desplegar  todos los micro-frontends en S3 y CloudFront. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680285489709/45a4615e-3924-4e8e-b741-661cee6544f5.png align="center") **¿Cómo desplegar nuestro microfrontends usando AWS Amplify?** Para la configuración podemos seguir la [documentación](https://docs.amplify.aws/lib/project-setup/prereq/q/platform/js/) Una vez listo, podemos continuar con nuestro siguiente paso para crear los recursos necesarios para desplegar nuestra aplicación con AWS Amplify Primero nos ubicaremos en la carpeta de nuestro microfront padre (*fr-shell*) y ejecutaremos el siguiente comando: `amplify init` El cual nos pedirá ingresar información sobre el proyecto. Podemos revisar más detalles en la [documentación](https://docs.amplify.aws/cli/start/workflows/#optional-update-projects-using-latest-amplify-cli) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680285536785/467220e5-d837-4b5f-b8dc-24e22baad1d9.png align="center") Tomará un tiempo hasta que el despliegue de los recursos termine. Luego de ello tendremos una aplicación creada dentro del panel de AWS Amplify. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680285544071/a439b061-d585-4a91-9dbb-dce3c5df9be9.png align="center") Así como una pila de CloudFormation con un bucket S3 con archivos de metadatos de Amplify y dos roles de IAM ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680285558412/a8b2661b-e95c-4f1b-aa00-50d1508743b4.png align="center") El comando anterior, nos crea esta estructura de proyecto ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680285571212/01a9a38c-a00a-43e9-a956-1697a414cc79.png align="center") Como mencione anteriormente, AWSAmplify nos permite agregar hosting, para ello dentro de nuestro proyecto (fr-shell) ejecutaremos el siguiente comando: `amplify add hosting` Y seleccionaremos la opción de Amazon CloudFront and S3 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680285589118/d2539219-44db-4c53-9196-0ddd64de6cf5.png align="center") Nos pedirá ingresar el nombre de nuestro bucket S3. Y una vez completado, la estructura de nuestro proyecto se actualizará con una nueva carpeta con el nombre **hosting** dentro de la carpeta amplify/backend. Este hosting que hemos agregado, permitirá acceder al bucket S3 solo a través de la distribución de CloudFront, mediante la creación de una Identidad de acceso de origen (OAI) de CloudFront. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680285600510/6033354a-f74b-4063-a6bb-78c082327cf0.png align="center") Ahora queda publicar nuestros cambios `amplify publish` Este comando además de subir nuestros cambios al bucket S3 y crear la distribución de CloudFront, también genera el build del proyecto. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680285623244/4aa970bd-70a0-47cf-9566-1cbb1ef3145e.png align="center") Una vez completado el proceso, nos arrojará el endpoint de la distribución de CloudFront que usaremos para acceder a nuestro sitio web. ***Pero eso no termina aquí, necesitamos desplegar los otros microfrontends que tenemos (en total son 5). Así que repetiremos los pasos previamente para cada uno de los microfrontends:*** `amplify init` `amplify add hosting` `amplify publish` Tomaremos nota de cada uno de los endpoints de la distribuciones de CloudFront de cada microfrontend. Luego en el archivo *fr-shell/src/index.ejs* pueden configurar sus entornos, en mi caso solo tengo local y prod, por ese motivo es que le pondré un else y el valor sería el endpoint de la distribución de CloudFront que corresponda. ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680285659634/313fecbe-f6b8-4d4d-a7ca-6e3eada42d1a.png align="center") Una vez hecho el cambio haremos nuevamente un `amplify publish` sobre nuestro microfrontend *fr-shell* Como necesitamos acceder a archivos distribuidos en CloudFront directamente en el código, debemos configurar los ajustes de CORS, para ello entraremos en cada distribución de CloudFront y haremos la siguiente configuración: ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680286698898/66c2a2ca-6329-45ef-bc2d-9ebce264d0b9.gif align="center") ¡Listo! Podemos acceder a nuestros microfrontends desplegados, usando el endpoint de fr-shell. Teniendo el [siguiente resultado](https://d9qz0hjql6kvy.cloudfront.net/) ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680287006005/a45da5ee-2a74-401d-a16f-692a0416ed1f.png align="center") To cloud and beyond! 🚀