Home How to Customize and Install Tutor OpenEdX Micro-Frontend (MFE) with Example for frontend-app-authn?

Questions

How to Customize and Install Tutor OpenEdX Micro-Frontend (MFE) with Example for frontend-app-authn?

August 27, 2024

I’m working on a Tutor OpenEdX instance and want to customize and install a Micro-Frontend (MFE). Specifically, I’m focusing on the frontend-app-authn MFE. I’m relatively new to working with OpenEdX MFEs and need some guidance on the best practices for customizing and installing an MFE within Tutor.

Installed Tutor: I’ve successfully set up Tutor and the OpenEdX platform.
Cloned the MFE repository: I’ve cloned the frontend-app-authn repository from GitHub.
Basic Customization: I made some basic customizations in the cloned MFE repository (e.g., modifying CSS and text).

Mounting the MFE: How do I correctly mount the customized frontend-app-authn MFE into my Tutor OpenEdX instance? Is there a specific configuration file or command that I need to modify or run?

Building the MFE: What are the steps to build the customized MFE so that it can be deployed? Do I need to use a specific build command or tool?

>Solution :

Mounting and installing frontend-app-authn Apps Details:

create one custom folder
    .../tutor#  mkdir tutor/env/custom_mfe_apps
    .../tutor#  cd tutor/env/custom_mfe_apps/
    .../tutor/tutor/env/custom_mfe_apps# git clone https://github.com/openedx/frontend-app-authn.git
    .../tutor# tutor mounts add tutor/env/custom_mfe_apps/frontend-app-authn/
Then check in config.yml 
     MOUNTS: 
       - /home/XXXX/Desktop/Ricesmart-new/tutor/tutor/env/custom_mfe_apps/frontend-app-authn
    .../tutor# tutor images build mfe
    .../tutor# tutor local launch

Reference https://overhang.io/tutor/plugin/mfe

Custom Reference https://app.simplenote.com/p/pg8TPN