Problems applying Customised MFE libraries (eg "frontend-platform") to a production Open edX platform (using "tutor local")

Site Operators Tutor Help
,
22

With the Palm release there are some changes in the process of mounting the MFEs for being able to see live changes, and my previous tutorial doesn’t cover it (it covers up to Olive release) so, when I have some time, I will update this part or anything else might come to my attention that works differently.

23

Hello again @arbrandes !
It’s been a while, but only lately I managed to find the time to check this ( mfe-dockerfile-post-npm-install-learning), but I didn’t manage to make it work as well due to errors while building the mfe image after creating the plugin that makes my MFEs to use my custom frontend-app-footer (and header)…

My plugin looks like this:

from tutor import hooks
hooks.Filters.ENV_PATCHES.add_items(
    [
        (
            "mfe-dockerfile-post-npm-install-learning",
            """
    RUN npm install '@edx/frontend-component-footer@git+https://github.com/dagg/frontend-component-footer.git#dagg_palm2_master'
    """
        ),
        (
            "mfe-dockerfile-post-npm-install-account",
            """
    RUN npm install '@edx/frontend-component-footer@git+https://github.com/dagg/frontend-component-footer.git#dagg_palm2_master'
    """
        ),
    ]
)

In this particular one I make the frontend-app-learning and frontend-app-account to use the frontend-component-footer from my dagg_palm2_master branch which I derived from the master branch of the forked frontend-component-footer.
I have tried also with another branch I created from the V12.0.0 Tag (among others) but still I got the same errors while running tutor images build mfe …

I am not sure what’s wrong with it exactly but it doesn’t seem to me like a dependency problem rather than a problem with the building process that doesn’t find certain things.
I might be mistaken though since my knowledge with npm and whatever is involved in building a project with dependencies is quite limited.

I have the whole error trace in the following github gist:

https://gist.github.com/dagg/bba31898169a1a36e6088b770637ac10

I hope it’s something trivial that can be easily corrected!

Any suggestions?

@regis

24

After the Olive edition things have changed a bit on the way to mount the forked frontend-app-* MFEs so I thought, just for the people who might need it, I post the new way to do it here:
(it is briefly mentioned here: https://github.com/overhangio/tutor-mfe#mfe-development )

From my previous guidelines above, what needs to be dome differently follows after we fork locally one of the MFEs, for example the frontend-app-learning, and after we run npm install in the forked MFE folder, in order to make our dev platform to mount it so we can see the live changes as we we must put it in the MOUNTS list the following way (if let’s say the forked MFE is in the folder ‘/home/user/forked_mfes/frontend-app-learning’):

We have to run the following:

$ tutor mounts add /home/user/forked_mfes/frontend-app-learning
$ tutor dev launch

(“tutor images build mfe” might be also needed before running “tutor dev launch”. I’m not sure right now though, I will check it and if needed correct it here)

To verify that the MFE’s path is added to the MOUNTS list we can either run:

$ tutor config printvalue MOUNTS

or for a bit more comprehensive output:

$ tutor mounts list

(case of “mounts”/“MOUNTS” is important in both commands above)
then we can proceed in editing the code and see the results in out dev environment.

Afterwards, when we need these channges to be applied to our production environment, instead of running: tutor config save --set "MFE_LEARNING_MFE_APP={......}" we only need to clone our edited MFEs as previously and add them in the same way to our MOUNTS list just like in the dev environment, and then run:

$ tutor images build mfe

and then:

$ tutor local launch

This will make the platform to get and build the MFEs that are in our MOUNTS list instead from their original location in Open edX repositories.

That’s all that has changed as far as I can tell.

I’m still struggling to find the way to make changes to the frontend-component-header/footer though, if anyone has any solution on that matter I’d be grateful!

I hope that helped!

3 Likes