### React Container App Deployment React Container App is the App responsible for Micro-Frontend Apps integration. Both React and Angular apps are being imported as a remote and leveraged in the Container App. React Container App also uses AWS Cognito for user Authentication. AWS Amplify is leveraged hosting the app, configuring the CI/CD, and setting up AWS Cognito for user Authentication. #### Prerequisite - Make sure we have Amplify CLI up and running, and for installation use the [Amplify Official Website](https://docs.amplify.aws/cli/start/install/) ## Deployment on AWS ![React Container App Architecture](/additional-assets/react-container-app-architecture.svg) ### Deployment of the above architecture on AWS #### Step 1: Clone Repository ```console git clone https://github.com/aws-samples/micro-frontend-using-polyglot-javascript-frameworks.git cd micro-frontend-using-polyglot-javascript-frameworks/react-container-app ``` #### Step 2: Install Dependencies ```console npm install ``` ### Step 3: Initialize AWS Amplify ```console amplify init ``` ![react-container-app-init](../additional-assets/react-container-app-amplify-init.png) ### Step 4: Add Authentication ```console amplify add auth ``` Select the options as present in the screenshot ![react-container-app-auth](../additional-assets/react-container-app-auth.png) ### Step 5: Push local amplify changes to AWS Push the local changes to AWS, and Amplify would create resources needed for the Authentication (AWS Cognito, IAM Role, Lambda Function) ```console amplify push ``` ![react-container-app-push-auth](../additional-assets/react-container-app-push-auth.png) ### Step 6: Add CI/CD and Deploy App ```console amplify add hosting ``` Amplify hosting will ask a few questions, select the answers as present in the screenshot: ![react-container-app-add-hosting](../additional-assets/react-container-app-add-hosting.png) *After selecting the options, Amplify CLI would open Amplify console on the default web browser.* #### Step 6a: Setting up Hosting Environment Click on *Hosting environments* and Select *AWS CodeCommit*. Click "Connect Branch" ![react-container-app-hosting-environments](../additional-assets/react-container-app-hosting-environments.png) #### Step 6b: Setting up Repository Select *microfrontend-react-container-app* repository from the drop down and select *main* branch. ![react-container-amplify-setting-repository](../additional-assets/react-container-amplify-setting-repository.png) #### Step 6c: Configure the Build Setting - Select *Environment* as **Dev** from the drop down - Select an existing service role or create a new one so Amplify Hosting may access your resources. - Click on *Advanced settings* drop down and set a environment variable for the micro-frontend app **REACT_CHARTS_DATA_APP** (Copy the value of ***React Charts Data App Domain***) *[(Get from Step 5 in the React Charts Data APP deployment)](../react-charts-data-app/README.md)*) - set another environment variable for the Micro-frontend app **ANGULAR_CHARTS_APP** (Copy the value of ***Angular Charts App Domain***) *[(Get from Step 5 in the Angular Charts APP deployment)](../angular-charts-app/README.md)*) ![react-container-amplify-build-setting-1](../additional-assets/react-container-amplify-build-setting-1.png) ![react-container-amplify-build-setting-2](../additional-assets/react-container-amplify-build-setting-2.png) #### Step 6d: Review the CI/CD and Build Setting Review the setting and click on *Save and Deploy* ![react-container-app-amplify-review-and-save](../additional-assets/react-container-app-amplify-review-and-save.png) ### Step 7: Getting the React Container App endpoint After completing *Step 6d*, come back to the existing terminal and hit enter. You can see the Frontend App Domain. ![react-container-app-amplify-app-domain](../additional-assets/react-container-app-amplify-app-domain.png) Frontend Domain is the Container application, open it on the Browser and try out the Micro-Frontend App. ![chart-app](../additional-assets/chart-app.png) [Lets' go back.](../README.md)