Hello
I made a custom MFE and I am able to access it in development, but how do you go about accessing it through the website itself? Is there a recommended method or would it be something like creating a custom header and add the link to that as a button?
Thanks!
I cloned the GitHub project overhangio/tutor-mfe ,
The project includes micro frontends for these apps:
example Authn app
Next, I forked the repository for the Authn app, for example:get your repositories sample https://github.com/your-repositories/frontend-app-authn.git
and custom app
I then created a plugin to add the Authn app code by creating a plugin named plugin_enable_Authn.py
In the plugin, I added the following code:
from tutormfe.hooks import MFE_APPS
@MFE_APPS.add()
def _add_my_mfe(mfes):
mfes["authn"] = {
"repository": "https://github.com//your-repositories/frontend-app-authn.git",
"port": 1999,
"version": "", # optional, will default to the Open edX current tag.
}
return mfes
Important: Before making any changes or rebuilding images, stop the Tutor local environment and create a backup of your Tutor configuration by running:
tutor local stop
sudo rsync -avr "$(tutor config printroot)"/ /tmp/tutor-backup/
After that, I enabled the plugin with the command
tutor plugins enable plugin_enable_Authn
Then, I saved the configuration:
tutor config save
Built the images
tutor images build openedx
And finally, launched the platform:
tutor local launch
I don’t know if I answered the question correctly.
Hi
So Ive done all that and I got the custom MFE to work. It is on its own port as a seperate MFE from other ones. Now I am just trying to figure out how to show a link on the website to that MFE.
I have been attempting to modify the frontend-component-header from:
However i am having trouble with it building. When I try to build just the learner-dashboard-dev (which is where i pointed the header component to) it builds fine but not if i build tutor images build mfe
Here is the error:
=> ERROR [learner-dashboard-prod 1/1] RUN npm run build 127.9s
------
> [learner-dashboard-prod 1/1] RUN npm run build:
0.707
0.707 > @edx/frontend-app-learner-dashboard@0.0.1 build
0.707 > fedx-scripts webpack
0.707
0.797 Running with resolved config:
0.797 /openedx/app/webpack.prod.config.js
0.797
2.399 Browserslist: caniuse-lite is outdated. Please run:
2.399 npx update-browserslist-db@latest
2.399 Why you should do it regularly: https://github.com/browserslist/update-db#readme
90.41 Paragon Plugin cannot load PARAGON_THEME_URLS env variable, skipping.
123.3 Paragon Plugin cannot load PARAGON_THEME_URLS env variable, skipping.
124.6 Paragon Plugin cannot load PARAGON_THEME_URLS env variable, skipping.
124.9 Paragon Plugin cannot load PARAGON_THEME_URLS env variable, skipping.
127.0 Error parsing bundle asset "/openedx/app/dist/268.ed0f270fdb59454d316c.js": no such file
127.0 Error parsing bundle asset "/openedx/app/dist/app.fbf9293f64e33c35e183.js": no such file
127.0 Error parsing bundle asset "/openedx/app/dist/617.ecdc0145e2452e2e08b2.js": no such file
127.0 Error parsing bundle asset "/openedx/app/dist/runtime.2beb85a99dc909aab78b.js": no such file
127.0
127.0 No bundles were parsed. Analyzer will show only original module sizes from stats file.
127.0
127.1 Webpack Bundle Analyzer saved report to /openedx/app/dist/report.html
127.6 assets by status 6.63 MiB [cached] 13 assets
127.6 Entrypoint app = runtime.2beb85a99dc909aab78b.js 268.ed0f270fdb59454d316c.js app.fbf9293f64e33c35e183.css app.fbf9293f64e33c35e183.js 10 auxiliary assets
127.6 orphan modules 6.79 MiB [orphan] 3564 modules
127.6 runtime modules 8.67 KiB 16 modules
127.6 built modules 6.67 MiB (javascript) 3.48 MiB (css/mini-extract) [built] 1080 modules
127.6
127.6 ERROR in ./src/containers/LearnerDashboardHeader/index.jsx 4:0-52
127.6 Module not found: Error: Can't resolve '@edx/frontend-component-header' in '/openedx/app/src/containers/LearnerDashboardHeader'
127.6 resolve '@edx/frontend-component-header' in '/openedx/app/src/containers/LearnerDashboardHeader'
127.6 Parsed request is a module
127.6 using description file: /openedx/app/package.json (relative path: ./src/containers/LearnerDashboardHeader)
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 resolve as module
127.6 looking for modules in /openedx/app/src
127.6 single file module
127.6 using description file: /openedx/app/package.json (relative path: ./src/@edx/frontend-component-header)
127.6 no extension
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/src/@edx/frontend-component-header doesn't exist
127.6 .js
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/src/@edx/frontend-component-header.js doesn't exist
127.6 .jsx
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/src/@edx/frontend-component-header.jsx doesn't exist
127.6 .ts
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/src/@edx/frontend-component-header.ts doesn't exist
127.6 .tsx
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/src/@edx/frontend-component-header.tsx doesn't exist
127.6 /openedx/app/src/@edx/frontend-component-header doesn't exist
127.6 /openedx/app/src/containers/LearnerDashboardHeader/node_modules doesn't exist or is not a directory
127.6 /openedx/app/src/containers/node_modules doesn't exist or is not a directory
127.6 /openedx/app/src/node_modules doesn't exist or is not a directory
127.6 looking for modules in /openedx/app/node_modules
127.6 single file module
127.6 using description file: /openedx/app/package.json (relative path: ./node_modules/@edx/frontend-component-header)
127.6 no extension
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header is not a file
127.6 .js
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header.js doesn't exist
127.6 .jsx
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header.jsx doesn't exist
127.6 .ts
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header.ts doesn't exist
127.6 .tsx
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header.tsx doesn't exist
127.6 existing directory /openedx/app/node_modules/@edx/frontend-component-header
127.6 using description file: /openedx/app/node_modules/@edx/frontend-component-header/package.json (relative path: .)
127.6 using description file: /openedx/app/package.json (relative path: ./node_modules/@edx/frontend-component-header)
127.6 no extension
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header is not a file
127.6 .js
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header.js doesn't exist
127.6 .jsx
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header.jsx doesn't exist
127.6 .ts
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header.ts doesn't exist
127.6 .tsx
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header.tsx doesn't exist
127.6 as directory
127.6 existing directory /openedx/app/node_modules/@edx/frontend-component-header
127.6 using description file: /openedx/app/node_modules/@edx/frontend-component-header/package.json (relative path: .)
127.6 use ./dist/index.js from main in package.json
127.6 using description file: /openedx/app/node_modules/@edx/frontend-component-header/package.json (relative path: ./dist/index.js)
127.6 no extension
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header/dist/index.js doesn't exist
127.6 .js
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header/dist/index.js.js doesn't exist
127.6 .jsx
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header/dist/index.js.jsx doesn't exist
127.6 .ts
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header/dist/index.js.ts doesn't exist
127.6 .tsx
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header/dist/index.js.tsx doesn't exist
127.6 as directory
127.6 /openedx/app/node_modules/@edx/frontend-component-header/dist/index.js doesn't exist
127.6 using path: /openedx/app/node_modules/@edx/frontend-component-header/index
127.6 using description file: /openedx/app/node_modules/@edx/frontend-component-header/package.json (relative path: ./index)
127.6 no extension
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header/index doesn't exist
127.6 .js
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header/index.js doesn't exist
127.6 .jsx
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header/index.jsx doesn't exist
127.6 .ts
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header/index.ts doesn't exist
127.6 .tsx
127.6 Field 'browser' doesn't contain a valid alias configuration
127.6 /openedx/app/node_modules/@edx/frontend-component-header/index.tsx doesn't exist
127.6 /openedx/node_modules doesn't exist or is not a directory
127.6 /node_modules doesn't exist or is not a directory
127.6 @ ./src/App.jsx 22:0-71 83:37-59
127.6 @ ./src/index.jsx 12:0-24 23:40-43
127.6
127.6 ERROR in ./src/App.scss
127.6 Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
127.6 ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
127.6 Can't find stylesheet to import.
127.6 ╷
127.6 12 │ @import "~@edx/frontend-component-header/dist/index";
127.6 │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
127.6 ╵
127.6 src/App.scss 12:9 root stylesheet
127.6 at processResult (/openedx/app/node_modules/webpack/lib/NormalModule.js:841:19)
127.6 at /openedx/app/node_modules/webpack/lib/NormalModule.js:971:5
127.6 at /openedx/app/node_modules/loader-runner/lib/LoaderRunner.js:400:11
127.6 at /openedx/app/node_modules/loader-runner/lib/LoaderRunner.js:252:18
127.6 at context.callback (/openedx/app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
127.6 at Object.loader (/openedx/app/node_modules/sass-loader/dist/index.js:63:5)
127.6 @ ./src/App.jsx 25:0-20
127.6 @ ./src/index.jsx 12:0-24 23:40-43
127.6
127.6 1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
127.6 webpack 5.93.0 compiled with 3 errors in 120995 ms
------
Dockerfile:590
--------------------
588 | FROM learner-dashboard-common AS learner-dashboard-prod
589 | ENV NODE_ENV=production
590 | >>> RUN npm run build
591 |
592 |
--------------------
ERROR: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1
Error: Command failed with status 1: docker buildx build --tag=docker.io/overhangio/openedx-mfe:19.0.0-indigo --output=type=docker --cache-from=type=registry,ref=docker.io/overhangio/openedx-mfe:19.0.0-indigo-cache /home/jan/.local/share/tutor/env/plugins/mfe/build/mfe
And here is my plugin for it:
hooks.Filters.ENV_PATCHES.add_item(
(
"mfe-dockerfile-post-npm-install-learner-dashboard",
"""
RUN npm install '@edx/frontend-component-header@git+https://github.com/openedx/frontend-component-header.git'
"""
)
)
If you are able to point me in the right direction with this Id really appreciate it!!
Tagging @arbrandes - any thoughts here?
To add a bit more, Ive been looking into this and I have had more success with the NPM package version. This successfully builds however it does not update in tutor dev or local.
Here is my plugin for it
hooks.Filters.ENV_PATCHES.add_item(
(
"mfe-dockerfile-post-npm-install-learner-dashboard",
"""
RUN npm config set @<group>:registry https://gitlab.com/api/v4/projects/<project-id>/packages/npm/
RUN npm config set '//gitlab.com/api/v4/projects/<project-id>/packages/npm/:_authToken' '<token>'
RUN npm install '@edx/frontend-component-header@npm:@<group>/<header-package>@6.4.1'
"""
)
)
and then I run tutor images build learner-dashboard-dev --no-cache and tutor images build mfe --no-cache
Hello!
While this was the recommended way to customize the header in MFEs for a long time, it is no longer a supported mechanism to do so. You should now use frontend plugins, as documented in the tutor-mfe README. The header component has a series of slots you can use to add a link to your MFE, documented in the frontend-component-header/src/plugin-slots README.
For instance, you can use the desktop_main_menu_slot slot to add your own items to the main menu of the header. There’s an example of how to do that in the slot’s own documentation.
Hi! Thank you for this!!!
I got very focused on the header and footer section of the repo I didnt even bother to look a little lower… I will look into this thank you.