Running Course Authoring MFE with tutor

Working Groups Build-Test-Release
1

Course authoring MFE is tagged as experimental MFE in nutemg and is expected to be available in Olive.

We are looking to gather all relative inforamtion, documenation needed to use the course author mfe.

For example, CORS setting need enable calls from MFE subdomain.
Other concenrs not known (Not inclusive list):

  • How would the URL change, is there a flag need to be enabled to (i.e simliar to LMS would readiret to learning MFE when enabled
  • What are env variables that are essetinals.

MFE github: GitHub - openedx/frontend-app-course-authoring: The micro-frontend for course authoring in Open edX. Frontend interfaces that currently live in Studio/CMS should eventually live here.

Based on latest BTR meeting, the ponit of posting here is make it available for wider community. @nedbat to ping relevant team in 2U/edX :pray:

4 Likes
2

After spending fair amount of time into this here is what I found is needed, to use the author mfe in production.

There are couple of settigns, config and waffle flags needed so the course author mfe can work.

First to add the MFE to config:

tutor config save --set AUTHOR_MFE_APP="{'name': 'author', 'port': 4224, 'repository': 'https://github.com/openedx/frontend-app-course-authoring'}"

Secodnly you need to apply/set the author MFE config

Env setttings

Create a file pluing to apply setting: i.e.

nano "$(tutor plugins printroot)"/author-mfe.py

Of which its content

from tutor import hooks
hooks.Filters.ENV_PATCHES.add_items([
    (
        "openedx-cms-production-settings",
"""
LOGIN_REDIRECT_WHITELIST.append("{{ MFE_HOST }}")
CORS_ORIGIN_WHITELIST.append("{% if ENABLE_HTTPS %}https://{% else %}http://{% endif %}{{ MFE_HOST }}")
CSRF_TRUSTED_ORIGINS.append("{{ MFE_HOST }}")
COURSE_AUTHORING_MICROFRONTEND_URL ="{% if ENABLE_HTTPS %}https://{% else %}http://{% endif %}{{ MFE_HOST }}/author"
"""
    ),
    (
        "cms-env-features",
"""
ENABLE_CORS_HEADERS: True
"""
    ),
])

Then enable it by tutor plugins enable tutor-mfe followed by tutor config save.

Django-admin settings

Also a waffle flag switch with name discussions.pages_and_resources_mfe need to be created, (so that sudio would redirect to the author mfe. (I suggest to do after the last step, so that you are sure the build was success before enabling it)

Build the mfe-image:

And ofcourse you would need to rebuild the mfe image by tutor images build mfe .

Refs:

3

Hello Ghassan,

Thanks for the detailed steps.

I tried following your steps but could not enable author-mfe in my instance.

Here are the steps I followed:

  • Created plugin author-mfe.py
  • Configured config.yml file in $(tutor config printroot) with the parameters you mentioned
  • Rebuilt mfe image
  • Added waffle flag as mentioned
  • did tutor local quickstart

Anything else that needs to be done?

4

Hey,
Oh probably because plugin file wasn’t enabled, have you run tutor plugins enable author-mfe I didn’t include this step exactly above before, I will edit the above post now

I can’t edit the above post:

When I said above to run tutor plugins enable tutor-mfe I meant to say: tutor plugins enable author-mfe (I assume tutor-mfe plugins is already enabled).

Lastly you would need to repeate the steps. Sorry for the inconvenience

5

Hey Ghassan!

No problem at all, it worked!!

Screen Shot 2022-09-18 at 7.53.44 PM
Screen Shot 2022-09-18 at 7.53.44 PM2490Ă—1290 269 KB

Really appreciate the effort you put in.

We were actually following this because we wanted to enable the new discussions-mfe from here:

Even though we’ve made the author-mfe work, we had some “burning” questions:

  1. How did you know the names of the patches to work with (eg. openedx-cms-production-settings) in the plugin?
  2. How did you decide the port number as 4224, was this randomly selected?
  3. How did you know which waffle flags to create?
  4. Why did you name it as “author” in config.yml file, could it be anything else?

This is our (rough) roadmap for the discussions mfe based on your post:

  1. Make a new plugin called “discussions-mfe.py”
  2. Copy paste your plugin code and replace cms with lms , and “…/authors” with “…/discussions”
  3. enable discussions-mfe plugin
  4. rebuild mfe image
  5. local quickstart (just to be sure)

We really want to make the discussions mfe work (because the original seems straight out of 1995 i.e eye-sore), so we’d really appreciate if you could point us in the right direction.

PS: Thanks for the swift response that too on a Sunday.

6

I knew I had to change CMS settings because this app talks to the CMS service, and how I knew about the patch, this is somehting related to tutor, you can check the list of patches here: Template patch catalog — Tutor documentation

Yes it was random, I just made sure it doesn’t conflict with other ports used by MFEs, note this is relevant for dev env. But anyway probably I should have used 2001 hence:

I don’t remeber this part, probably while digging through code in edx-platform.

I choose author because this is shortname, usually in tutor the name would what comes after frontend-app-name but sice its too long in this case I have choosen author. But it can be anything, as long as you reflect that in the settings

I don’t know about the discussion MFE I never ran it thus I am not sure if you would need to apply CMS settings patch.

1 Like
7

Thanks for the detailed response @ghassan

Will take a crack at the discussions with the above understanding.