Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

PROD-1538 rename repo to mfe-header -> dev #97

Merged
merged 22 commits into from
May 3, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
43cfb52
PROD-1583 #comment typescript #time 10m
brooketopcoder Apr 11, 2022
aab0c46
Merge pull request #80 from topcoder-platform/PROD-1583_typescript
testflyjets Apr 12, 2022
c0b4c69
PROD-1583 #comment change url from /profile to /account #time 15m
brooketopcoder Apr 13, 2022
99a8ee3
Merge pull request #82 from topcoder-platform/PROD-1558_account-settings
testflyjets Apr 13, 2022
fac6b63
PROD-1551_header #comment replace profile panel #time 3h
brooketopcoder Apr 14, 2022
b5cf28c
Merge pull request #83 from topcoder-platform/PROD-1551_header
testflyjets Apr 14, 2022
c4582db
PROD-1607 #comment make topnav links not clickable;
brooketopcoder Apr 14, 2022
ede9890
PROD-1607 #comment fix responsive header #time 30m
brooketopcoder Apr 14, 2022
aaa6682
PROD-1607 #comment clean-up #time 5m
brooketopcoder Apr 14, 2022
bde58a7
PROD-1607 #comment clean-up #time 10m
brooketopcoder Apr 15, 2022
f871f98
Merge pull request #84 from topcoder-platform/PROD-1607
testflyjets Apr 15, 2022
e3d6439
Merge pull request #85 from topcoder-platform/PROD-1551_header
brooketopcoder Apr 15, 2022
3877685
Application name change
Gunasekar-K Apr 18, 2022
29d25e8
Application name change
Gunasekar-K Apr 18, 2022
539fb51
Application name change
Gunasekar-K Apr 18, 2022
387cd35
rename repo
ThomasKranitsas Apr 18, 2022
2cf79da
resolve conflicts
ThomasKranitsas Apr 18, 2022
67fff6e
fix package lock
ThomasKranitsas Apr 18, 2022
371e336
Merge pull request #96 from topcoder-platform/dev
ThomasKranitsas May 3, 2022
d396ce9
PROD-1538 revert package.json
brooketopcoder May 3, 2022
322f301
PROD-1538 roll back files not related to renaming the repo
brooketopcoder May 3, 2022
d3fc0fc
PROD-1538 roll back changes not related to renaming
brooketopcoder May 3, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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 .
Expand Down Expand Up @@ -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:
Expand Down
20 changes: 10 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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
Expand All @@ -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.
Expand All @@ -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: () => {},
Expand All @@ -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;
Expand All @@ -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'`
4 changes: 2 additions & 2 deletions docker/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions docker/docker-compose.yml
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/set-public-path.js
Original file line number Diff line number Diff line change
Expand Up @@ -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");
2 changes: 1 addition & 1 deletion src/utils/exports.js
Original file line number Diff line number Diff line change
@@ -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";
Expand Down