I’ve started developing my own theme in tutor. I want to modify how the login/register screen looks like. I understood I first need to find which .html file is served for this page and then make the same .html file in my theme with the corresponding path. The problem is, I cannot seem to be able to find which .html file is served and this happens a lot with edx-platform. I search for something that should 100% be in the codebase, yet it doesnt exist. For example. to locate the .html file for login and register, I searched for “emailOrUsername”:
It seems you are taking quite a peculiar approach to changing your MFE design. There are many approaches to doing this depending on what your requirement is. What is it you are trying to do exactly?
I’m simply trying to change the appearance of the login/register. I have a Figma design on how these should look and I’m trying to customize them. I haven’t found a better solution than to just change the underlying React code of the MFE. Is there something I’m missing?
repository and installing it on the images using a hook plugin that looks sort of like this:
from tutor import hooks
hooks.Filters.ENV_PATCHES.add_item(
(
"mfe-dockerfile-post-npm-install",
"""
RUN npm install '@edx/brand@git+https://github.com/name of your fork.git'
"""
)
)
Following that, build the mfe image and restart it or start -d to see your changes.
Thank you for the useful information. This seems like a better way to customize MFEs, but I don’t see how I can do development with this. If I am putting the link to the repo I forked, how could I locally change styles and immediately see the changes with this approach?
Hi @Muhamed_Cicak ,
Have you looked over the documentation for how to do local development on MFEs? You’ll essentially bind-mount your custom MFE directory. On that note, pay attention to the note at the bottom of the section: Note: the name of the bind-mount folder needs to match the name of the repository word-for-word. If you've forked an MFE repository with a custom name, be sure to change the name back to ensure the bind-mount works properly. In other words, your fork of the authn repo needs to be named frontend-app-authn.
Assuming you’ve enabled the plugin and done a tutor config save, you’ll need to rebuild the authn-dev image: tutor images build authn-dev, and then you can try tutor dev launch.
Hopefully you’ll be able to sort it out. Please do a search for bind-mounting MFEs/customizing MFEs in this forum. There have been other forays into documenting/understanding this, but it’s all spread out and hard to find in once place, plus it’s further confused by the fact that the process seems to have changed from version to version.
Thank you rediris. I’ve managed to do development with MFEs on dev environment, but now I want to deploy it on the server where I use the local environment. How would I go about it? Specifically, I’m trying to replace the default authn with my own. I tried adding a plugin like:
Hi @Muhamed_Cicak when bind-mounting an MFE locally, the changes are hot loaded in milliseconds to seconds, depending on your machine. It’s not like waiting for the openedx lms/cms to build.
Yes, this solution worked both for development and for local environment. For local environment I had to tutor images build mfe after adding the mounts but it works for both perfectly fine. Thank you and Mohamed for helping me out! Now the only issue I have is that learner-dashboard seems to be an exception, it does not work. I do the same steps but I get:
docker compose -f /home/silidrone/.local/share/tutor/env/local/docker-compose.yml -f /home/silidrone/.local/share/tutor/env/dev/docker-compose.yml --project-name tutor_dev up --remove-orphans -d
[+] Running 0/1
⠿ learner-dashboard Error 1.8s
Error response from daemon: pull access denied for overhangio/openedx-learner-dashboard-dev, repository does not exist or may require ‘docker login’: denied: requested access to the resource is denied
Error: Command failed with status 18: docker compose -f /home/silidrone/.local/share/tutor/env/local/docker-compose.yml -f /home/silidrone/.local/share/tutor/env/dev/docker-compose.yml --project-name tutor_dev up --remove-orphans -d
I opened up another topic for this but no one seems to answer it as there was a same topic about it unanswered for a long time now…
When running tutor in dev mode, rather than building the full MFE image, I found out you can build the individual MFE images like so: tutor images build learner-dashboard-dev - so, effectively the MFE name followed by -dev.
Hi, I would like to ask for a guidance on how to change the styles of login/learners dashboard page, I do:
- Fork https://github.com/openedx/brand-openedx
- Then create folder into ~/.local/share with the name of tutor-plugins and inside tutor-plugins I create custommfe.py and insert this command
hooks.Filters.ENV_PATCHES.add_item(
(
"mfe-dockerfile-post-npm-install",
"""
RUN npm install ‘@edx/brand@git+https://github.com/allenluna/VXI_Brand-OpenEdx.git’
“”"
)
)
then followed by tutor images build mfe, after running this command I encountered this error.
Hey @allen_luna,
The error you are facing is generating because you are building all the MFEs simultaneously which consume most of the resources. I think just try to first build with the authn MFE by changing this line mfe-dockerfile-post-npm-install to mfe-dockerfile-post-npm-install-authn and same for learner-dashboard. Not seems a better way, but this will build these two MFEs and rest of the MFEs builds will pick from cache.
