Merge pull request #61 from topcoder-platform/dev

Deploy to PROD dev -> master

Author: ThomasKranitsas

.circleci/config.yml

@@ -11,7 +11,7 @@ install_dependency: &install_dependency
 install_deploysuite: &install_deploysuite
   name: Installation of install_deploysuite.
   command: |
-    git clone --branch v1.4.2 https://github.com/topcoder-platform/tc-deploy-scripts ../buildscript
+    git clone --branch v1.4.8 https://github.com/topcoder-platform/tc-deploy-scripts ../buildscript
     cp ./../buildscript/master_deploy.sh .
     cp ./../buildscript/buildenv.sh .
     cp ./../buildscript/awsconfiguration.sh .
@@ -53,15 +53,15 @@ jobs:
     environment:
       DEPLOY_ENV: "DEV"
       LOGICAL_ENV: "dev"
-      APPNAME: "micro-frontends-frame"
+      APPNAME: "mfe-core"
     steps: *builddeploy_steps
 
   "build-prod":
     <<: *defaults
     environment:
       DEPLOY_ENV: "PROD"
       LOGICAL_ENV: "prod"
-      APPNAME: "micro-frontends-frame"
+      APPNAME: "mfe-core"
     steps: *builddeploy_steps
 
 workflows:

README.md

@@ -1,13 +1,13 @@
-# Topcoder Frame Single-Spa Application (micro-frontends-frame)
+# Topcoder Frame Single-Spa Application (mfe-core)
 
-This is the micro-frontends-frame [single-spa](https://single-spa.js.org/) application which loads all other Topcoder micro applications.
+This is the mfe-core [single-spa](https://single-spa.js.org/) application which loads all other Topcoder micro applications.
 It always loads **Topcoder Navbar Microapp** which show the top navigation and handles authorization and loads other microapps depend on the current URL.
 
 ## Overview
 
 Topcoder Single Spa consist of 3 main components:
 
-- This frame application which is `micro-frontends-frame` [single-spa](https://single-spa.js.org/) application. The only function of this application is to register other micro applications to load.
+- This frame application which is `mfe-core` [single-spa](https://single-spa.js.org/) application. The only function of this application is to register other micro applications to load.
 - **Topcoder Navbar Microapp** - micro application which is always loaded by the frame application and shows top navigation bar and handles user authorization.
 - Any other micro application can be loaded as main content of the overall application.
 
@@ -22,15 +22,15 @@ Topcoder Single Spa consist of 3 main components:
 
 ## Config
 
-This `micro-frontends-frame` app has 2 types of configs:
+This `mfe-core` app has 2 types of configs:
 
 1. Import mapping for the frame, containg `micro app name` and `relative url path` for each micro app. The configuration files are available on TC AWS S3 and have public access.
 
     i. What needs to be added for a new micro-app:
     ```json
     {
         "imports": {
-            "@topcoder/micro-frontends-navbar-app": "https://mfe.topcoder-dev.com/navbar/topcoder-micro-frontends-navbar-app.js",
+            "@topcoder/mfe-header": "https://mfe.topcoder-dev.com/navbar/topcoder-mfe-header.js",
             "<MICRO_APP_NAME>": "<RELATIVE_URL_PATH>"
         }
     }
@@ -39,7 +39,7 @@ This `micro-frontends-frame` app has 2 types of configs:
     ii. Location of the AWS S3 files:
     - Configure micro app names and relative URL to be used when deployed to production environment in file at location : `https://tc-platform-prod.s3.amazonaws.com/micro-frontends/micro-frontends-config-production.json`
     - Configure micro app names and relative URL to be used when deployed to development environment in file at location : `https://tc-platform-dev.s3.amazonaws.com/micro-frontends/micro-frontends-config-development.json`
-    - Configure micro app names and relative URL to be used when deployed to local environment in file at location : `./micro-frontends-frame/config/micro-frontends-config-local.json`
+    - Configure micro app names and relative URL to be used when deployed to local environment in file at location : `./mfe-core/config/micro-frontends-config-local.json`
 
 
 2. Route mapping handled by the frame, containing `route path` and `micro app name` for each micro app. The configuration files are available on TC AWS S3 and have public access.
@@ -53,7 +53,7 @@ This `micro-frontends-frame` app has 2 types of configs:
     ii. Location of the AWS S3 files:
     - Configure route path and micro app name to be used when deployed to production environment in file at location : `https://tc-platform-prod.s3.amazonaws.com/micro-frontends/micro-frontends-routes-production.txt`
     - Configure route path and micro app name to be used when deployed to development environment in file at location : `https://tc-platform-dev.s3.amazonaws.com/micro-frontends/micro-frontends-routes-development.txt`
-    - Configure route path and micro app name to be used when deployed to development environment in file at location : `./micro-frontends-frame/config/micro-frontends-routes-local.txt`
+    - Configure route path and micro app name to be used when deployed to development environment in file at location : `./mfe-core/config/micro-frontends-routes-local.txt`
 
 ⚠️ **NOTE** : When a configuration files is updated on TC AWS S3, make sure to give public access to the file.
 
@@ -71,7 +71,7 @@ This `micro-frontends-frame` app has 2 types of configs:
 
 ## Local Deployment from multi web servers (nodemon & webpack-dev-server) for local development
 
-To deploy `micro-frontends-frame` app locally run inside the project root `./micro-frontends-frame`:
+To deploy `mfe-core` app locally run inside the project root `./mfe-core`:
 
 | Command              | Description            |
 | -------------------- | ---------------------- |
@@ -86,7 +86,7 @@ To deploy `micro-frontends-frame` app locally run inside the project root `./mic
 
 ## Local Deployment from web server (node)
 
-To deploy `micro-frontends-frame` app locally run inside the project root `./micro-frontends-frame`:
+To deploy `mfe-core` app locally run inside the project root `./mfe-core`:
 
 | Command              | Description            |
 | -------------------- | ---------------------- |
@@ -158,7 +158,7 @@ For adding a child app to the root app make the following steps:
 1. Add child app path to importmap. File underpath
 - `https://tc-platform-prod.s3.amazonaws.com/micro-frontends/micro-frontends-config-production.json` for production deployment
 - `https://tc-platform-dev.s3.amazonaws.com/micro-frontends/micro-frontends-config-development.json` for development deployment
-- `./micro-frontends-frame/config/micro-frontends-config-local.json` for local deployment
+- `./mfe-core/config/micro-frontends-config-local.json` for local deployment
 
    React example:
 
@@ -175,7 +175,7 @@ For adding a child app to the root app make the following steps:
 2. Add a route which should show the app. File underpath
 - `https://tc-platform-prod.s3.amazonaws.com/micro-frontends/micro-frontends-routes-production.txt` for production deployment
 - `https://tc-platform-dev.s3.amazonaws.com/micro-frontends/micro-frontends-routes-development.txt` for development deployment
-- `./micro-frontends-frame/config/micro-frontends-routes-local.txt` for local deployment
+- `./mfe-core/config/micro-frontends-routes-local.txt` for local deployment
 
    ```html
    <route path="<RELATIVE_URL_PATH>">
@@ -185,7 +185,7 @@ For adding a child app to the root app make the following steps:
 
 ## Add-hoc child app replacement (import override)
 
-To run a child app locally we always need to have frame (`micro-frontends-frame`) which would load a child app. But the cool thing is that we don't have to deploy the frame locally and we can use already deployed frame app. We can use a dev tool to override a child app URL so it would be loaded from the local machine by following the next steps:
+To run a child app locally we always need to have frame (`mfe-core`) which would load a child app. But the cool thing is that we don't have to deploy the frame locally and we can use already deployed frame app. We can use a dev tool to override a child app URL so it would be loaded from the local machine by following the next steps:
 
 - Load already deployed frame app in the browser.
 - Open browser console and set `devtools` flag in the local storage by executing the next command:
@@ -318,8 +318,8 @@ There is no universal approach to run any React app as child app in Single SPA.
 
 
 ### Checkout 4 repos and apply patches:
-- git clone https://github.com/topcoder-platform/micro-frontends-frame.git
-- git clone https://github.com/topcoder-platform/micro-frontends-navbar-app.git
+- git clone https://github.com/topcoder-platform/mfe-core.git
+- git clone https://github.com/topcoder-platform/mfe-header.git
 - git clone https://github.com/topcoder-platform/micro-frontends-react-app.git
 - git clone https://github.com/topcoder-platform/micro-frontends-angular-app.git
 and create a folder (ex: 'auth0-local-login'), and save the following file: 'https://accounts-auth0.topcoder-dev.com/setupAuth0WithRedirect.js' into that folder. After 'setupAuth0WithRedirect.js' file was saved, create an empty 'index.html' file with the following content:
@@ -344,8 +344,8 @@ and create a folder (ex: 'auth0-local-login'), and save the following file: 'htt
 (1). root-config: 
 open Terminal #1
 change the current dir to the root-config folder and apply patch:
-- cd micro-frontends-frame
-- git apply ../micro-frontends-frame.diff --ignore-whitespace --whitespace=nowarn
+- cd mfe-core
+- git apply ../mfe-core.diff --ignore-whitespace --whitespace=nowarn
 install dependencies:
 - npm install
 build and run the app:
@@ -354,8 +354,8 @@ build and run the app:
 (2). navbar-app: 
 open Terminal #2
 change the current dir to the navbar-app folder and apply patch:
-- cd micro-frontends-navbar-app
-- git apply ../micro-frontends-navbar-app.diff --ignore-whitespace --whitespace=nowarn
+- cd mfe-header
+- git apply ../mfe-header.diff --ignore-whitespace --whitespace=nowarn
 there is a config file: '{navbar-app-repo}/config/development.js'. To login locally, change 'ACCOUNTS_APP_CONNECTOR', and 'AUTH' to point to the server that will be served in folder 'auth0-local-login' which was setup in the previous step.
 ```
 URL: {
@@ -412,9 +412,9 @@ The app can be open at the browser url: 'http://localhost:5000' (this page will
 
 ### Checkout 4 repos and apply patches:
 
-- git clone https://github.com/topcoder-platform/micro-frontends-frame.git
+- git clone https://github.com/topcoder-platform/mfe-core.git
 
-- git clone https://github.com/topcoder-platform/micro-frontends-navbar-app.git
+- git clone https://github.com/topcoder-platform/mfe-header.git
 
 - git clone https://github.com/topcoder-platform/micro-frontends-react-app.git
 
@@ -464,9 +464,9 @@ open Terminal #1
 
 change the current dir to the root-config folder and apply patch:
 
-- cd micro-frontends-frame
+- cd mfe-core
 
-- git apply ../micro-frontends-frame.diff --ignore-whitespace --whitespace=nowarn
+- git apply ../mfe-core.diff --ignore-whitespace --whitespace=nowarn
 
 install dependencies:
 
@@ -484,9 +484,9 @@ open Terminal #2
 
 change the current dir to the navbar-app folder and apply patch:
 
-- cd micro-frontends-navbar-app
+- cd mfe-header
 
-- git apply ../micro-frontends-navbar-app.diff --ignore-whitespace --whitespace=nowarn
+- git apply ../mfe-header.diff --ignore-whitespace --whitespace=nowarn
 
 there is a config file: '{navbar-app-repo}/config/development.js'. To login locally, change 'ACCOUNTS_APP_CONNECTOR', and 'AUTH' to point to the server that will be served in folder 'auth0-local-login' which was setup in the previous step.
 
@@ -588,4 +588,4 @@ change the current dir to the 'auth0-local-login' folder and serve with the inde
 
 - npx http-server . -p 5000
 
-The app can be open at the browser url: 'http://localhost:5000' (this page will redirect to the actual page: 'http://localhost:3000')
+The app can be open at the browser url: 'http://localhost:5000' (this page will redirect to the actual page: 'http://localhost:3000')

config/micro-frontends-config-local.json

@@ -1,6 +1,6 @@
 {
   "imports": {
-    "@topcoder/micro-frontends-navbar-app": "http://localhost:3001/navbar/topcoder-micro-frontends-navbar-app.js",
+    "@topcoder/mfe-header": "http://localhost:3001/navbar/topcoder-mfe-header.js",
     "@topcoder/micro-frontends-taas-admin-app": "https://platform.topcoder-dev.com/taas-admin-app/topcoder-micro-frontends-taas-admin-app.js",
     "@topcoder/micro-frontends-react-app": "https://platform.topcoder-dev.com/react/topcoder-micro-frontends-react-app.js",
     "@topcoder/micro-frontends-angular-app": "https://platform.topcoder-dev.com/angular/main.js",
@@ -13,6 +13,6 @@
     "@topcoder/micro-frontends-profile-app": "http://localhost:8009/profile-app/topcoder-micro-frontends-profile-app.js",
     "@topcoder/micro-frontends-onboarding-app": "http://localhost:8510/onboarding-app/topcoder-micro-frontends-onboarding-app.js",
     "@topcoder/micro-frontends-forums-app": "http://localhost:8510/forums-app/topcoder-micro-frontends-forums-app.js",
-    "@topcoder/micro-frontends-self-service-app": "http://localhost:8519/self-service-app/topcoder-micro-frontends-self-service-app.js"
+    "@topcoder/mfe-customer-work": "http://localhost:8519/self-service-app/topcoder-mfe-customer-work.js"
   }
 }

config/micro-frontends-routes-local.txt

@@ -35,7 +35,7 @@
   <application name="@topcoder/micro-frontends-forums-app"></application>
 </route>
 <route path="self-service">
-  <application name="@topcoder/micro-frontends-self-service-app"></application>
+  <application name="@topcoder/mfe-customer-work"></application>
 </route>
 <route path="unauthorized">
   <div style="text-align: center; padding-top: 200px; font-size: 32px;">

docker/Dockerfile

@@ -10,10 +10,10 @@ ENV APPENV=$APPENV
 ENV SEGMENT_ANALYTICS_KEY=$SEGMENT_ANALYTICS_KEY
 
 # Copy the current directory into the Docker image
-COPY . /micro-frontends-frame
+COPY . /mfe-core
 
 # Set working directory for future use
-WORKDIR /micro-frontends-frame
+WORKDIR /mfe-core
 
 # Install the dependencies from package.json
 RUN npm install

docker/docker-compose.yml

@@ -1,7 +1,7 @@
 version: '3'
 services:
-  micro-frontends-frame:
-    image: micro-frontends-frame:latest
+  mfe-core:
+    image: mfe-core:latest
     build:
       context: ../
       dockerfile: docker/Dockerfile

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "@topcoder/micro-frontends-frame",
+  "name": "@topcoder/mfe-core",
   "scripts": {
     "start": "node server.js",
     "build": "webpack --mode=${APPMODE:-development} --env.APPENV=${APPENV:-dev} --env.SEGMENT_ANALYTICS_KEY=${SEGMENT_ANALYTICS_KEY:-NS}",