How to use @edx/brand in local development and production

Hi all,
Tutor version: Redwood 18.1.0

I am using a fork of the authn mfe.
I am trying to make changes to the mfe styles. When I add the link of @edx/brand repo in the indigo theme plugin it works, but when I do the same in a custom plugin hook, it doesn’t work.

This is what the plugin looks like:

from tutor import hooks
hooks.Filters.ENV_PATCHES.add_items(
    [
        (
            "mfe-dockerfile-post-npm-install-authn",
            """
    RUN npm install '@edx/brand@git+https://github.com/.../brand-openedx.git#branch_name'
    """
        ),
    ]
)

Additionally, I want to be able to create a setting where I can make changes to the brand package locally and see the changes immediately in the tutor dev mode. Is there a way achieve this?

I also tried to use a local checkout of the brand package as mentioned here. This works but only for the tutor local and not for tutor dev. The commands also show up when I build authn-dev images, but no change to styles of mfe when i do tutor dev start.

Hello @Faizan_Shaikh ,

Please tell me more about which custom plugin hook you are using and how you are using it.

Yes, it is possible to change the brand package locally and see the changes immediately in the tutor dev mode. Follow the steps for this:

  • Clone your MFE code and brand-openedx repo in the same folder
main-folder
     |________brand-openedx
     |
     |________authn-mfe
  • Mount your authn-mfe code to /openedx/app and brand-openedx to /openedx/brand-openedx
  • Now, in your authn-mfe folder, add the file name module.config.js and add the below content:
   module.exports = {
    localModules: [
     { moduleName: '@edx/brand', dir: '../brand-openedx'  },
    ],
  };
  • Then start tutor dev start authn and make changes to brand-openedx. Those will reflect automatically.
  • Sometimes, changes won’t reflect as your page will show the cached version. In this case, you can run tutor dev restart authn and simply reload the page. My recommendation to you is to use incognito mode of browser.
1 Like

Can you explain the second step in more detail, please