MFE runtime configuration

[dcoa]

Description

This is the first step of exploration to make MFE easy to configure from an instance. And is part of a conversation that took place in the BTR WG reference here

You can check this document for a better context, and we appreciate your feedback.

Problem we try to hack

MFEs are only configured at build time. We need to be able to configure them at runtime to avoid needing a re-build for every MFE with every change in configuration.

How we can solve this A proposal is to make a call API to set the configuration variables.

1. In the MFE can set the environment variable MFE_CONFIG_API_URL, which is optional and people can choose if use the env file or call the API (setting the variable).

2. The configuration could be set by site configuration in an object like this:

   {
   "MFE_CONFIG": {
       "SITE_NAME": "Test Site",
       "LOGO_URL": "https://testimage.com/logo.svg",
       "LOGO_TRADEMARK_URL": "https://testimage.com/logo.svg",
       "LOGO_WHITE_URL": "https://testimage.com/logo.svg",
       "FAVICON_URL": "https://testimage.com/favicon.ico",
       "CSRF_TOKEN_API_PATH": "/csrf/api/v1/token",
       "LANGUAGE_PREFERENCE_COOKIE_NAME": "openedx-language-preference",
       "LOGIN_URL": "http://testsite.example.com/login",
       "LOGOUT_URL": "http://testsite.example.com/logout",
       "STUDIO_BASE_URL": "http://studio.example.com",
       "MARKETING_SITE_BASE_URL": "http://testsite.example.com",
       "ORDER_HISTORY_URL": "http://testsite.example.com/orders",
       "REFRESH_ACCESS_TOKEN_ENDPOINT": "http://testsite.example.com/login_refresh",
   }
   }

   This object is read in the initialize function and if it's all okay, start the frontend application.

Pull request based on this proposal

1. Frontend-Platform: Create a new function that is only activated if MFE_CONFIG_API_URL is set and make an API call to set the configuration variables.

2. Edx-Platform: Create the API configuration service to read the site configuration and return the MFE_CONFIG.

3. Enable runtime config in frontend-apps (favicon and title tag using Helmet and i18n):

   • Account (we want to open the discussion with one app and make the same changes eventually in the next ones) due to the new npm ci validation is necessary to upgrade tensorflow/tfjs-converter and tensorflow/tfjs-core
   • Learning due to new npm ci validation is necessary upgrade @edx/frontend-lib-special-exams
   • Profile
   • Gradebook

Pending MFEs

• [x] https://github.com/openedx/frontend-app-support-tools/pull/274
• [x] https://github.com/openedx/frontend-app-authn/pull/654
• [x] https://github.com/openedx/frontend-app-publisher/pull/786
• [x] https://github.com/openedx/frontend-app-learner-record/pull/104
• [x] #143
• [x] #144

[arbrandes]

@dcoa, is there any chance somebody on your team could add runtime configuration support to frontend-app-course-authoring and/or frontend-app-ora-grading in the next couple of weeks? These are the ones we're considering for Olive, but they're missing dynamic config support.

• [ ] #143
• [ ] #144

[dcoa]

Hi, @arbrandes I'm working on ORA support, for course authoring frontend-platform is already in version > 2.5.0, and understanding this https://discuss.openedx.org/t/mfe-runtime-configuration/8495/14?u=dcoa runtime should be able to use.

[dcoa]

This is ORA PR https://github.com/edx/frontend-app-ora-grading/pull/144

[arbrandes]

Thanks a bunch, @dcoa! Let's hope we get that one reviewed and merged in time. (The repo is not in the openedx org yet, unfortunately.)

[arbrandes]

@dcoa, it looks like frontend-app-discussions might make it in as well (they fixed the bugs). It's already on frontend-platform@2.6.1, but do you want to work your favicon magic as well?

[dcoa]

I think for this case the same comment from the authing app https://discuss.openedx.org/t/mfe-runtime-configuration/8495/14?u=dcoa, if this change isn't mandatory, we can do it later.

[arbrandes]

@dcoa, mind taking a look at this one? We've identified a problem when getConfig() gets "cached" by the MFE and doesn't react to changes after being initially set.

• https://github.com/openedx/frontend-app-course-authoring/pull/389

  Have you seen things like this in other MFEs?

[arbrandes]

Looks like we're good as far as all candidate MFEs for Olive are concerned! The last one was authn. Thanks for all the work here, so far!

[arbrandes]

Looks like we're done here, finally! @dcoa, congrats, and thanks for your patience in getting this through!! 🎉