My Attempts at VS Code + MFE Development on Tutor
Goal #1: Develop a fix for frontend-platform using Tutor
I’m trying to make a small fix in frontend-platform and test it using the frontend-app-library-authoring MFE in tutor dev.
This is my personal log of Tutor and MFE things I’m learning along the way.
Things that confused me…
Why doesn’t mounts specify an image/container?
The MOUNTS in my tutor config looks like this:
MOUNTS:
- /Users/daveormsbee/Projects/openedx/edx-platform
- /Users/daveormsbee/Projects/openedx/frontend-app-library-authoringWith the implicit form, plugins are in charge of automatically detecting in which containers and locations the /host/path folder should be bind-mounted. In this case, folders can be bind-mounted at build-time – which cannot be achieved with the explicit form. (from tutor docs)
So tutor-mfe plugin does some magic introspection based on the name of the repo directory:
@tutor_hooks.Filters.COMPOSE_MOUNTS.add()
def _mount_frontend_apps(volumes, path_basename):
"""
If the user mounts any repo named frontend-app-APPNAME, then make sure
it's available in the APPNAME service container. This is only applicable
in dev mode, because in production, all MFEs are built and hosted on the
singular 'mfe' service container.
"""
if path_basename.startswith(REPO_PREFIX):
# Assumption:
# For each repo named frontend-app-APPNAME, there is an associated
# docker-compose service named APPNAME. If this assumption is broken,
# then Tutor will try to mount the repo in a service that doesn't exist.
app_name = path_basename[len(REPO_PREFIX) :]
volumes += [(app_name, "/openedx/app")]
return volumesYou have to restart the container after running tutor mounts
I ran the following command to mount my local copy of frontend-platform to the library-authoring service:
tutor mounts add library-authoring:/Users/daveormsbee/Projects/openedx/frontend-platform:/openedx/frontend-platformWhen I run tutor mounts list, this is what comes out:
It took me a bit to realize that mounts don’t happen immediately, and that I needed to restart the library-authoring service in order to see it mounted.
Side note: I chose to mount it in /openedx/frontend-platform because it should make it so that a relative link from frontend-app-library-authoring should stay the same on host and in tutor (on the image, frontend-app-library-authoring is mounted into /openedx/app. So as long as both repos are checked out next to each other on the host, a link to "../frontend-platform" should work.
Local paths didn’t seem to work in module.config.js
The example module.config.js that frontend-build gives shows local, relative paths. I wanted to just override frontend-platform, so I used this:
This didn’t work for me:
This was because I copy-pasted without reading properly. The dir in the config should have been ../frontend-platform, but I had kept it ../src/frontend-platform
Got compile errors when trying to build frontend-app-library-authoring
The key here was to build frontend-platform before trying to build frontent-app-library-authoring.
VS Code’s Dev Containers Plugin AUTOMATICALLY started port forwarding
I was connecting to the CMS container, and didn’t realize that VS Code would automatically start port forwarding. This is a problem because Django in the CMS container runs at 8000, but is supposed to be connected to at 8001 from the outside. Port 8000 is reserved the for LMS. So what was happening was that VS Code was taking the port away from the LMS whenever the LMS code was reloaded. I was working on a Studio feature, so things continued to work fine for me until my auth token expired and the Library Authoring MFE errored because it was trying to hit an oauth2 endpoint that lives on the LMS, but was forwarded to CMS instead.
I haven’t seen a way to turn this off in the settings, but being able to connect to a container and get all the python code loaded for introspection is really nice. So I’ve taken to always connecting to the LMS container–VS Code still grabs and forwards the port, but it forwards it to the same place it was going before.