Tutor (Open edX) MFE Development: Building for Production

This is the second part of our chill guide on developing Micro Frontend (MFE) components for Tutor (Open edX). Last time, we tinkered around with the development process, and now it’s time to shine by getting our work out there in the wild, ready for production.

Missed the previous note? No worries, catch up here

After what feels like an eternity of debugging and countless "Aha!" moments (and probably a few "Oh no!" ones too), you’re ready to show off your hard work. Sure, the method might be a bit quirky, but if it does the trick, who's complaining, right?

Heads up! I’m going to assume you're all logged into your production server via SSH (because you're awesome like that), and that you've already wrangled your domain records to point at your server.

Deploying Your MFE for the World to See

Step 1: Wake up Your MFE Plugin

First up, let’s make sure your MFE plugin is ready to roll:

$ tutor plugins enable mfe

Step 2: Create Your Custom Plugin

Time to get crafty with a custom plugin to patch the standard MFE setup:

# Create plugins root directory
$ mkdir -p "$(tutor plugins printroot)"

# Create the plugin
$ touch "$(tutor plugins printroot)/myplugin.py"

Let’s make sure it's listed in the lineup:

$ tutor plugins list
...
myplugin    (disabled)    /home/yourusername/.local/share/tutor-plugins/myplugin.py
...

Give it some power:

$ tutor plugins enable myplugin
Plugin myplugin enabled
Configuration saved to /home/yourusername/.local/share/tutor/config.yml
Environment generated in /home/yourusername/.local/share/tutor/env

Step 3: Customize Your Plugin

Crack open your new plugin file (located at /home/yourusername/.local/share/tutor-plugins/myplugin.py) and sprinkle in this bit of magic:

from tutormfe.hooks import MFE_APPS

@MFE_APPS.add()
def _add_my_mfe(mfes):
    mfes["mymfe"] = {
        "repository": "https://github.com/{USERNAME}/frontend-app-{MFE-NAME}.git",
        "port": {ANY_PORT_YOU_WANT},
    }
return mfes

Step 4: Lock in Your Config

If you’ve tweaked things, don’t forget:

$ tutor config save

Step 5: Build the Docker Image

Here comes the heavy lifting:

$ tutor images build mfe

Grab a coffee, this could take a bit.

Step 6: Launch Time

Once it’s built:

$ tutor local launch

Follow the prompts and bam, you’re live! 🎉

Congratulations!

When Things Go Sideways...

So, you've launched, but suddenly, your server decides to take a nap—mid-session, no less. If you find your server hanging up and the only clue is a vague timeout or connection reset error during the MFE image build, don’t panic. Here’s a sneaky little workaround that might just save your bacon:

Reduce Docker's parallel operations to keep your server from tipping over:

1. Create a buildkit.toml configuration to keep things chill:

[worker.oci]
   max-parallelism = 2

2. Spin up a Docker builder with this cooler setting:

$ docker buildx create --use --name=max2cpu --driver=docker-container --config=./buildkit.toml

3. Give the build another shot:

$ tutor images build mfe

4. Launch the Tutor:

$ tutor local launch

This time, fingers crossed, you’re actually good to go!

For real, for real.

Feel free to take a moment to bask in the glory of your newly deployed MFE. You’ve earned it! If you run into more hiccups or have questions, just remember, every problem is just an opportunity to learn something new (or, you know, an opportunity to debug).

Happy deploying!