How to customize header and footer in devstack mfe

Development Design
, , ,
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!