rename repo

Author: ThomasKranitsas

.circleci/config.yml

@@ -52,15 +52,15 @@ jobs:
     environment:
       DEPLOY_ENV: "DEV"
       LOGICAL_ENV: "dev"
-      APPNAME: "micro-frontends-navbar-app"
+      APPNAME: "mfe-header"
     steps: *builddeploy_steps
 
   "build-prod":
     <<: *defaults
     environment:
       DEPLOY_ENV: "PROD"
       LOGICAL_ENV: "prod"
-      APPNAME: "micro-frontends-navbar-app"
+      APPNAME: "mfe-header"
     steps: *builddeploy_steps
 
 workflows:

README.md

@@ -35,7 +35,7 @@ Inside the project folder run:
 
 - `npm i` - install dependencies
 - `npm run dev` - run app in development mode
-- As this app can be loaded only inside a frame single-spa, you have to run a `micro-frontends-frame` frame app and configure it to use the URL `http://localhost:8080/topcoder-micro-frontends-navbar-app.js`.
+- As this app can be loaded only inside a frame single-spa, you have to run a `mfe-core` frame app and configure it to use the URL `http://localhost:8080/topcoder-mfe-header.js`.
 
 ## Deployment to Production
 
@@ -53,7 +53,7 @@ Make sure you have [Heroky CLI](https://devcenter.heroku.com/articles/heroku-cli
   - `git commit -m'inital commit'`
 - `heroku apps:create` - create Heroku app
 - `git push heroku master` - push changes to Heroku and trigger deploying
-- Now you have to configure frame app to use the URL provided by Heroku like `https://<APP-NAME>.herokuapp.com/topcoder-micro-frontends-navbar-app.js` to load this microapp.
+- Now you have to configure frame app to use the URL provided by Heroku like `https://<APP-NAME>.herokuapp.com/topcoder-mfe-header.js` to load this microapp.
 - NOTE: Authorization would not work because only predefined list of domain allowed by `accounts-app`.
 
 ### Cross microfrontend imports
@@ -73,7 +73,7 @@ This app exports functions to be imported by other microapps.
 
 #### How to export
 
-- To export any function we have to `export` in file [src/topcoder-micro-frontends-navbar-app.js](src/topcoder-micro-frontends-navbar-app.js).
+- To export any function we have to `export` in file [src/topcoder-mfe-header.js](src/topcoder-mfe-header.js).
 - If we want to prepare some function for exporting, the good place to do so is inside [src/utils/exports.js](src/utils/exports.js).
   - We have to bind actions before exporting.
   - It's not recommended to export the whole Redux Store to keep only navbar responsible for updating it. It's better to create promises which would return some particular value from the store.
@@ -86,15 +86,15 @@ When we want to use methods exported in the navbar microapp in other apps we hav
 
 For example see https://github.com/topcoder-platform/micro-frontends-react-app
 
-1. Add `@topcoder/micro-frontends-navbar-app` to `externals` in webpack config:
+1. Add `@topcoder/mfe-header` to `externals` in webpack config:
 
    ```js
    externals: {
-      "@topcoder/micro-frontends-navbar-app": "@topcoder/micro-frontends-navbar-app",
+      "@topcoder/mfe-header": "@topcoder/mfe-header",
     },
    ```
 
-2. As `importmaps` only work in browser and don't work in unit test, we have to mock this module in unit tests. For example by creating a file `src/__mocks__/@topcoder/micro-frontends-navbar-app.js` with the content like:
+2. As `importmaps` only work in browser and don't work in unit test, we have to mock this module in unit tests. For example by creating a file `src/__mocks__/@topcoder/mfe-header.js` with the content like:
    ```js
    module.exports = {
      login: () => {},
@@ -112,18 +112,18 @@ For example see https://github.com/topcoder-platform/micro-frontends-react-app
 
 For example see https://github.com/topcoder-platform/micro-frontends-angular-app
 
-1. Add `@topcoder/micro-frontends-navbar-app` to `externals` in webpack config:
+1. Add `@topcoder/mfe-header` to `externals` in webpack config:
 
    ```js
    externals: {
-      "@topcoder/micro-frontends-navbar-app": "@topcoder/micro-frontends-navbar-app",
+      "@topcoder/mfe-header": "@topcoder/mfe-header",
     },
    ```
 
 2. Add type definition in `src/typings.d.ts`:
 
    ```js
-   declare module '@topcoder/micro-frontends-navbar-app' {
+   declare module '@topcoder/mfe-header' {
      export const login: any;
      export const businessLogin: any;
      export const logout: any;
@@ -135,4 +135,4 @@ For example see https://github.com/topcoder-platform/micro-frontends-angular-app
    }
    ```
 
-3. TODO: How to make e2e tests work for Angular? So far they fail with error `Module not found: Error: Can't resolve '@topcoder/micro-frontends-navbar-app'`
+3. TODO: How to make e2e tests work for Angular? So far they fail with error `Module not found: Error: Can't resolve '@topcoder/mfe-header'`

docker/Dockerfile

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

docker/docker-compose.yml

@@ -1,7 +1,7 @@
 version: "3"
 services:
-  micro-frontends-navbar-app:
-    image: micro-frontends-navbar-app:latest
+  mfe-header:
+    image: mfe-header:latest
     build:
       context: ../
       dockerfile: docker/Dockerfile

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "@topcoder/micro-frontends-navbar-app",
+  "name": "@topcoder/mfe-header",
   "scripts": {
     "start": "node server.js",
     "dev": "cross-env APPMODE=development webpack-dev-server",

package.json

@@ -5,4 +5,4 @@ import { setPublicPath } from "systemjs-webpack-interop";
  * https://single-spa.js.org/docs/faq/#code-splits
  */
 
-setPublicPath("@topcoder/micro-frontends-navbar-app");
+setPublicPath("@topcoder/mfe-header");

src/set-public-path.js

@@ -1,7 +1,7 @@
 /**
  * Prepare all the methods to be ready for exporting to be used in other micoapps in this file.
  *
- * Additionally, we need to export them in `topcoder-micro-frontends-navbar-app.js`.
+ * Additionally, we need to export them in `topcoder-mfe-header.js`.
  */
 import _ from "lodash";
 import { bindActionCreators } from "redux";

src/topcoder-micro-frontends-navbar-app.js renamed to src/topcoder-mfe-header.js

@@ -9,7 +9,7 @@ const webpack = require("webpack");
 module.exports = (webpackConfigEnv, options) => {
   const defaultConfig = singleSpaDefaults({
     orgName: "topcoder",
-    projectName: "micro-frontends-navbar-app",
+    projectName: "mfe-header",
     webpackConfigEnv,
     disableHtmlGeneration: true,
   });