Best way to customize mfe app templates (learning-dasboard, profile, headers, footers, ...)

Development
, ,
1

Hi,

I’m currently having an openedx redwood instance using tutor for installing it.

I would like to proper modify the tutor mfe templates.

I currently having tutor-mfe and tutor indigo plugins, like an classic tutor installation.

I have started by cloning the learner-dashboard template and started changing templates. I have tryed to create a custom docker file & image by retrieving the last “overhangio/openedx-mfe:18.0.0-indigo” image and added the dist folder of custom repository.

My custom dockerfile :

FROM overhangio/openedx-mfe:18.0.0-indigo

RUN rm -rf /openedx/dist/learner-dashboard/*
ADD my-custom-learner-dashboard/dist/* /openedx/dist/learner-dashboard/

Currently when I restart my openedx instance (with tutor local launch) and I navigate on the site I have a white page with following warning on the console :

Ignoring unsupported entryTypes: largest-contentful-paint. [learner-dashboard:2:23448]

No valid entryTypes; aborting registration. [learner-dashboard:2:23448]

Ignoring unsupported entryTypes: layout-shift. [learner-dashboard:2:23544]

The script from “http://apps.local.edly.io/484.2c4bbf923bb92d0680b7.js” was loaded even though its MIME type (“”) is not a valid JavaScript MIME type.

The script from “app.43a265b57cf78f5dc1f1.js” was loaded even though its MIME type (“”) is not a valid JavaScript MIME type.

The script from “http://apps.local.edly.io/runtime.3b64d1d0b3d3851658ce.js” was loaded even though its MIME type (“”) is not a valid JavaScript MIME type.

GEThttps://bam-cell.nr-data.net/1/undefined_license_key?a=undefined_application_id&sa=1&v=1212.e95d35c&t=Unnamed Transaction&rst=621&ck=1&ref=http://apps.local.edly.io/learner-dashboard/&be=287&fe=410&dc=407&af=err,xhr,stn,ins,spa&perf={“timing”:{“of”:1721888131721,“n”:0,“u”:197,“ue”:201,“f”:15,“dn”:91,“dne”:144,“c”:144,“ce”:144,“rq”:144,“rp”:154,“rpe”:154,“dl”:196,“di”:364,“ds”:404,“de”:407,“dc”:408,“l”:408,“le”:412},“navigation”:{“ty”:1}}&jsonp=NREUM.setToken[HTTP/1.1 403 635ms]

POSThttps://bam-cell.nr-data.net/events/1/undefined_license_key?a=undefined_application_id&sa=1&v=1212.e95d35c&t=Unnamed Transaction&rst=242416&ck=1&ref=http://apps.local.edly.io/learner-dashboard/[HTTP/1.1 403 728ms]

Loading failed for the with source “https://bam-cell.nr-data.net/1/undefined_license_key?a=undefined_application_id&sa=1&v=1212.e95d35c&t=Unnamed%20Transaction&rst=621&ck=1&ref=http://apps.local.edly.io/learner-dashboard/&be=287&fe=410&dc=407&af=err,xhr,stn,ins,spa&perf={"timing":{"of":1721888131721,"n":0,"u":197,"ue":201,"f":15,"dn":91,"dne":144,"c":144,"ce":144,"rq":144,"rp":154,"rpe":154,"dl":196,"di":364,"ds":404,"de":407,"dc":408,"l":408,"le":412},"navigation":{"ty":1}}&jsonp=NREUM.setToken”.

I would like to know if I do it correctly and if I missing some configuration to have my modification works properly. For exemple I didn’t add anything on the learner-dashboard (env variables, …) expect modify jsx templates.

Thank you in advance

2

Hello,

I have tried to understand more specialy that the “overhangio/openedx-mfe:18.0.0-indigo” docker image do. It seems to copy a local folder (/openedx/app/dist) to the docker container (/openedx/dist/<mfe_app>) folders. I have see that it the same copied folder for each mfe app (account, learner_dashboard, …). I don’t know if I need to do the same and need to use another git repository that contains all the mfe’s apps ?

Thank you in advance