### React Charts Data App Deployment

React Charts Data App is the App containing filters for the Charts and is deployed on AWS using AWS Amplify.

CI/CD pipeline is configured using AWS Amplify.

#### 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 Charts Data App Architecture](/additional-assets/react-charts-data-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-charts-data-app
```

#### Step 2: Install Dependencies 

```console
npm install
```

### Step 3: Initialize AWS Amplify

```console
amplify init
```

![react-charts-data-app-init](../additional-assets/react-charts-data-app-amplify-init.png)

### Step 4: 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-charts-data-app-add-hosting](../additional-assets/react-charts-data-app-add-hosting.png)

*After selecting the options, Amplify CLI would open Amplify console on the default web browser.*

#### Step 4a: Setting up Hosting Environment

Click on *Hosting environments* and Select *AWS CodeCommit*. Click "Connect Branch"

![react-charts-data-app-hosting-environments](../additional-assets/react-charts-data-app-hosting-environments.png)

#### Step 4b: Setting up Repository

Select *microfrontend-react-charts-data-app* repository from the drop down and select *main* branch.

![react-data-app-amplify-setting-repository](../additional-assets/react-data-app-amplify-setting-repository.png)

#### Step 4c: 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 the environment variable **CHARTS_BACKEND_API** (Copy the value of ***APIGatewayURL***) *[(can get from Step 3 in the backend app deployment)](../backend/README.md)*)

![react-data-app-amplify-build-setting-1](../additional-assets/react-data-app-amplify-build-setting-1.png)
![react-data-app-amplify-build-setting-2](../additional-assets/react-data-app-amplify-build-setting-2.png)

#### Step 4d: Review the CI/CD and Build Setting

Review the setting and click on *Save and Deploy*

![react-data-app-amplify-review-and-save](../additional-assets/react-data-app-amplify-review-and-save.png)

### Step 5: Getting the React Charts Data App endpoint

After completing *Step 4d*, come back to the existing terminal and hit enter. You can see the Frontend App Domain. Save this Domain in a text editor, we would be need with when deploying the React Container App.

![react-data-app-amplify-app-domain](../additional-assets/react-data-app-amplify-app-domain.png)

[Lets' deploy our React Container App.](../react-container-app/README.md)

[Go Back.](../README.md)