How do I create my own MFEs?

Site Operators Tutor Help
1

Hello to all,

I am a developer and new to using docker and OpenEdx. I have OpenEdx installed locally using tutor. I’m looking for a way to significantly customize the homepage, the course catalog (to make it a catalog of programs containing courses) and add additional pages. I recently read about the concept of MFE which seems to me more suitable than comprehensive theming to avoid breaking my modifications.
I installed tutor-mfe, enabled the plugin and restarted tutor. Everything seems to work well, I see the new authentication pages, new discussion… (original pages replaced by MFEs).

However, I have a hard time to understand the structure of tutor and the tutor-mfe plugin and how to create my own MFEs (for example the homepage). First, I can’t find the code of the MFEs in tutor-mfe so that I can use them as an example.

To create my own MFE, I understood well, first I have to add the MFE to the config:

tutor config save --set HOMEPAGE_MFE_APP=“{‘name’: ‘homepage’, ‘port’: anyrandomone?, ‘repository’: ‘linktomygithub repos’}”

Next, where should I write the code for my homepage? I’m trying to follow the tutor-mfe plugin README but I would need documentation that assumes no prior knowledge. I also read that I need to modify the env settings but even having read some of the Tutor documentation, I can’t really figure it out yet.

Thank you for your help,

2

hello @carodak, wellcome to open edX I think to create a new MFE you can use the frontend-template-application you can fork and customize according to your requirements (create a homepage). This is a good starting point. To test in tutor you can add it like you said

tutor config save --set HOMEPAGE_MFE_APP=“{‘name’: ‘homepage’, ‘port’: anyrandomone?, ‘repository’: ‘linktomygithub repos’}”

After that, run tutor dev start --mount=<./path/to/your/mfe> homepage to mount a dev server for your MFE

1 Like
4

Hi @dcoa,
Thank you for your answer! I was a bit confused as I use tutor-mfe plugin I did not understand why I would need to use the frontend template too. I found this amazing post.

So the tutor-mfe plugin is more a tool to create the mfe-container using the template(s). I didn’t understand something so basic. There’s not a lot of high-level guidance for new users. It makes me wonder if I made the right choice by choosing the MFE over comprehensive theming…Anyway, If I make my own MFEs, I am gonna make a high level tutorial.

So, I’m going to fork the template, familiarize myself with the structure of its files and follow another tutorial to see how they modified the template and hopefully create my own homepage MFE. Then, I’ll rebuild the MFE image and restart the container (reading the post, looks like it can be done locally).

I will keep this page updated with my progress.

2 Likes