Use A Frontend Plugin Framework Slot#
Utilizing frontend plugin framework slots, site operators now have the ability to customize various portions of Open edX MFEs. A “frontend plugin framework slot” refers to an area of a web page - comprising one or more visual elements - that can be “swapped out” with other visual elements using custom code defined in an env.config.jsx file. Note: In some cases a slot may default to being empty, existing solely to be a placeholder for optional elements.
The basic procedure for replacing a slot in a production Tutor deployment is as follows:
Find the slot(s) you wish to customize by visiting the relevant /src/plugin-slots page of the MFE you wish to customize (for example, see the Learner Dashboard MFE slots documentation)
Follow the Tutor MFE instructions to create a Tutor plugin that configures env.config.jsx to use the slot you selected above.
After enabling your Tutor plugin, rebuild the MFE image via the tutor images build mfe command. Then restart the MFE container with tutor local stop mfe && tutor local start -d mfe.
After restarting, navigate to the page where the plugin slot is exposed, where you should be able to see the custom content your plugin provides.
Note that up to three actions may be available for a slot: “modify” (changing the links in the existing component), “replace” (fully removing the existing component and putting a custom one in instead), and “add” (putting custom components before/after the existing component). See the MobileUserMenuSlot for an example.
More on Frontend Plugin Slots#
See the Frontend Plugin Slots section of the tutor-mfe README for more about Frontend Plugin Slots and their usage.
See also
See Available Frontend Plugin Slots for a list of available slots.