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

Development Design
, ,
1

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.

2

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
4

Hi @hinakhadim , I was able to see my styles changes following your setup. But the logos are still using indigos. Is there a way for it to use my custom logos in the brand-openedx?

5

Hi @Tidbit0519,

edx-brand package updates the styles only. To update the logo, you have to use a custom theme plugin like tutor-indigo. When you will create your theme plugin, do the following:

  • In **custom-theme**/templates/**customtheme**/lms/static/images/ folder, add your logo with filename logo.png and footer_logo.png.
  • Run command to set this theme as new theme. Refer to docs

If you have questions, feel free to ask.

6

Thanks for the reply @hinakhadim ! I was able to change the logo in dev following this https://github.com/overhangio/tutor-indigo?tab=readme-ov-file#customization

7

Could you confirm the correct way to do this?

I’ve tried mounting the brand package with tutor mounts add /path/to/brand-customized, however when I pull up the MFE (tutor dev start learning), I get the following:

learning-1  | Resolving modules from local directories via module.config.js.
learning-1  | Using local version of @edx/brand from ../brand-customized/.
learning-1  | Error: Cannot find module '/openedx/brand-customized/package.json'

I do have a package.json in my local brand directory, so I suspect the mount point was set incorrectly.

8

Hi @haha ,
Please try these steps:

  1. For mount, run tutor mounts add learning:/absolute-path/to/brand-customized:/openedx/brand-customized
  2. make sure module.config.js (in learning-mfe) should have following:
module.exports = {
    localModules: [
      { moduleName: '@edx/brand', dir: '../brand-customized'  },
    ],
};
  1. Run tutor dev start learning

Feel free to let me know, if this wouldn’t work for you.

1 Like
9

Thank you so much! That did the trick. :pray: