How to use frontend-app-ora MFE with Tutor (not included in tutor-mfe)?

Development
, , , ,
1

I am running an Open edX instance using Tutor v19.0.2, and I want to integrate the frontend-app-ora micro-frontend (MFE).

Currently:

  • I understand it’s separate from the MFEs that Tutor bundles by default. It is not included by default in tutor-mfe.
  • The frontend-app-ora GitHub repo appears to be actively maintained.

My questions:

  1. How can I properly add and use frontend-app-ora in my Tutor-based Open edX setup?

    • Is adding it as a custom MFE through a plugin the correct approach?
    • Are there best practices for integrating MFEs that are not part of tutor-mfe?

  2. Does frontend-app-ora replace the existing ORA XBlock view with an MFE-based view, or is it used for something different?

What I’ve tried so far:
I created a Tutor plugin (ora_mfe.py) and added the following code:

from tutormfe.hooks import MFE_APPS

@MFE_APPS.add()
def _add_my_mfe(mfes):
    mfes["ora"] = {
        "repository": "https://github.com/openedx/frontend-app-ora.git",
        "port": 1992,
        "version": "open-release/sumac.2",
    }
    return mfes

After adding this, I ran tutor images build mfe and restarted, but I’m unsure if this is the correct or complete way to integrate it.

Any guidance or examples on the proper setup (and whether this MFE replaces the ORA XBlock view) would be greatly appreciated.

2

@arbrandes could you possibly provide some assistance here?

1 Like
3

Hi Yogesh!

Yes, frontend-app-ora via a Tutor plugin would be the recommended way to do this. In particular, it would be a plugin that adds an MFE to the list in tutor-mfe. Roughly, your plugin would have to do this:

from tutormfe.hooks import MFE_APPS
@MFE_APPS.add()
def _add_ora_app(apps):
    apps["ora"] = {
        "repository": "https://github.com/openedx/frontend-app-ora",
        "port": 2734,
    }
    return apps

In other words, you got it right. (I just changed the variable names to match current usage in tutor-mfe.)

As for your second question, yes, this MFE is meant to replace the regular XBlock view. It is somewhat controversial in the way it achieves this, though. In the future, we’ll be looking more torwards what we’re calling “Xblocks 2.0”, a concept we discussed at a summit a little over a year ago. Which is to say, it is very likely that we’ll deprecate frontend-app-ora when we get around to implementing that.

4

Hi @arbrandes !

Thank you very much for your reply and for confirming that adding frontend-app-ora via a Tutor plugin is the right approach.

I updated my plugin to:

from tutormfe.hooks import MFE_APPS
@MFE_APPS.add()
def _add_ora_app(apps):
    apps["ora"] = {
        "repository": "https://github.com/openedx/frontend-app-ora.git",
        "port": 1992,
    }
    return apps

Then I built the image with:

tutor images build ora-dev

And I restarted my server:

tutor dev stop && tutor dev start

Next, I enabled feature flag openresponseassessment.mfe_views and also added setting value for ORA_MICROFRONTEND_URL.

Now, I can see this view in lms when there is an ORA component:

ORA in LMS
ORA in LMS1156×447 39.3 KB

But when I click on “Create response“, I get page with this error:

ORA in LMS when clicked "Create response"
ORA in LMS when clicked "Create response"1083×228 12.7 KB

Also, in studio, ORA component does not load:

ORA in studio
ORA in studio1362×543 13.6 KB

Is there any additional configurations or steps that I am missing?
If there is any relevant documentation that I can refer to for ora mfe configuration in tutor?

5

Unfortunately, as you’ve probably already seen, there isn’t much in the way of documentation for this MFE.

What I recommend, since you got the MFE up and can access its UI, is for you to try to trace the edx-platform URLs that are requested, then look at the code and the backend logs. It’s very likely that you’re missing a waffle flag or feature toggle.

1 Like
6

Thanks @arbrandes !

I will try that.

Thanks again for the reply.