[image] MFE Re-writing progress Headers and footers - In some MFEs, can be customized by forking the frontend-component-header or frontend-component-footer repositories So we’ve been trying to do this, but running into issues. Wondering if there are any gotchas, version incompatibilities, etc…

@djoy or @kmccormick Can you help with this issue? Since edX is using the edx-frontend-component-header-edx fork, we figured that following the docs would Just Work™, but it didn’t :frowning:

I think the issue here is that when you install the package from npm, it is the compiled version of the package, and has a ‘dist’ folder with the compiled assets. The git repo doesn’t have this folder so it won’t work the same way. Here is one thing you can do: Clone the git repo to a directory R…

Thanks @xitij2000 . The git repo doesn’t have this folder so it won’t work the same way. I see two problems with the assumption of this restriction: the official docs mention installing from git, npm, and local directory, so this use case should be supported. what’s special about the build proc…

[image] samuelallan: 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 wo…

Late to the conversation, but I think @xitij2000 is right. Without the build step, the dist directory won’t exist for most libraries and so it won’t be able to find the assets. If you’re pointing at a release tag on Github, it’s possible it works since Github has the built assets associated with t…

Maybe it would be a good idea to add by default a “prepare” script in the package.json file with something like: "prepare": "npm run build", The prepare script is run when the package is installed through git. https://docs.npmjs.com/cli/v7/using-npm/scripts#life-cycle-scripts With that change, …

[image] morenol: The prepare script is run when the package is installed through git. scripts | npm Docs Oh yes, that looks like it would be perfect! I knew there must be something like that, otherwise it wouldn’t be possible to install most packages from git or local filesystem. :+1: [i…

@samuelallan Adding a prepare script might solve the issue when installing from git, but that will not solve the following problem: [image] samuelallan: But how can we do local development and testing on this? We don’t want to publish a new npm package every time we want to test changes locally…

Hi Folks! I am trying to install the header component for the Account MFE. I am working with a lilac.2 devstack, the account MFE is also checked out for lilac.2. I have cloned the header component repository, checked out v2.2.4, ran npm install and npm run build in that repo. I installed the compo…

Hi @mrtmm , did you run the extra npm steps in this post? MFE header override - #5 by xitij2000 It doesn’t show the same error you’re seeing, but it does talk about how to get around issues when trying to build frontend header overrides in local dev environments.

MFE header override

Development

Komal_Raval (Komal Raval) November 21, 2023, 12:56pm 17

can please share the standard way to customize the header and footer
with the steps so it is easy to customize?
started one discussion for that

Topic		Replies	Views
[MFE] 2024 and I still can't override header and footer Site Operations Help how-to , tutor , mfe , tutor-mfe , palm	9	474	March 16, 2024
How to build production MFE frontend-component-header Development tutor , tutor-mfe , tutor-plugin	1	385	December 4, 2023
How to customize header and footer in devstack mfe Design how-to , devstack , tutor , nutmeg	16	1338	May 24, 2024
MFS override frontend-component-header Development how-to	1	848	March 27, 2023
MFE Local Development Setup Development	2	949	December 24, 2020

MFE header override

Related topics