topcoder-archive · Gunasekar-K · Jun 15, 2023 · May 19, 2022 · May 24, 2022 · Jun 1, 2022
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,17 +1,19 @@
 version: 2
 defaults: &defaults
   docker:
-    - image: circleci/python:2.7-stretch-browsers
+  - image: cimg/python:3.11.0-browsers
 install_dependency: &install_dependency
   name: Installation of build and deployment dependencies.
   command: |
+    sudo apt update
     sudo apt install jq
-    sudo pip install awscli --upgrade
-    sudo pip install docker-compose
+    sudo apt install python3-pip
+    sudo pip3 install awscli --upgrade
+    sudo pip3 install docker-compose
 install_deploysuite: &install_deploysuite
   name: Installation of install_deploysuite.
   command: |
-    git clone --branch v1.4.8 https://github.com/topcoder-platform/tc-deploy-scripts ../buildscript
+    git clone --branch v1.4.15 https://github.com/topcoder-platform/tc-deploy-scripts ../buildscript
     cp ./../buildscript/master_deploy.sh .
     cp ./../buildscript/buildenv.sh .
     cp ./../buildscript/awsconfiguration.sh .
@@ -56,6 +58,14 @@ jobs:
       APPNAME: "mfe-core"
     steps: *builddeploy_steps
 
+  "build-qa":
+    <<: *defaults
+    environment:
+      DEPLOY_ENV: "QA"
+      LOGICAL_ENV: "qa"
+      APPNAME: "mfe-core"
+    steps: *builddeploy_steps
+
   "build-prod":
     <<: *defaults
     environment:
@@ -77,6 +87,13 @@ workflows:
                 - dev
                 - feat/onboarding-app
 
+      - "build-qa":
+          context: org-global
+          filters:
+            branches:
+              only:
+                - qa
+
       # Production builds are exectuted only on tagged commits to the
       # master branch.
       - "build-prod":

diff --git a/README.md b/README.md
@@ -3,6 +3,33 @@
 This is the mfe-core [single-spa](https://single-spa.js.org/) application which loads all other Topcoder micro-frontend (MFE) applications.
 It always loads the **Topcoder Header Microapp** which provides the top-level navigation, handles authorization, and loads other microapps depending on the current URL.
 
+## Content
+
+Following are the list of sections defined in this document,
+
+- [Overview](#overview)
+- [Requirements](#requirements)
+- [Local Development Setup](#local-development-setup)
+  - [IDE](#ide)
+  - [Hosting](#hosting)
+  - [Terminal Configuration](#terminal-configuration)
+  - [Linting](#linting)
+- [Git](#git)
+  - [Branching](#branching)
+  - [Commits](#commits)
+- [Application Configuration](#application-configuration)
+- [NPM Commands](#npm-commands)
+- [Local Deployment](#local-deployment)
+- [Deployment to Development](#deployment-to-development)
+- [Deployment to Production](#deployment-to-production)
+- [Segment Analytics](#segment-analytics)
+- [Add or Remove child app](#add-or-remove-child-app)
+- [Add-hoc child app replacement (import override)](#add-hoc-child-app-replacement-import-override)
+- [Creating child apps (microapps)](#creating-child-apps-microapps)
+  - [Create new or use existent Angular child app](#create-new-or-use-existent-angular-child-app)
+  - [Create new React child app](#create-new-react-child-app)
+  - [Use existent React child app](#use-existent-react-child-app)
+
 ## Overview
 
 Topcoder Single Spa consist of 3 main components:
@@ -140,7 +167,9 @@ This `mfe-core` app has 2 types of configs:
 | `npm run format` | Format code using prettier |
 | `npm run test` | Run unit tests |
 
-## Local Deployment from multi web servers (nodemon & webpack-dev-server) for local development - (most common)
+## Local Deployment
+
+### Local Deployment from multi web servers (nodemon & webpack-dev-server) for local development - (most common)
 
 To run the `mfe-core` app locally, run the following commands from the project root `./mfe-core`:
 
@@ -154,7 +183,7 @@ Terminal 2
 $ npm run start-client
 ```
 
-## Local Deployment from web server (node)
+### Local Deployment from web server (node)
 
 To deploy `mfe-core` app locally run inside the project root `./mfe-core`:
 
@@ -169,7 +198,9 @@ To deploy `mfe-core` app locally run inside the project root `./mfe-core`:
 
 ⚠️ **NOTE** : that to make authorization work locally, you have to use domain `local.topcoder-dev.com` with port `3000`. On your local machine access file `/etc/hosts` add the line `127.0.0.1 local.topcoder-dev.com` and open app by URL http://local.topcoder-dev.com:3000
 
-## Deployment to Development from web server (node) port 80
+## Deployment to Development
+
+### Deployment to Development from web server (node) port 80
 
 | Command              | Description            |
 | -------------------- | ---------------------- |
@@ -180,7 +211,9 @@ To deploy `mfe-core` app locally run inside the project root `./mfe-core`:
 | `$ npm start` | to start the app on port `80`, served from `dist/` |
 | `https://mfe.topcoder-dev.com/micro-frontends-react-route` | open url in browser to access the micro frame with react micro app and micro navbar app |
 
-## Deployment to Production from web server (node) port 80
+## Deployment to Production
+
+### Deployment to Production from web server (node) port 80
 
 | Command              | Description            |
 | -------------------- | ---------------------- |
@@ -191,7 +224,7 @@ To deploy `mfe-core` app locally run inside the project root `./mfe-core`:
 | `$ npm start` | to start the app on port `80`, served from `dist/` |
 | `https://mfe.topcoder.com/micro-frontends-react-route` | open url in browser to access the micro frame with react micro app and micro navbar app |
 
-### Deploying to Heroku
+#### Deploying to Heroku
 
 Make sure you have [Heroky CLI](https://devcenter.heroku.com/articles/heroku-cli) installed and you have a Heroku account. And then inside the project folder run the next commands:
 
@@ -221,7 +254,7 @@ Because analytics can be normally initialized once per website, we are initializ
 - We can enable debug mode by calling `analytics.debug();` inside browser console, see [debug documentation](https://segment.com/docs/connections/sources/catalog/libraries/website/javascript/#debug).
 - TODO: we might consider implementing one global logic for calling `window.analytics.page()` inside Frame of Navbar app so child apps wouldn't worry about this. Though we have to make sure that it works smoothly. In particular we have to make sure that if child app updates page `<title>` then `window.analytics.page()` is called after that and logs to the analytic correct page title. Also, child apps might want to provide additional arguments when calling `window.analytics.page()`. So we might come to this improvement in some time, after we try the current approach.
 
-## Add/Remove child app
+## Add or Remove child app
 
 For adding a child app to the root app make the following steps:
 

diff --git a/config/constants.js b/config/constants.js
@@ -6,6 +6,12 @@ module.exports = Object.freeze({
       'mfeIndexPath': '/index.html',
       'mfeRoutesPath': '/config/micro-frontends-routes-dev.txt'
     },
+    {
+      'appEnv': 'qa',
+      'mfeConfigPath': '/config/micro-frontends-config-qa.json',
+      'mfeIndexPath': '/index.html',
+      'mfeRoutesPath': '/config/micro-frontends-routes-qa.txt'
+    },    
     {
       'appEnv': 'prod',
       'mfeConfigPath': '/config/micro-frontends-config-prod.json',
@@ -26,6 +32,7 @@ module.exports = Object.freeze({
     }
   ],
   APP_ENV_DEV: "dev",
+  APP_ENV_QA: "qa",  
   APP_ENV_PROD: "prod",
   APP_ENV_LOCAL_MULTI: "local-multi",
   APP_ENV_LOCAL: "local",

diff --git a/config/micro-frontends-config-qa.json b/config/micro-frontends-config-qa.json
@@ -0,0 +1,18 @@
+{
+  "imports": {
+    "@topcoder/mfe-header": "https://platform.topcoder-qa.com/navbar/topcoder-mfe-header.js",
+    "@topcoder/micro-frontends-react-app": "https://platform.topcoder-qa.com/react/topcoder-micro-frontends-react-app.js",
+    "@topcoder/micro-frontends-angular-app": "https://platform.topcoder-qa.com/angular/main.js",
+    "@topcoder/micro-frontends-teams": "https://platform.topcoder-qa.com/taas-app/topcoder-micro-frontends-teams.js",
+    "@topcoder/micro-frontends-task-marketplace-app": "https://platform.topcoder-qa.com/tasks/topcoder-micro-frontends-task-marketplace-app.js",
+    "@topcoder/micro-frontends-earn-app": "https://platform.topcoder-qa.com/earn-app/topcoder-micro-frontends-earn-app.js",
+    "@topcoder/micro-frontends-submission-review-app": "https://platform.topcoder-qa.com/submissionreview/topcoder-micro-frontends-submission-review-app.js",
+    "@topcoder/micro-frontends-model-app": "https://platform.topcoder-qa.com/model-app/topcoder-micro-frontends-model-app.js",
+    "@topcoder/micro-frontends-community-admin-app": "https://tc-micro-community-admin.herokuapp.com/community-admin-app/topcoder-micro-frontends-community-admin-app.js",
+    "@topcoder/micro-frontends-taas-admin-app": "https://platform.topcoder-qa.com/taas-admin-app/topcoder-micro-frontends-taas-admin-app.js",
+    "@topcoder/micro-frontends-profile-app": "https://platform.topcoder-qa.com/profile-app/topcoder-micro-frontends-profile-app.js",
+    "@topcoder/micro-frontends-onboarding-app": "https://platform.topcoder-qa.com/onboarding-app/topcoder-micro-frontends-onboarding-app.js",
+    "@topcoder/micro-frontends-forums-app": "https://platform.topcoder-qa.com/forums-app/topcoder-micro-frontends-forums-app.js",    
+    "@topcoder/mfe-customer-work": "https://platform.topcoder-qa.com/self-service-app/topcoder-mfe-customer-work.js"
+  }
+}
diff --git a/config/micro-frontends-routes-qa.txt b/config/micro-frontends-routes-qa.txt
@@ -0,0 +1,58 @@
+<route path="micro-frontends-react-route">
+  <application name="@topcoder/micro-frontends-react-app"></application>
+</route>
+<route path="micro-frontends-angular-route">
+  <application name="@topcoder/micro-frontends-angular-app"></application>
+</route>
+<route path="taas">
+  <application name="@topcoder/micro-frontends-teams"></application>
+</route>
+<route path="task-marketplace">
+  <application name="@topcoder/micro-frontends-task-marketplace-app"></application>
+</route>
+<route path="earn">
+  <application name="@topcoder/micro-frontends-earn-app"></application>
+</route>
+<route path="submissionreview">
+  <application name="@topcoder/micro-frontends-submission-review-app"></application>
+</route>
+<route path="model">
+  <application name="@topcoder/micro-frontends-model-app"></application>
+</route>
+<route path="community-admin">
+  <application name="@topcoder/micro-frontends-community-admin-app"></application>
+</route>
+<route path="taas-admin">
+  <application name="@topcoder/micro-frontends-taas-admin-app"></application>
+</route>
+<route path="profile">
+  <application name="@topcoder/micro-frontends-profile-app"></application>
+</route>
+<route path="onboard">
+  <application name="@topcoder/micro-frontends-onboarding-app"></application>
+</route>
+<route path="forums">
+  <application name="@topcoder/micro-frontends-forums-app"></application>
+</route>
+<route path="self-service">
+  <application name="@topcoder/mfe-customer-work"></application>
+</route>
+<route path="work">
+  <application name="@topcoder/mfe-customer-work"></application>
+</route>
+<route path="account">
+  <application name="@topcoder/mfe-customer-work"></application>
+</route>
+<route path="support">
+  <application name="@topcoder/mfe-customer-work"></application>
+</route>
+<route path="unauthorized">
+  <div style="text-align: center; padding-top: 200px; font-size: 32px;">
+    You are unauthorized
+  </div>
+</route>
+<route default>
+  <div style="text-align: center; padding-top: 200px; font-size: 32px;">
+    Welcome to the Topcoder Platform. Get started by opening an app in the tool switcher on top right corner.
+  </div>
+</route>
diff --git a/server.js b/server.js
@@ -21,6 +21,7 @@ app.get("/micro-frontends-config", async function (req, res) {
   switch (process.env.APPENV.toLowerCase()) {
     case APP_CONST.APP_ENV_PROD.toLowerCase() :
     case APP_CONST.APP_ENV_DEV.toLowerCase() :
+    case APP_CONST.APP_ENV_QA.toLowerCase() :
       mfeRoutes = await axios.get(env_config.mfeConfigPath)
       mfeRoutes = mfeRoutes.data
       break;
@@ -43,6 +44,7 @@ app.get("*", async function (req, res) {
   switch (process.env.APPENV.toLowerCase()) {
     case APP_CONST.APP_ENV_PROD.toLowerCase() :
     case APP_CONST.APP_ENV_DEV.toLowerCase() :
+    case APP_CONST.APP_ENV_QA.toLowerCase() :
     case APP_CONST.APP_ENV_LOCAL.toLowerCase() :
       mfeIndex = await fsPromises.readFile(path.join(distPath + env_config.mfeIndexPath))
       break;
@@ -56,6 +58,7 @@ app.get("*", async function (req, res) {
   let mfeRoutes
   switch (process.env.APPENV.toLowerCase()) {
     case APP_CONST.APP_ENV_DEV.toLowerCase() :
+    case APP_CONST.APP_ENV_QA.toLowerCase() :
     case APP_CONST.APP_ENV_PROD.toLowerCase() :
       mfeRoutes = await axios.get(env_config.mfeRoutesPath)
       mfeRoutes = mfeRoutes.data