You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Mar 13, 2025. It is now read-only.
Copy file name to clipboardExpand all lines: README.md
+10-10
Original file line number
Diff line number
Diff line change
@@ -35,7 +35,7 @@ Inside the project folder run:
35
35
36
36
-`npm i` - install dependencies
37
37
-`npm run dev` - run app in development mode
38
-
- 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`.
38
+
- 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`.
39
39
40
40
## Deployment to Production
41
41
@@ -53,7 +53,7 @@ Make sure you have [Heroky CLI](https://devcenter.heroku.com/articles/heroku-cli
53
53
-`git commit -m'inital commit'`
54
54
-`heroku apps:create` - create Heroku app
55
55
-`git push heroku master` - push changes to Heroku and trigger deploying
56
-
- 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.
56
+
- 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.
57
57
- NOTE: Authorization would not work because only predefined list of domain allowed by `accounts-app`.
58
58
59
59
### Cross microfrontend imports
@@ -73,7 +73,7 @@ This app exports functions to be imported by other microapps.
73
73
74
74
#### How to export
75
75
76
-
- To export any function we have to `export` in file [src/topcoder-micro-frontends-navbar-app.js](src/topcoder-micro-frontends-navbar-app.js).
76
+
- To export any function we have to `export` in file [src/topcoder-mfe-header.js](src/topcoder-mfe-header.js).
77
77
- 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).
78
78
- We have to bind actions before exporting.
79
79
- 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
86
86
87
87
For example see https://github.com/topcoder-platform/micro-frontends-react-app
88
88
89
-
1. Add `@topcoder/micro-frontends-navbar-app` to `externals` in webpack config:
89
+
1. Add `@topcoder/mfe-header` to `externals` in webpack config:
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:
97
+
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:
98
98
```js
99
99
module.exports= {
100
100
login: () => {},
@@ -112,18 +112,18 @@ For example see https://github.com/topcoder-platform/micro-frontends-react-app
112
112
113
113
For example see https://github.com/topcoder-platform/micro-frontends-angular-app
114
114
115
-
1. Add `@topcoder/micro-frontends-navbar-app` to `externals` in webpack config:
115
+
1. Add `@topcoder/mfe-header` to `externals` in webpack config:
@@ -135,4 +135,4 @@ For example see https://github.com/topcoder-platform/micro-frontends-angular-app
135
135
}
136
136
```
137
137
138
-
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'`
138
+
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'`
0 commit comments