What is the best way to replace a builtin MFE

I built a custom MFE that functions as a standalone app, but I want it embedded within a course. Specifically, it should be added as a new course tab and render when selected. Since I already use the Learning MFE, it seems logical that I should have integrated my app into it from the start.

My next steps, as I see them, are:

  1. Clone frontend-app-learning.
  2. Rebuild my app within my local copy of the Learning MFE.
  3. Replace the built-in Learning MFE in Tutor with my modified version.

Does this approach make sense? Also, what is the best way to replace a built-in MFE in Tutor?

BTW: I already tried using a simple iframe in a course page which works well, but I’m interested in a more seamless integration.

What technologies did you use to build you new MFE? If you used the recommended ones (i.e. React + React Query), then it should not be necessary to “rebuild” your app at all - you can just embed it as-is into frontend-app-learning. The recommended way to do this is as a plugin - either in one of the existing plugin slots or creating a new plugin slot. But if necessary you can also clone the frontend-app-learning repo, find the place where you want to insert your app, and just insert it as any other React component.

e.g. <Tab...>Existing Course Tab 1</Tab><Tab ...><MyCustomApp /></Tab>

My mfe uses React. This is great news.

If it does become necessary to clone the frontend-app-learning repo, how exactly would I patch the tutor-mfe plugin to use a replacement frontend-app-learning repo. I typically use bash scripts to update the Dockerfile before building the mfe, but is there a recommended way?

Thank you.

In development, you just use tutor mounts add /path/to/frontend-app-learning. In production, I think that you use a custom plugin similar to the one documented in “Adding new MFEs”, but instead of adding a new MFE with mfes["mymfe"] = { you just modify the existing one with code like this:

@MFE_APPS.add()
def _use_my_mfe(mfes):
    # Use my fork of frontend-app-learning
    mfes["learning"]["repository"] = "https://github.com/username/frontend-app-learning.git"
    return mfes
1 Like