MFE header override

[xitij2000 (Kshitij Sobti (OpenCraft) — https://opencraft.com/help)]

@swalladge

the official docs mention installing from git, npm, and local directory, so this use case should be supported.

I’m afraid the official docs might be wrong in this case. The mechanism they outline is correct, but the way these components are imported means that it won’t work without running he build step first.

@swalladge

what’s special about the build process such that npm can’t build it properly when installing from git source? This is the first package where I’ve experienced it failing to run when installed from git.

When you install a package from the npm registry it downloads a pre-built package which contains only the compiled assets. You can see this here from the package for the header component: https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-2.2.7.tgz

For local development here is what you can do:

1. You can use local module overrides to override the location is looks for the header component: GitHub - openedx/frontend-build: Common build scripts and tooling for Open edX micro-frontends.
   OR
   You can use npm aliases to get the same effect. Clone the frontend app you want to work with and frontend-component-header in your projects folder. Go to the frontend app folder, and install your local copy of the header component by running npm install '@edx/frontend-component-header@~/projects/frontend-component-header'
2. Run npm install in the frontend-component-header directory.
3. Run npm run build in the frontend-component-header directory.
4. Run npm start in the frontend app directory.

If you change the frontend component, you will need to run npm run build in that directory again. One way around this is to temporarily modify the SCSS and JavaScript imports so that the component is loaded from the src directory instead of dist.