- 151 | 152 | ### a) Micro-Frontend Application 153 | 154 | [AWS Amplify](https://aws.amazon.com/amplify/) is leveraged to automate the process of deployment on AWS. Using AWS Amplify, we were able to deploy and add authentication to the application just by using a few user-friendly commands. 155 | 156 | Each Micro-Frontend Application is deployed using AWS Amplify which uses [Amazon S3 bucket](https://aws.amazon.com/s3/) and [Amazon CloudFront Distribution](https://aws.amazon.com/cloudfront/) internally; and for authentication [Amazon Cognito](https://aws.amazon.com/cognito/) is being leveraged. 157 | 158 | The sample consists of three applications: 159 | 160 | Micro-Frontend Apps | Purpose | 161 | |----------|-------------------------| 162 | | Angular Charts App | Contains code for generation charts | 163 | | React Charts Data App | Contains charts fitters leveraged by Angular Charts App to create charts | 164 | | React Container App | Container App containing React Charts Data App and Angular Charts App | 165 | 166 | ### b) Backend Application 167 | 168 | For the backend, we have leveraged NodeJS code deployed on [AWS Lambda functions](https://aws.amazon.com/lambda/) to persist and read data from the [AWS DynamoDB](https://aws.amazon.com/dynamodb/) leveraged as a NoSQL Database. 169 | 170 | Backend infrastructure code is automated using AWS Cloud Development Kit (AWS CDK). 171 | 172 |
- 177 | 178 | [AWS Amplify](https://aws.amazon.com/amplify/) is leveraged to host our "Client Side Rendering" Frontend Application. AWS Amplify uses internally uses AWS Serverless Services like [CloudFront](https://aws.amazon.com/cloudfront/) and [S3 Bucket](https://aws.amazon.com/s3/) to deploy the frontend application. 179 | 180 |  181 | 182 |
- 187 | 188 | Name | Version | 189 | |-----------------------|----------------------------------| 190 | | [NodeJS](https://nodejs.org/en/download) | 16.17.0 | 191 | | [Typescript](https://www.typescriptlang.org/download) | 4.8.4 | 192 | | [ReactJS](https://react-cn.github.io/react/downloads.html) | 18.2.0 | 193 | | [Angular](https://angular.io/guide/setup-local) | 15.2.0 | 194 | | [CDK CLI](https://www.npmjs.com/package/cdk) | 2.92.0 | 195 | | [AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html) | 2.7.35 | 196 | | [AMPLIFY CLI](https://docs.amplify.aws/cli/start/install/) | 10.7.1 | 197 | 198 | ### Prerequisite verification 199 | 200 | Check if you have all the required prerequisites by executing the following commands, and they would return the versions. 201 | 202 | 1: NodeJS 203 | 204 | ```console 205 | node -v 206 | ``` 207 | 208 | 2: Node 209 | ```console 210 | cdk --version 211 | ``` 212 | 213 | 3: Amplify CLI 214 | ```console 215 | amplify -v 216 | ``` 217 | 218 | 4: AWS CLI 219 | ```console 220 | aws --version 221 | ``` 222 | 223 |
-
228 |
229 | In order to deploy the Micro-frontend application, you need to deploy the each applications one by one in the order mentioned below:
230 |
231 | `Note: For all the apps open new terminal and clone the repository as mentioned in the deployment of each of the below apps`
232 |
- 233 | 234 | ### a) [Backend App](/backend/README.md) #### 235 | ### b) [Angular Charts App](/angular-charts-app/README.md) #### 236 | ### c) [React Charts Data App](/react-charts-data-app/README.md) #### 237 | ### d) [React Container App](/react-container-app/README.md) #### 238 | 239 |
- 250 | 251 | Cleanup requires few commands to be executed for each of the applications deployed. 252 | 253 | a) Go to `backend` directory and use `cdk destroy --all` command. 254 | 255 | b) Go to `angular-charts-app` directory and use `amplify delete` command. 256 | 257 | c) Go to `react-charts-data-app` directory and use `amplify delete` command. 258 | 259 | d) Go to `react-container-app` directory and use `amplify delete` command. 260 | 261 |
- 266 | 267 | - [Micro-frontends.org](https://micro-frontends.org/) 268 | - [Buildingmicrofrontends.com](https://www.buildingmicrofrontends.com/) 269 |
- 278 | This sample code is made available under the MIT-0 license. See the LICENSE file. 279 |
2 |
--------------------------------------------------------------------------------
/angular-charts-app/src/app/components/app.component.scss:
--------------------------------------------------------------------------------
1 | .angularChartsApp {
2 | text-align: center;
3 | padding-bottom: 6%;
4 | background-color: rgb(248 238 238);
5 | }
6 |
7 | .angularCharts {
8 | margin-top: -4%;
9 | padding-left: 0%;
10 | }
11 |
12 | .angularChartsAppText {
13 | padding-top: 4%;
14 | color: crimson;
15 | text-align: center;
16 | }
--------------------------------------------------------------------------------
/angular-charts-app/src/app/components/app.component.ts:
--------------------------------------------------------------------------------
1 | import { HttpClient } from '@angular/common/http';
2 | import { Component, OnInit } from '@angular/core';
3 | import { EChartsOption } from 'echarts';
4 |
5 | // Importing EChart configuration
6 | import { initOptions } from './echarts-config/initOptions';
7 | import { eChartOption } from './echarts-config/options';
8 |
9 | // Importing interfaces
10 | import { EChartsInitOptions } from './interface/echartInitOptions';
11 | import { InventoryStats } from './interface/inventoryStats';
12 |
13 | declare const CHARTS_BACKEND_API_URL: string;
14 | const backendAPI = CHARTS_BACKEND_API_URL || 'http://localhost:3000';
15 |
16 | @Component({
17 | selector: 'app-root',
18 | templateUrl: './app.component.html',
19 | styleUrls: ['./app.component.scss']
20 | })
21 |
22 | export class AppComponent implements OnInit {
23 | title = 'angular-charts-app';
24 |
25 | initOpts: EChartsInitOptions = initOptions;
26 | options: EChartsOption = eChartOption;
27 | mergeOptions = {};
28 |
29 | constructor(private http : HttpClient) {}
30 |
31 | updateChartsData(userId: string) {
32 | this.http.get(`${backendAPI}/charts/${userId}`)
33 | .subscribe(Response => {
34 | const API_Response: any = Response;
35 |
36 | if (Response && API_Response) {
37 |
38 | // Formating data according to Charts
39 | const formatedData: Object = this.formatData(API_Response);
40 |
41 | // Updating Charts
42 | this.mergeOptions = formatedData;
43 | }
44 | });
45 | }
46 |
47 | ngOnInit() {
48 | const userDataKey = localStorage.getItem('userDataKey') || '0';
49 | const user = JSON.parse(localStorage.getItem(userDataKey) || '{}');
50 | this.updateChartsData(user.Username);
51 |
52 | // Added a event listener to update the charts based on the data received on the 'CHARTS_UPDATE_EVENT' event
53 | window.addEventListener('CHARTS_UPDATE_EVENT', (customEvent: any) => {
54 | this.updateChartsData(user.Username);
55 | }, {
56 | passive: true
57 | });
58 | }
59 |
60 | formatData(inventoryStats: InventoryStats): Object {
61 |
62 | // Clubbing shopping categories
63 | const electronicsStats = Number(inventoryStats.mobilePhones) + Number(inventoryStats.cameras) + Number(inventoryStats.laptops);
64 | const apparel = Number(inventoryStats.jeans) + Number(inventoryStats.shirts) + Number(inventoryStats.shoes);
65 | const furniture = Number(inventoryStats.chairs) + Number(inventoryStats.tables) + Number(inventoryStats.wardrobes);
66 |
67 | const formatedData = {
68 | series: [{
69 | data: [
70 | { value: electronicsStats, name: 'Electronics' },
71 | { value: apparel, name: 'Apparel' },
72 | { value: furniture, name: 'Furniture' }
73 | ]
74 | }, {
75 | data: [
76 | { value: inventoryStats.mobilePhones, name: 'Mobile Phones' },
77 | { value: inventoryStats.cameras, name: 'Cameras' },
78 | { value: inventoryStats.laptops, name: 'Laptops' },
79 | { value: inventoryStats.jeans, name: 'Jeans' },
80 | { value: inventoryStats.shirts, name: 'Shirts' },
81 | { value: inventoryStats.shoes, name: 'Shoes' },
82 | { value: inventoryStats.chairs, name: 'Chairs' },
83 | { value: inventoryStats.tables, name: 'Tables' },
84 | { value: inventoryStats.wardrobes, name: 'Wardrobes' }
85 | ]
86 | }]
87 | };
88 | return formatedData;
89 | }
90 | }
91 |
--------------------------------------------------------------------------------
/angular-charts-app/src/app/components/echarts-config/initOptions.ts:
--------------------------------------------------------------------------------
1 | import { EChartsInitOptions } from '../interface/echartInitOptions';
2 |
3 | export const initOptions: EChartsInitOptions = {
4 | renderer: 'svg',
5 | width: 850,
6 | height: 700
7 | };
--------------------------------------------------------------------------------
/angular-charts-app/src/app/components/echarts-config/options.ts:
--------------------------------------------------------------------------------
1 | import type { EChartsOption } from 'echarts';
2 |
3 | export const eChartOption: EChartsOption = {
4 | tooltip: {
5 | trigger: 'item',
6 | formatter: '{a}
3 |
5 | Product Categories Data
4 |
6 |
8 | {b}: {c} ({d}%)' 7 | }, 8 | legend: { 9 | bottom: 5, 10 | align: 'auto', 11 | data: [ 12 | 'Electronics', 13 | 'Apparel', 14 | 'Furniture', 15 | 'Mobile Phones', 16 | 'Cameras', 17 | 'Laptops', 18 | 'Jeans', 19 | 'Shirts', 20 | 'Shoes', 21 | 'Chairs', 22 | 'Tables', 23 | 'Wardrobes' 24 | ] 25 | }, 26 | series: [ 27 | { 28 | name: 'Prodcut Categories', 29 | type: 'pie', 30 | selectedMode: 'single', 31 | radius: [0, '35%'], 32 | label: { 33 | position: 'inner', 34 | fontSize: 12 35 | }, 36 | labelLine: { 37 | show: false 38 | }, 39 | data: [ 40 | { value: 0, name: 'Electronics' }, 41 | { value: 0, name: 'Apparel' }, 42 | { value: 0, name: 'Furniture' } 43 | ] 44 | }, 45 | { 46 | name: 'Product', 47 | type: 'pie', 48 | radius: ['45%', '60%'], 49 | labelLine: { 50 | length: 30 51 | }, 52 | label: { 53 | formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ', 54 | backgroundColor: '#F6F8FC', 55 | borderColor: '#8C8D8E', 56 | borderWidth: 1, 57 | borderRadius: 4, 58 | rich: { 59 | a: { 60 | color: '#6E7079', 61 | lineHeight: 22, 62 | align: 'center' 63 | }, 64 | hr: { 65 | borderColor: '#8C8D8E', 66 | width: '100%', 67 | borderWidth: 1, 68 | height: 0 69 | }, 70 | b: { 71 | color: '#4C5058', 72 | fontSize: 12, 73 | fontWeight: 'bold', 74 | lineHeight: 33 75 | }, 76 | per: { 77 | color: '#fff', 78 | backgroundColor: '#4C5058', 79 | padding: [3, 4], 80 | borderRadius: 4 81 | } 82 | } 83 | }, 84 | data: [ 85 | { value: 0, name: 'Mobile Phones' }, 86 | { value: 0, name: 'Cameras' }, 87 | { value: 0, name: 'Laptops' }, 88 | { value: 0, name: 'Jeans' }, 89 | { value: 0, name: 'Shirts' }, 90 | { value: 0, name: 'Shoes' }, 91 | { value: 0, name: 'Chairs' }, 92 | { value: 0, name: 'Tables' }, 93 | { value: 0, name: 'Wardrobes' } 94 | ] 95 | } 96 | ] 97 | }; -------------------------------------------------------------------------------- /angular-charts-app/src/app/components/interface/echartInitOptions.ts: -------------------------------------------------------------------------------- 1 | export interface EChartsInitOptions { 2 | renderer: string; 3 | width: number; 4 | height: number; 5 | } -------------------------------------------------------------------------------- /angular-charts-app/src/app/components/interface/inventoryStats.ts: -------------------------------------------------------------------------------- 1 | export interface InventoryStats { 2 | mobilePhones: number; 3 | cameras: number; 4 | laptops: number; 5 | chairs: number; 6 | tables: number; 7 | wardrobes: number; 8 | jeans: number; 9 | shirts: number; 10 | shoes: number; 11 | } -------------------------------------------------------------------------------- /angular-charts-app/src/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | 6 | enableProdMode(); 7 | 8 | platformBrowserDynamic().bootstrapModule(AppModule) 9 | .catch(err => console.error(err)); 10 | -------------------------------------------------------------------------------- /angular-charts-app/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
107 |
159 | );
160 | }
161 | }
--------------------------------------------------------------------------------
/react-charts-data-app/src/components/style.css:
--------------------------------------------------------------------------------
1 | .chartsDataAppForm {
2 | padding-right: 10%;
3 | padding-left: 10%;
4 | padding-top: 10%;
5 | }
6 |
7 | .chartsDataApp {
8 | padding-top: 5%;
9 | padding-bottom: 16%;
10 | background-color: rgb(237 242 247);;
11 | }
12 |
13 | .chartsDataAppText {
14 | padding-top: 3%;
15 | color: darkblue;
16 | }
17 |
18 | .submitButton {
19 | padding-top: 4%;
20 | }
--------------------------------------------------------------------------------
/react-charts-data-app/src/index.ts:
--------------------------------------------------------------------------------
1 | import('./bootstrap');
2 | export {};
--------------------------------------------------------------------------------
/react-charts-data-app/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/react-charts-data-app/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es6",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "noImplicitAny": false,
13 | "allowSyntheticDefaultImports": true,
14 | "strict": true,
15 | "forceConsistentCasingInFileNames": true,
16 | "noFallthroughCasesInSwitch": true,
17 | "module": "esnext",
18 | "moduleResolution": "node",
19 | "resolveJsonModule": true,
20 | "isolatedModules": true,
21 | "noEmit": false,
22 | "jsx": "react-jsx"
23 | },
24 | "include": [ "src" ]
25 | }
--------------------------------------------------------------------------------
/react-charts-data-app/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebpackPlugin = require('html-webpack-plugin');
2 | const {container, DefinePlugin} = require('webpack');
3 | const path = require('path');
4 | const zlib = require('zlib');
5 | const CompressionPlugin = require("compression-webpack-plugin");
6 | const deps = require("./package.json").dependencies;
7 |
8 | module.exports = {
9 | entry: './src/index',
10 | mode: 'development',
11 | devServer: {
12 | static: {
13 | directory: path.join(__dirname, 'build'),
14 | },
15 | port: 8081
16 | },
17 | output: {
18 | publicPath: 'auto',
19 | path: path.resolve(__dirname, 'build'),
20 | },
21 | optimization: {
22 | minimize: true,
23 | },
24 | module: {
25 | rules: [
26 | {
27 | test: /\.(jsx|js|tsx)$/,
28 | loader: 'ts-loader',
29 | exclude: /node_modules/,
30 | },
31 | {
32 | test: /\.(css|scss)$/,
33 | use: ["style-loader", "css-loader"],
34 | },
35 | {
36 | test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
37 | exclude: /node_modules/,
38 | use: ['file-loader']
39 | }
40 | ]
41 | },
42 | resolve: {
43 | extensions: ['.js', '.jsx', '.ts', '.tsx'],
44 | },
45 | plugins: [
46 | new container.ModuleFederationPlugin({
47 | name: 'reactChartsDataApp',
48 | filename: 'remoteEntry.js',
49 | exposes: {
50 | './ChartData': './src/components/ChartData',
51 | },
52 | shared: {
53 | 'react': {
54 | singleton: true,
55 | eager: true,
56 | requiredVersion: deps["react"]
57 | },
58 | 'react-dom': {
59 | singleton: true,
60 | eager: true,
61 | requiredVersion: deps["react-dom"]
62 | }
63 | },
64 | }),
65 | new HtmlWebpackPlugin({
66 | template: './public/index.html',
67 | }),
68 | new CompressionPlugin({
69 | filename: "[path][base].br",
70 | algorithm: "brotliCompress",
71 | test: /\.(js|css|html|svg)$/,
72 | compressionOptions: {
73 | params: {
74 | [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
75 | },
76 | },
77 | threshold: 10240,
78 | minRatio: 0.8,
79 | deleteOriginalAssets: false,
80 | }),
81 | new DefinePlugin({
82 | 'process.env.CHARTS_BACKEND_API_URL': JSON.stringify(`${process.env.CHARTS_BACKEND_API}`),
83 | })
84 | ],
85 | };
--------------------------------------------------------------------------------
/react-container-app/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | amplify
4 |
--------------------------------------------------------------------------------
/react-container-app/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "plugins": [
4 | "@typescript-eslint",
5 | "import"
6 | ],
7 | "parser": "@typescript-eslint/parser",
8 | "parserOptions": {
9 | "ecmaVersion": 2018,
10 | "sourceType": "module",
11 | "project": "./tsconfig.json"
12 | },
13 | "extends": [
14 | "plugin:import/typescript"
15 | ],
16 | "settings": {
17 | "import/parsers": {
18 | "@typescript-eslint/parser": [
19 | ".ts",
20 | ".tsx"
21 | ]
22 | },
23 | "import/resolver": {
24 | "node": {},
25 | "typescript": {
26 | "project": "./tsconfig.json",
27 | "alwaysTryTypes": true
28 | }
29 | }
30 | },
31 | "ignorePatterns": [
32 | "*.js",
33 | "*.d.ts",
34 | "node_modules/"
35 | ],
36 | "rules": {
37 | "indent": [
38 | "off"
39 | ],
40 | "@typescript-eslint/indent": [
41 | "error",
42 | 2
43 | ],
44 | "quotes": [
45 | "error",
46 | "single",
47 | {
48 | "avoidEscape": true
49 | }
50 | ],
51 | "comma-dangle": [
52 | "error",
53 | "never"
54 | ],
55 | "comma-spacing": [
56 | "error",
57 | {
58 | "before": false,
59 | "after": true
60 | }
61 | ],
62 | "no-multi-spaces": [
63 | "error",
64 | {
65 | "ignoreEOLComments": false
66 | }
67 | ],
68 | "prefer-const": ["error", {
69 | "destructuring": "any",
70 | "ignoreReadBeforeAssign": false
71 | }],
72 | "array-bracket-spacing": [
73 | "error",
74 | "never"
75 | ],
76 | "array-bracket-newline": [
77 | "error",
78 | "consistent"
79 | ],
80 | "object-curly-spacing": [
81 | "error",
82 | "always"
83 | ],
84 | "object-curly-newline": [
85 | "error",
86 | {
87 | "multiline": true,
88 | "consistent": true
89 | }
90 | ],
91 | "object-property-newline": [
92 | "error",
93 | {
94 | "allowAllPropertiesOnSameLine": true
95 | }
96 | ],
97 | "keyword-spacing": [
98 | "error"
99 | ],
100 | "brace-style": [
101 | "error",
102 | "1tbs",
103 | {
104 | "allowSingleLine": true
105 | }
106 | ],
107 | "space-before-blocks": [
108 | "error"
109 | ],
110 | "curly": [
111 | "error",
112 | "multi-line",
113 | "consistent"
114 | ],
115 | "@typescript-eslint/member-delimiter-style": [
116 | "error"
117 | ],
118 | "semi": [
119 | "error",
120 | "always"
121 | ],
122 | "max-len": [
123 | "error",
124 | {
125 | "code": 150,
126 | "ignoreUrls": true,
127 | "ignoreStrings": true,
128 | "ignoreTemplateLiterals": true,
129 | "ignoreComments": true,
130 | "ignoreRegExpLiterals": true
131 | }
132 | ],
133 | "quote-props": [
134 | "error",
135 | "consistent-as-needed"
136 | ],
137 | "@typescript-eslint/no-require-imports": [
138 | "error"
139 | ],
140 | "no-duplicate-imports": [
141 | "error"
142 | ],
143 | "no-shadow": [
144 | "off"
145 | ],
146 | "@typescript-eslint/no-shadow": [
147 | "error"
148 | ],
149 | "key-spacing": [
150 | "error"
151 | ],
152 | "no-multiple-empty-lines": [
153 | "error"
154 | ],
155 | "@typescript-eslint/no-floating-promises": [
156 | "error"
157 | ],
158 | "no-return-await": [
159 | "off"
160 | ],
161 | "@typescript-eslint/return-await": [
162 | "error"
163 | ],
164 | "no-trailing-spaces": [
165 | "error"
166 | ],
167 | "dot-notation": [
168 | "error"
169 | ],
170 | "no-bitwise": [
171 | "error"
172 | ],
173 | "@typescript-eslint/member-ordering": [
174 | "error",
175 | {
176 | "default": [
177 | "public-static-field",
178 | "public-static-method",
179 | "protected-static-field",
180 | "protected-static-method",
181 | "private-static-field",
182 | "private-static-method",
183 | "field",
184 | "constructor",
185 | "method"
186 | ]
187 | }
188 | ]
189 | }
190 | }
--------------------------------------------------------------------------------
/react-container-app/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | node_modules
6 | /.pnp
7 | .pnp.js
8 |
9 | # testing
10 | /coverage
11 |
12 | # production
13 | /build
14 |
15 | # misc
16 | .DS_Store
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 |
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 |
26 | #amplify-do-not-edit-begin
27 | amplify/\#current-cloud-backend
28 | amplify/.config/local-*
29 | amplify/logs
30 | amplify/mock-data
31 | amplify/mock-api-resources
32 | amplify/backend/amplify-meta.json
33 | amplify/backend/.temp
34 | build/
35 | dist/
36 | node_modules/
37 | aws-exports.js
38 | awsconfiguration.json
39 | amplifyconfiguration.json
40 | amplifyconfiguration.dart
41 | amplify-build-config.json
42 | amplify-gradle-config.json
43 | amplifytools.xcconfig
44 | .secret-*
45 | **.sample
46 | #amplify-do-not-edit-end
47 |
--------------------------------------------------------------------------------
/react-container-app/README.md:
--------------------------------------------------------------------------------
1 | ### React Container App Deployment
2 |
3 | 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.
4 |
5 | React Container App also uses AWS Cognito for user Authentication.
6 |
7 | AWS Amplify is leveraged hosting the app, configuring the CI/CD, and setting up AWS Cognito for user Authentication.
8 |
9 | #### Prerequisite
10 |
11 | - Make sure we have Amplify CLI up and running, and for installation use the [Amplify Official Website](https://docs.amplify.aws/cli/start/install/)
12 |
13 | ## Deployment on AWS
14 |
15 | 
16 |
17 | ### Deployment of the above architecture on AWS
18 |
19 | #### Step 1: Clone Repository
20 |
21 | ```console
22 | git clone https://github.com/aws-samples/micro-frontend-using-polyglot-javascript-frameworks.git
23 | cd micro-frontend-using-polyglot-javascript-frameworks/react-container-app
24 | ```
25 |
26 | #### Step 2: Install Dependencies
27 |
28 | ```console
29 | npm install
30 | ```
31 |
32 | ### Step 3: Initialize AWS Amplify
33 |
34 | ```console
35 | amplify init
36 | ```
37 |
38 | 
39 |
40 | ### Step 4: Add Authentication
41 |
42 | ```console
43 | amplify add auth
44 | ```
45 |
46 | Select the options as present in the screenshot
47 |
48 | 
49 |
50 | ### Step 5: Push local amplify changes to AWS
51 |
52 | Push the local changes to AWS, and Amplify would create resources needed for the Authentication (AWS Cognito, IAM Role, Lambda Function)
53 |
54 | ```console
55 | amplify push
56 | ```
57 |
58 | 
59 |
60 | ### Step 6: Add CI/CD and Deploy App
61 |
62 | ```console
63 | amplify add hosting
64 | ```
65 |
66 | Amplify hosting will ask a few questions, select the answers as present in the screenshot:
67 |
68 | 
69 |
70 | *After selecting the options, Amplify CLI would open Amplify console on the default web browser.*
71 |
72 | #### Step 6a: Setting up Hosting Environment
73 |
74 | Click on *Hosting environments* and Select *AWS CodeCommit*. Click "Connect Branch"
75 |
76 | 
77 |
78 | #### Step 6b: Setting up Repository
79 |
80 | Select *microfrontend-react-container-app* repository from the drop down and select *main* branch.
81 |
82 | 
83 |
84 | #### Step 6c: Configure the Build Setting
85 |
86 | - Select *Environment* as **Dev** from the drop down
87 | - Select an existing service role or create a new one so Amplify Hosting may access your resources.
88 | - 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)*)
89 | - 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)*)
90 |
91 | 
92 | 
93 |
94 | #### Step 6d: Review the CI/CD and Build Setting
95 |
96 | Review the setting and click on *Save and Deploy*
97 |
98 | 
99 |
100 | ### Step 7: Getting the React Container App endpoint
101 |
102 | After completing *Step 6d*, come back to the existing terminal and hit enter. You can see the Frontend App Domain.
103 |
104 | 
105 |
106 | Frontend Domain is the Container application, open it on the Browser and try out the Micro-Frontend App.
107 |
108 | 
109 |
110 | [Lets' go back.](../README.md)
--------------------------------------------------------------------------------
/react-container-app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-container-app",
3 | "version": "0.0.1",
4 | "private": true,
5 | "dependencies": {
6 | "@aws-amplify/ui-react": "^4.6.0",
7 | "@fortawesome/fontawesome-free": "^6.3.0",
8 | "aws-amplify": "^5.1.3",
9 | "html-webpack-plugin": "^5.5.0",
10 | "mdb-react-ui-kit": "^5.1.0",
11 | "react": "^18.2.0",
12 | "react-dom": "^18.2.0",
13 | "react-scripts": "5.0.1",
14 | "web-vitals": "^2.1.4"
15 | },
16 | "scripts": {
17 | "clean": "rm -rf node_modules build",
18 | "build": "npm run lint && webpack --mode production",
19 | "lint": "npx eslint . --ext .ts,.tsx --fix",
20 | "build:dev": "npm run lint && webpack --mode development",
21 | "build:start": "npm run lint && cd build && PORT=8080 npx serve",
22 | "start": "npm run lint && npx kill-port 8080 && webpack serve --open --mode development",
23 | "start:live": "npm run lint && webpack serve --open --mode development --live-reload --hot"
24 | },
25 | "eslintConfig": {
26 | "extends": [
27 | "react-app"
28 | ]
29 | },
30 | "browserslist": {
31 | "production": [
32 | ">0.2%",
33 | "not dead",
34 | "not op_mini all"
35 | ],
36 | "development": [
37 | "last 1 chrome version",
38 | "last 1 firefox version",
39 | "last 1 safari version"
40 | ]
41 | },
42 | "devDependencies": {
43 | "@typescript-eslint/eslint-plugin": "^5.57.1",
44 | "@typescript-eslint/parser": "^5.57.1",
45 | "compression-webpack-plugin": "^10.0.0",
46 | "copy-webpack-plugin": "^11.0.0",
47 | "eslint": "^8.37.0",
48 | "kill-port": "^2.0.1",
49 | "mini-css-extract-plugin": "^2.7.5",
50 | "ts-loader": "^9.4.2",
51 | "typescript": "^5.0.4",
52 | "webpack": "^5.76.1",
53 | "webpack-cli": "^5.0.1",
54 | "zlib": "^1.0.5"
55 | },
56 | "overrides": {
57 | "react-scripts": {
58 | "typescript": "^5"
59 | }
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/react-container-app/public/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aws-samples/micro-frontend-using-polyglot-javascript-frameworks/096dc429c4de70a8e00e1d8c6bc8e795bd82cc84/react-container-app/public/android-chrome-192x192.png
--------------------------------------------------------------------------------
/react-container-app/public/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aws-samples/micro-frontend-using-polyglot-javascript-frameworks/096dc429c4de70a8e00e1d8c6bc8e795bd82cc84/react-container-app/public/android-chrome-512x512.png
--------------------------------------------------------------------------------
/react-container-app/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aws-samples/micro-frontend-using-polyglot-javascript-frameworks/096dc429c4de70a8e00e1d8c6bc8e795bd82cc84/react-container-app/public/apple-touch-icon.png
--------------------------------------------------------------------------------
/react-container-app/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aws-samples/micro-frontend-using-polyglot-javascript-frameworks/096dc429c4de70a8e00e1d8c6bc8e795bd82cc84/react-container-app/public/favicon-16x16.png
--------------------------------------------------------------------------------
/react-container-app/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aws-samples/micro-frontend-using-polyglot-javascript-frameworks/096dc429c4de70a8e00e1d8c6bc8e795bd82cc84/react-container-app/public/favicon-32x32.png
--------------------------------------------------------------------------------
/react-container-app/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aws-samples/micro-frontend-using-polyglot-javascript-frameworks/096dc429c4de70a8e00e1d8c6bc8e795bd82cc84/react-container-app/public/favicon.ico
--------------------------------------------------------------------------------
/react-container-app/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | Product Categories Data
108 | 158 |
24 | {user && (
25 | <>loading...
}>
27 | @React Container App
23 |
25 |
26 |
31 |
32 |
36 |
37 |
38 |
27 | @React App
28 |
29 |
33 | @Angular App
34 |
35 |
79 | © 2023 Copyright:
80 |
81 | ChartApp.com
82 |
83 |
84 |
33 |
34 |
35 |