How can I mod the footer in Learning MFE?

I want to modify the footer in Learning MFE (like adding some logos, and some navlink like the generic website’s footer). I’m not planning to change the entire MFE, and just want to modify that footer only. How can I achieve this?

I’ve read the documentation at GitHub - overhangio/tutor-mfe
So does that mean I need to make my own node module package?

Is there a way where I could just change some line of code and it will get carried in the production easily like how Tutor overrides a UI themes?

The footer’s code is in a separate package @edx/frontend-component-footer. As per docs, you can implement your own fork of frontend-component-footer and install additional npm dependencies using the mfe-dockerfile-post-npm-install tutor patch.

The other approach is to use the local module development method recommended by the learning MFE docs. I couldn’t make it work myself yet, so I hope someone could show us a working example we can start from.

Thank you for your answer!

I might use the second method, but I still don’t understand how to deliver that to production?

Hoping for someone to give us another insight on this :sob:

With the way the various MFEs configure webpack currently, module aliases via module.config.js will only work for local development, not production. The expected way to override a package is the first option in @ARMBouhali’s post.

2 Likes

thank you for the confirmation.

Also, would you like to share what are the best way / workflow to develop this modification or developing an MFE?

because right now, seems like my method is less optimal, because when I want to see a change, I need to rebuild it using tutor dev start (unlike when we could using tutor watchtheme that can render the change more quickly)

Good question. In spite of the best efforts of many of our Tutor community members, as of yet it is currently easier to develop MFEs using the devstack than Tutor in development mode. It’s what most MFE developers use as far as I know, even if they ultimately deploy results using Tutor. (I’m in the latter group.)

You can refer to this document for more info on how to develop MFEs with the devstack. I suggest reading the whole thing, including linked documents.

(You might also want to keep tabs on what the just-created DevExp Working Group is doing: their stated goal is to “improve the experience for developers working on the Open edX platform”. I’m sure many improvements to the Tutor development flow will eventually come out of it.)

1 Like