Help with custom frontend changes in frontend-component-header (Tutor v18 local)

Hi everyone,

I’m new to Open edX and working with Tutor version 18 / Redwood. I’m trying to hide the help link in the header by customizing the frontend-component-header repo. Here’s what I’ve done so far:

  1. Cloned the latest frontend-component-header repo and commented out the code for the help link (LearningHelpSlot) in the LearningHeader.jsx file as well as the import
  2. Published my repo as an npm package.
  3. Installed the package using a custom plugin.
from tutor import hooks

hooks.Filters.ENV_PATCHES.add_item(
    (
        "mfe-dockerfile-post-npm-install",
        """
# npm package
RUN npm install '@myusername/frontend-component-header'
"""
    )
)

Plugin is enabled as you can see here: Screenshot-2025-01-14-at-12-28-27-PM hosted at ImgBB — ImgBB and, I also ran tutor config save. I double checked and can also see that my RUN npm install command has been added to the Dockerfile.

  1. Then I ran the following commands to build and launch:
tutor images build openedx mfe --no-cache
tutor local launch

The issue is that the changes I made to the header aren’t reflecting on the site. Image here: Screenshot-2025-01-14-at-12-32-33-PM hosted at ImgBB — ImgBB

The help link is still visible, and I didn’t see any error messages while it was building. Am I missing a step in applying frontend changes? Do I need anything else set up?

Any advice or pointers would be greatly appreciated!

First of all, the “new” way to customize this specific slot is documented in the README for LearningHelpSlot. You only need to put your custom code into env.config.jsx for whichever MFE (e.g. Learning MFE) you want to customize.

What you are doing instead is replacing the whole header with a custom header, which is also perfectly fine. Here’s what I think the problem is: The only step you are missing is to use the new header. As it stands, both the default @edx/frontend-component-header and your custom @username/frontend-component-header are installed, but the MFE will be using the default @edx version. You can resolve this by changing the npm install command in your plugin to an alias command like npm install '@edx/frontend-component-header@npm:@myusername/frontend-component-header'