Tutor MFE custom theme/styling help

Site Operators Tutor Help
, ,
1

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

And a few threads on similar issues:

Here’s what I did:

Creating a new plugin and adding a patch:

  1. Created a new plugin with this patch:
from tutor import hooks

hooks.Filters.ENV_PATCHES.add_item(
    (
        "mfe-dockerfile-post-npm-install",
        """
RUN npm install '@edx/brand@git+<my remote repository>'
"""
    )
)
  1. Push changes to remote repository
  2. Making sure that I have my plugin listed and enabled
tutor plugins enable <myplugin>
  1. Check tutor root config.yml to make sure the new plugin is included.
  2. 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:

  1. Fork and clone from overhangio/tutor-indigo
  2. Remove the entire mfe patch from tutorindigo/plugin.py
  3. Run tutor mounts add <path to local tutor-indigo>*
  4. Run tutor config save

Setting up openedx/brand-openedx

  1. Fork and clone from openedx/brand-openedx
  2. Replace the logos with my own, and making sure the names stay the same.
  3. Modify _overrides.scss:
#root .learner-variant-header {
    background-color: #9e1b34;
}
  1. Run tutor config save
  2. Run tutor images build --no-cache --no-registry mfe (Pain in the ass building with just single CPU otherwise it would fail)
  3. 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.
  4. 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

2

Hi @Tidbit0519, welcome to the forum!!

Many things can happen, but I point out two to start:

  • You do not tutor mounts add tutor plugins. You just pip install them and tutor plugins enable.
  • Mounting makes sense only in dev, not in local.

Branding Open edX is always a tricky task. Check out our branding plugin, which may help you with most of these tasks, or may inspire your own plugin.

Hope it helps!

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’m using tutor-contrib-branding v18.6.0

4

I am getting the same error.