Deploying MFEs in the community

Working Groups Build-Test-Release
10

Thanks to the help of @morenol I have managed to create a working plugin for Tutor that deploys the Gradebook microfrontend application: https://github.com/overhangio/tutor-gradebook As all Tutor plugins, it’s really easy to install., so I encourage you to try it out (not in production, though :))

A demo is available here: https://grades.demo.openedx.overhang.io (login: admin@overhang.io, password: admin)

Creating this plugin has allowed me to get a first experience in MFE deployment. Generally speaking, it was fairly easy to create, apart from the usual head-scratching issues like CORS. Yet, I’d like to mention a few points where MFEs could be improved:

  1. Documentation: currently, the list of environment variables that need to be set for building the gradebook is spread in multiple files: src/config/index.js and src/index.jsx. I would like to see the list of all required environment variables in a single place, where they would be properly documented.

  2. Development: in the open-release/juniper.3 version, the webpack-dev server is run with host checking, such that it can only be accessed as 0.0.0.0, localhost or 127.0.0.1: https://github.com/edx/frontend-app-gradebook/blob/open-release/juniper.3/config/webpack.dev.config.js#L140 This is quite inconvenient, as in Tutor we access the gradebook at http://grades.local.overhang.io:1994. It would be great if the host that the dev server binds to were defined as a (documented) environment variable. (It is unclear to me if issue still happens in the master branch, as I am unfamiliar with the fedx-scripts executable: https://github.com/edx/frontend-app-gradebook/blob/aa39fcc7e045f231d93c7c8ae180e73cd0d16a69/package.json#L17)

  3. Production: as discussed here, the web server needs to redirect the /<course-id> paths to /index.html. This seems like an anti-pattern, as it prevents having well-defined 404 error. Also, it forces operators to add specific intelligence to the web server, when one of the promises of microfrontends was that we only needed to setup a dumb fileserver. Instead of adding the course ID in the path (/<course-id>), we should be using querystrings (/?course-id=...).

These are fairly minor technical hurdles that I’m sure will be easily resolved. Again, deploying the MFE was a rather pleasant experience. I don’t expect that integrating other MFEs will present much more challenging difficulties.

1 Like