Hi, I know topics about MFE have been brought up many times before, but I am just going to start a new post because most of them are already closed.
I am trying to customize the theme on my MFE plugins by adding my own logo and changing some styles from a remote repository, but I haven’t been able to get my changes to work.
I have been trying to follow the instructions from
from tutor import hooks
hooks.Filters.ENV_PATCHES.add_item(
(
"mfe-dockerfile-post-npm-install",
"""
RUN npm install '@edx/brand@git+<my remote repository>'
"""
)
)
Push changes to remote repository
Making sure that I have my plugin listed and enabled
tutor plugins enable <myplugin>
Check tutor root config.yml to make sure the new plugin is included.
Check tutor plugins list to make sure the new plugin has the version pointing to my local directory where the new plugin .py file is.
Setting up tutor-indigo
I think these npm install commands are overwriting my custom new plugin patch based on what I found in my docker build logs when I’m rebuilding the mfe images. They ran after my npm install openedx/brand-openedx
RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.1.1'
RUN npm install '@edx/frontend-component-header@npm:@edly-io/indigo-frontend-component-header@^3.1.3'
RUN npm install @edly-io/indigo-frontend-component-footer@^2.0.0
Here’s what I did:
Fork and clone from overhangio/tutor-indigo
Remove the entire mfe patch from tutorindigo/plugin.py
Run tutor mounts add <path to local tutor-indigo>*
Run tutor config save
Setting up openedx/brand-openedx
Fork and clone from openedx/brand-openedx
Replace the logos with my own, and making sure the names stay the same.
Run tutor images build --no-cache --no-registry mfe(Pain in the ass building with just single CPU otherwise it would fail)
Check my docker build logs, and it did run npm install '@edx/brand@git+<my remote repository>,', and the mfe patches I removed from tutor-indigo are not in the logs.
Run tutor local launch
However, my local instance still shows the default indigo theme and logos. Am I missing something? I’m running tutor v18.1.3
Thanks for the reply @Andres.Aulasneo! Does it support the latest release of tutor redwood 18.1.3? I tried installing and enabling plugin and I ran into this error:
Error applying filter: func=<function _add_my_mfe at 0x106d11da0> contexts=['plugins', 'app:branding']'
Error rendering patch 'openedx-cms-development-settings':
# MFE-specific settings
{% if get_mfe("course-authoring") %}
COURSE_AUTHORING_MICROFRONTEND_URL = "http://{{ MFE_HOST }}:{{ get_mfe('course-authoring')["port"] }}/course-authoring"
CORS_ORIGIN_WHITELIST.append("http://{{ MFE_HOST }}:{{ get_mfe('course-authoring')["port"] }}")
LOGIN_REDIRECT_WHITELIST.append("{{ MFE_HOST }}:{{ get_mfe('course-authoring')["port"] }}")
CSRF_TRUSTED_ORIGINS.append("http://{{ MFE_HOST }}:{{ get_mfe('course-authoring')["port"] }}")
{% endif %}
Error rendering template apps/openedx/settings/cms/development.py
Error: Project root does not exist. Make sure to generate the initial configuration with `tutor config save --interactive` or `tutor local launch` prior to running other commands.
And it wouldn’t even let me run tutor plugins list or tutor local launch (it went back to normal after I pip uninstall it again):
Error applying filter: func=<function _add_my_mfe at 0x1040b6700> contexts=['plugins', 'app:branding']'
Error applying action: func=<function _mounted_mfe_image_management at 0x1040f04a0> contexts=['plugins', 'app:mfe']'
Error applying action: func=<function _enable_plugins at 0x1037da160> contexts=[]'
Error: Project root does not exist. Make sure to generate the initial configuration with `tutor config save --interactive` or `tutor local launch` prior to running other commands.
I really appreciate the steps you’ve taken so far! Let me explain things in a bit more detail—I hope this will be helpful.
Changing Logos:
You can replace your logo by placing it at this path: tutorindigo/templates/indigo/lms/static/images.
Here’s an article that explains what you can customize with Tutor Indigo: Logos and Images Alterations.
Installing the Plugin:
You can install a custom theme with the following command:
pip install custom-theme
Regarding styling, there are two parts you need to know:
LMS Legacy Pages: These are styled through Tutor Indigo. Here’s more about adjusting styles: Sass Styles Adjustments.
MFEs (Micro-Frontend): The MFEs use the edx-brand package for styling. You can install it like this:
RUN npm install '@edx/brand@npm:@edly-io/indigo-brand-openedx@^2.1.1
If you want to install your own brand package, replace this line in Tutor Indigo:
npm install indigo-brand-openedx
with your custom package installation.
I’m not entirely sure if you’re referring to style changes in the MFEs or the LMS legacy pages. Could you please clarify? That way, I can assist you better!
For favicon, make sure you added a file with name favicon.ico in tutorindigo/templates/indigo/lms/static/images folder. Install the theme updated version and run tutor config save. Then rebuild openedx image.
There’s no way better to build mfe images other than max parallelism set to 1 in my opinion.
In Redwood, the learner-dashboard mfe used its header component instead of the @edx/frontend-component-header package. In Sumac, I’m expecting the header package for the learner dashboard, and styling issues for the dashboard header will be gone.
Sorry, let me clarify. My favicon.ico did update for the LMS Legacy Pages, but whenever I switch over to MFE pages, the favicon will revert to indigo’s.
The tutor-mfe repo explained a way to change the logos and favicon for the MFE pages here, Customising MFEs.