How to customize header and footer in tutor mfe

in tutor, I working with lettest release Olive and now I want to need some changes in the header and footer which will come for mfe like the courses page, Discussion, profile and so more. so I figured out tutor mfe header and footer coms from this repo so I need to fork this below repo and do changes is there any other way to customize my own header and footer or any plugin way like this so please guide me on what can I do. Thanks in Advance :slightly_smiling_face:

from tutor import hooks

hooks.Filters.ENV_PATCHES.add_item(
    (
        "mfe-dockerfile-post-npm-install",
        """
# npm package
RUN npm install '@edx/frontend-component-header@npm:@edx/frontend-component-header-edx@latest'
# git repository
RUN npm install '@edx/frontend-component-footer@git+https://github.com/edx/frontend-component-footer-edx.git'
"""
    )
)

the issue is resolved.

How to change the footer and header color using @edx/brand package in tutor

  1. Fork @edx/brand package and make the changes:

file _overrides.scss (for example to change the background color in header use class)

.site-header-desktop , .learning-header{
  background: #B6AEE1 !important;
}

_variables.scss (for example to change the background color in footer use variables)

$gray-footer: #B6AEE1;

To make the changes you need to be aware of how files are imported in the MFE apps and what code you want to override, also you can delete files you don’t need. for example, all the images.

  1. Create a plugin to install the package:
    hooks.Filters.ENV_PATCHES.add_item(
    (
    “mfe-dockerfile-post-npm-install”,
    “”"
    RUN npm install ‘@edx/brand@git+https://github.com//brand.git’
    “”"
    )
    )
  2. run commands tutor config save and tutor images build mfe
  3. run tutor local start and you have to see your changes.

How to change the footer and header using a fork (production)

  1. Fork the header and footer repo and run npm ci or npm install
  2. Make your changes
  3. run npm build to generate the dist folder
  4. create an npm custom package to publish that dist folder or create a branch in the repo that only contains the files for the dist folder.
  5. create a tutor plugin to install the footer or header that contains the distribution files.
  6. build the mfe image
  7. restart your instance to see the changes.

How to test or develop the footer and header, or any dependency using a fork (dev)

You can follow other posts to do that:

I left my explanation here to make it visible for anyone in the community.

1 Like

it is very useful everyone can try it If need to customize the header & footer and also customize related mfe.i also try this all way and all of us work for me for a couple of days ago.

Hola disculpa tengo el mismo problema, si no es mucha molestia como lo pudiste resolver ? Estoy intentando modificar mi encabezado y pie de página pero aún no encuentro la forma, agradecería tu apoyo

Hola @Yibran_Vazquez , el comentario de arriba https://openedx-uploads-dedalo.s3.amazonaws.com/cssvars/d84c6f6c-e9cf-4677-884d-b301deb8c411.css tiene algunas indicaciones, trata de seguir los pasos y ver si te funciona.

Saludos.

@Yibran_Vazquez can u please use the English language so we can understand your problem and give u an answer?

Hello. This is the closest post related to my question so far, so I would like to ask it still. Same principle of editing the tutor mfe header and footer, I want to edit tutor mfe payment template.

This is the page where it goes to upon processing payments https://apps.local.overhang.io/payment

Hi @Engr_James_Lusuegro,

The thing that you want to achieve is to modify the code in the MFE, right?

I haven’t worked with other tutor plugins, and hopping I understand your question correctly, the steps that you should follow are these ones How to set your custom fork repo of mfe discussion app changes on tutor

You have to be aware of some things:

  1. You need to fork and modify GitHub - openedx/frontend-app-payment
  2. This is added by tutor-ecommerce no tutor-mfe tutor-ecommerce/tutorecommerce/plugin.py at master · overhangio/tutor-ecommerce · GitHub then I guess using ECOMMERCE_PAYMENT_MFE_APP in the config.yml you should be able to add your custom mfe.
  3. I guess you have to rebuild both images after applying your changes.

instead of these whole steps just do it below and set it according to it. use the CLI instead of editing config.yml directly

tutor config save --set MFE_LEARNING_MFE_APP="{'name': 'learning', 'repository': 'https://github.com/openedx/frontend-app-learning', 'version': 'master', 'port': 2000}"

and the rest things u should follow with @dcoa’s answer.

1 Like

can please share the standard way to customize the header and footer
with the steps so it is easy to customize?
and also share the production-based steps for the same.
started one discussion for that

@Komal_Raval The problem is already solved please follow the above steps exactly.

can not understand the steps needed to create a plugin and push the both header and footer in the personal repository?

@Komal_Raval To create a plugin u should follow these documents

here we fork the header and footer repo form openedx for our own customization.

you can also follow brand-edx

@Yagnesh I just want to know what is the standard way is there any other way we have for the header and footer customization or not please say cause I need to implement it on the production so asking

and please send me the plugin content so I can get a better idea of what I need to add to the plugin.

and repository of header and footer no need to clone right only add both in our private repo for development and need to add this in the plugin it takes automatically and installs the same.

thanks for the suggestion.

Hi @dcoa

Hi @Yagnesh ,

I just want to customize the login page of authn mfe and learners dashboard: I do the following instruction by:
1: Fork the GitHub - openedx/brand-openedx, and push it to my own github resporitory.

  1. create my mfe file in .local/share/tutor-plugins, inside this folder I create custommfe.py and inside that file I do

from tutor import hooks

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’
“”"
)
)

And enabled it as a plugins, followed by tutor config save

3: and do the styles in _override.scss

I just want to customized this. Change the color of buttons and backgroud, but nothing change after run tutor images build mfe and tutor local start -d

Hi @allen_luna

I have a couple of questions:

  1. Could you tell me which version are you testing (palm, olive, quince, …)?
  2. After the tutor config save, do you build the mfe image?

Hi @dcoa ,

tutor v17.0.2. I think this is quince
Yes I build tutor images build mfe

Hi, I encountered error of how to customize mfe I am using tutor v17.0.2.

inside my mymfecustom.py I do: because of this docs GitHub - overhangio/tutor-mfe: This plugin makes it possible to easily add micro frontend (MFE) applications on top of an Open edX platform that runs with Tutor.

after tutor config save followed by tutor images build mfe I encounter error:

=> ERROR git://github.com/allenluna/VXI_Brand-OpenEdx.git#open-release/quince.2 0.6s
=> CACHED git://github.com/openedx/frontend-app-profile.git#open-release/quince.2 0.6s
=> CACHED [base 1/4] FROM Docker 0.1s
=> => resolve Docker 0.1s
=> CACHED git://github.com/openedx/frontend-app-ora-grading.git#open-release/quince.2 0.6s
=> [internal] load build context 0.0s
=> CACHED git://github.com/openedx/frontend-app-learning.git#open-release/quince.2 0.6s
=> CACHED git://github.com/openedx/frontend-app-learner-dashboard.git#open-release/quince.2 0.6s
=> CACHED git://github.com/openedx/frontend-app-gradebook.git#open-release/quince.2 0.6s
=> CACHED [production 1/13] FROM Docker 0.1s
=> => resolve Docker 0.1s
=> CACHED git://github.com/openedx/frontend-app-discussions.git#open-release/quince.2 0.6s
=> ERROR git://github.com/openedx/frontend-app-course-authoring.git#open-release/quince.2 0.1s
=> ERROR git://github.com/openedx/frontend-app-communications.git#open-release/quince.2 0.0s
=> ERROR git://github.com/openedx/frontend-app-account.git#open-release/quince.2 0.0s
=> ERROR git://github.com/openedx/frontend-app-authn.git#open-release/quince.2 0.0s
=> [production 2/13] RUN mkdir -p /openedx/dist 0.2s

git://github.com/allenluna/VXI_Brand-OpenEdx.git#open-release/quince.2:



git://github.com/openedx/frontend-app-course-authoring.git#open-release/quince.2:



git://github.com/openedx/frontend-app-communications.git#open-release/quince.2:



git://github.com/openedx/frontend-app-account.git#open-release/quince.2:



git://github.com/openedx/frontend-app-authn.git#open-release/quince.2:


ERROR: failed to solve: failed to load cache key: repository does not contain ref open-release/quince.2, output: “”
Error: Command failed with status 1: docker buildx build --tag=docker.io/overhangio/openedx-mfe:17.0.0-indigo --no-cache --output=type=docker --cache-from=type=registry,ref=docker.io/overhangio/openedx-mfe:17.0.0-indigo-cache /home/itechadmin/.local/share/tutor/env/plugins/mfe/build/mfe

This customization is to add a new MFE or override one or more of the default MFE.

What you are doing first was right.

Let me test it and let you know.