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'
"""
    )
)