How to customize header and footer in devstack mfe

Development Design
, , ,
1

In devstack, I working with openedx nutmeg release 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. I figured out mfe header and footer comes from the below repo so i fork the header and footer repo

in the src folder and add the module.config.js file

module.exports = {
  /*
  Modules you want to use from local source code.  Adding a module here means that when this app
  runs its build, it'll resolve the source from peer directories of this app.

  moduleName: the name you use to import code from the module.
  dir: The relative path to the module's source code.
  dist: The sub-directory of the source code where it puts its build artifact.  Often "dist".
  */
  localModules: [
    // { moduleName: '@edx/brand', dir: '../src/brand-openedx' }, // replace with your brand checkout
    // { moduleName: '@edx/paragon/scss/core', dir: '../src/paragon', dist: 'scss/core' },
    // { moduleName: '@edx/paragon/icons', dir: '../src/paragon', dist: 'icons' },
    // { moduleName: '@edx/paragon', dir: '../src/paragon', dist: 'dist' },
    { moduleName: '@edx/frontend-component-header', dir: '../src/frontend-component-header', dist: 'src' },
    { moduleName: '@edx/frontend-component-footer', dir: '../src/frontend-component-footer', dist: 'src' },
  ],
};

in the frontend-app-learning folder and got an below error .

image
image1272×670 40.1 KB

any other way to customize my own header and footer in devstack or any other way like this so please guide me on what can I do…
Thanks in Advance :slightly_smiling_face:

2

Hello!

So there are a few things here.

The first thing I want to call out is that module.config.js only works in development - if you run npm run build to build the MFE, it won’t currently use module.config.js. It maybe should, but wasn’t built that way, unfortunately. For a production build, you need to ‘alias’ the header/footer using npm install.

Syntax: npm install <package-name>@<type>:<branded-package>

Examples:

# npm package
npm install @edx/frontend-component-header@npm:@edx/frontend-component-header-edx@latest

# git repository
npm install @edx/frontend-component-header@git:https://github.com/openedx/frontend-component-header-edx.git

# local folder
npm install @edx/frontend-component-header@file:../path/to/local/module

So once you finish development and want to do a prod build, do one of the above, and then run npm run build.

Regarding the error you’re seeing, it’s that the SCSS import of the footer SCSS has an incorrect path.

I think what you want to do is make your module.config.js include these two lines:

module.exports = {
  localModules: [
    // This line intercepts imports for the header's stylesheet and redirects them to the `src` directory of your local checkout of the header, which is where index.scss lives.
    { moduleName: '@edx/frontend-component-footer/dist', dir: '../frontend-component-footer', dist: 'src' },
    // This line catches JavaScript imports and points them at that same src directory.
    { moduleName: '@edx/frontend-component-footer', dir: '../frontend-component-footer', dist: 'src' },
  ],
};

You can have two lines like this, and that’s okay. It’ll let the SCSS use the first and locate the file it’s looking for, while the JS code will use the second to find its components. There was a thread from a couple years ago where we got this working: MFE header override - #14 by djoy

Let us know if it works!

3

And as a side note, there was documentation around this and it got lost recently. This issue documents the need to recover it: Add a How-To doc for overriding headers and footers in an MFE · Issue #272 · openedx/docs.openedx.org · GitHub

5

i did the same in the devstack local but this is not worked for me, got an same error.

6

Hello
in tutor, I working with lettest release Nutmeg 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'
"""
    )
)
7

Hi @Komal_Raval,
Check the tutor-custom-branding plugin. You can use it to easily change logos, fonts, and colors.
If you want deeper changes in your header or footer, yes you have to fork it. Then you can use BRANDING_FRONTEND_COMPONENT_HEADER_REPO and BRANDING_FRONTEND_COMPONENT_FOOTER_REPO variables to point to your repo.

8

@Andres.Aulasneo Your repository appears to be incredibly valuable. The features and content seem highly useful and well-crafted. Kudos to you and your team for creating such a resourceful repository.

But it seems it is not suitable for Quince at this time.

9

Hi @Yagnesh,
Thanks for your words! They are very stimulating.
No, it’s not ready for Quince yet, but soon it will be. Stay tuned for more updates!

10

Thanks for response.

Hello @Andres.Aulasneo ,

I have a theme already set in Tutor. After updating my Tutor version, the Learning MFE is now required. I want to change the fonts on the MFE pages to match the fonts in my theme.

I followed the steps mentioned in the readme file, but I’m stuck on the following command:

tutor branding download-fonts

I encountered the following error:

tutor branding download-fonts
*** Downloading fonts ***
Downloading font.zip from h to /home/komal/tutor_projects/olive_new/tutor_olive/env/build/openedx/themes/theme/lms/static/fonts
Error downloading font.zip: Invalid URL 'h': No scheme supplied. Perhaps you meant https://h?
...
with zipfile.ZipFile(os.path.join(dest_dir, filename), 'r') as zip:
  File "/usr/lib/python3.10/zipfile.py", line 1251, in __init__
    self.fp = io.open(file, filemode)
FileNotFoundError: [Errno 2] No such file or directory: '/home/komal/tutor_projects/olive_new/tutor_olive/env/build/openedx/themes/theme/lms/static/fonts/font.zip'

image
image1502×518 119 KB

Can you please assist?

Thanks in Advance :slightly_smiling_face:

11

Hi @Komal_Raval,
You should upload your fonts.zip to a public url, e.g., a public S3 bucket, and set the URL in the BRANDING_FONTS_URLS configuration. Adding fonts from a local file is not supported. If your font is public, you can use the public download link directly.

E.g.:

BRANDING_FONTS_URLS:
- https://fonts.google.com/download?family=Roboto
BRANDING_FONT_FAMILY: Roboto
12

Thanks @Andres.Aulasneo ,

I have one more question. I already have a custom theme set up. After enabling this plugin, a new theme is created automatically. According to the readme file, I also need to run the settheme command.

What should I do in this case?

13

The branding plugin is not compatible with custom themes. It will actually create a theme itself and replace any other.

14

Thanks @Andres.Aulasneo ,

Could you please suggest any other method to change the fonts of MFE pages if we have a custom theme?

15

Well… Branding MFEs is quite tricky. You can take a look at what the tutor-contrib-branding plugin does in env/plugins/mfe/build/mfe/brand-openedx/paragon/ and load the fonts in env/plugins/mfe/build/mfe/brand-openedx/fonts. Then patch the MFE image in a similar way.

Just for curiosity, what do you have in your theme? In every release more parts of Open edX move to MFE, so very little remains to be theme-able. There are some tricks in our plugin, and maybe I can help moving all your theme to the plugin.

16

Thanks @Andres.Aulasneo ,

In the theme, I’ve set up all the legacy pages’ HTML and CSS, which used to work fine with Nutmeg.
However, since upgrading to the Olive platform, only the Learning MFE is necessary, right? So, for the other pages, the theme is functioning as expected. Now, I aim to align the font changes in the Learning MFE with the theme.

Thanks once again for your help, I really appreciate it.

17

Legacy CSS can be managed with the tutor-contrib-branding, as it can change the contents of the _extras.scss file. Write your custom SCSS in a text file and then run tutor config save --set BRANDING_EXTRAS="$(cat my_scss_file)". Then rebuild your openedx image.

You can also modify MFE styles in a similar way by using the BRANDING_OVERRIDES variable, then rebuilding mfe.

If you have a custom certificate, you can use the BRANDING_CERTIFICATE_HTML variable to customize the HTML layout (see how it works)

18

okay thanks @Andres.Aulasneo .

1 Like