Mounted MFEs with node_modules missing fail to start the server

DawoudSheraz commented 4 months ago

This issue is a similar issue to https://github.com/overhangio/tutor/issues/997. The steps to reproduce are:

Installed latest tutor master or nightly
Clone any MFE repo (authn, learner-dashboard, etc.) and check out its appropriate branch (open-release/redwood.master if latest tutor master, master if tutor nightly)
Add the cloned MFE as a bind mount
Re-build mfe-dev images
Run platform. Verify the mounted-MFE container runs into the error fedx-script not found
Run npm install within cloned MFE repo on the host. Once installed, MFE dev container should be up and running.

Like the mentioned issue in tutor core, the bind-mounted MFE during image build does not get node_modules copied back to host. When running tutor, the host MFE directory without node_modules overrides the installed node_modules within image, thus resulting in fedx-script not found.

Add a similar fix as core issue i.e. if node_modules are not found in MFE directory, run npm clean-install to install the required dependencies
- If there is another fix, feel free to suggest it.

hinakhadim commented 3 months ago

I conclude to two solutions:

Solution 1:

While mounting, add this line in the volume: /openedx/app/node_modules. This line will make node_modules a volume (It won't call binding). Link to StackOverflow

authn: # Work on this MFE for development
      image: "docker.io/overhangio/openedx-authn-dev:18.0.0"
      ...
      volumes:
          - ../plugins/mfe/apps/mfe/webpack.dev-tutor.config.js:/openedx/app/webpack.dev-tutor.config.js:ro
          - /host-machine-path/.../frontend-app-authn:/openedx/app
          - /openedx/app/node_modules             # here, we're ignoring node_modules
      ...

Pros:

When mounting /openedx/app, node_modules won't get overridden/mounted; in other words, we ignore the node_modules folder in the mounting process.
The host machine doesn't need to install node_modules separately.
The volume will persist; if you stop and restart the container, the volume won't get deleted.
The volume gets deleted automatically when the container is deleted (tested).

Cons:

To install a new package, users must install it in the container. Running npm i package-name won't work if it is done in the host-machine.
If the mounted package.json has different dependencies than those at image build time, users need to run npm i in the container by themselves.

Solution 2:

As @DawoudSheraz mentioned this method above, we can install node_modules in the host machine project folder after the mounting process (this is binding; we are binding our host machine files to container files).

Pros:

Users don't need to run npm i after the mounting process because the dependencies will be installed from the package.json of the user's forked project.

Cons:

Separately install node_modules after the mount process through the job/task in host-machine.

Feel free to share if you have any other method to tackle this thing.

DawoudSheraz commented 3 months ago

@hinakhadim For solution 1, when will the very first install after the mount happen? Will it be done manually inside container?

hinakhadim commented 3 months ago

@hinakhadim For solution 1, when will the first install after the mount happen? Will it be done manually inside container?

Solution 1 flow:

Tutor is installed
User clones the MFE and mounts it
User runs tutor dev start
Now, there are two cases:
- If the packages mentioned in package.json of the cloned repo are similar to packages mentioned in package.json of openedx/frontend-app-* . Then, the container will start successfully.
- If the packages are different, the container will start but will give the error "missing x module"

By using solution 1, we will not face fedx-scripts not found error. In volumes, the line /openedx/app/node_modules ignores node_modules mounting. It means the whole app will mount to /openedx/app and node_modules folder will not mount. As a result, installed node_modules (from the MFE image) will be used.

Solution 2 flow:

Tutor is installed
User clones the MFE and mounts it
During the mounting process, the script will install node_modules by running npm install in cloned repo.
User runs tutor dev start and the MFE container will be up.

@arbrandes @regisb any suggestions are highly appreciated.

regisb commented 3 months ago

I think the answer is to run npm clean-install as part of run tutor dev launch. One "mfe" init tasks could take care of running that command, as it is done in the LMS: https://github.com/overhangio/tutor/blob/master/tutor/templates/jobs/init/mounted-directories.sh

overhangio / tutor-mfe