overhangio / tutor-mfe

This plugin makes it possible to easily add micro frontend (MFE) applications on top of an Open edX platform that runs with Tutor.
GNU Affero General Public License v3.0
22 stars 95 forks source link

fix: Runtime config in dev mode #187

Closed arbrandes closed 8 months ago

arbrandes commented 9 months ago

Description

MFE runtime configuration in dev mode was not working properly prior to this. It would always end up querying the example.com site configuration. With this change, we force the request origin to always be the LMS host and port, as opposed to something like apps.local.edly.io:2001, which would trip up the Django site detection.

Reproducing and testing

To reproduce (and test) the problem:

  1. Check out an MFE locally. For instance, the learner dashboard: git clone https://github.com/openedx/frontend-app-learner-dashboard
  2. Configure a local mount for the MFE. tutor mounts add ./frontend-app-learner-dashboard
  3. Launch Tutor in dev mode: tutor dev launch. (This should rebuild the appropriate images.)
  4. Go to the site configuration admin page (http://local.edly.io:8000/admin/site_configuration/siteconfiguration/), and under the local.edly.io:8000 entry, add an override for the dashboard such as:
{
    "MFE_CONFIG_OVERRIDES": {
       "learner-dashboard": {
            "BOGUS": true
        }
    }
}
  1. Navigate to the MFE in a browser (http://apps.local.edly.io:1996/learner-dashboard/). Open the Network tab in the debug console, and find the "mfe_config" request. (The URL should be "http://apps.local.edly.io:1996/api/mfe_config/v1?mfe=learner-dashboard".) Click on it, and then on the "Response" tab. If the "BOGUS" entry is not in the configuration object, you have successfully reproduced the problem.

To test the fix, check out this branch, save configuration, (tutor config save), rebuild the learner dashboard dev image with tutor images build learner-dashboard-dev, and restart the dev environment. You should then be able to see the "BOGUS" entry.

Further information

For reference on changeOrigin, see https://webpack.js.org/configuration/dev-server/#devserverproxy and https://github.com/chimurai/http-proxy-middleware?tab=readme-ov-file#http-proxy-options.

arbrandes commented 9 months ago

@regisb, objections?