Running an MFE with tutor v16.1.1

Site Operators Tutor Help
1

Hi there!

I’m currently using Tutor version 16.1.1, and I’ve noticed a significant improvement in performance. However, I’ve encountered an issue while attempting to mount an MFE (Micro Frontend) for development. Specifically, I’m trying to achieve this with the frontend-app-communications repository.

Here’s the command I’ve been using to mount the MFE:

Like this:

tutor mounts add communications:$(pwd)/frontend-app-communications:/openedx/app

I had previously cloned the repository within my Tutor environment and installed all the required Node.js dependencies.

It seems that the container for the MFE is created successfully:

docker-ps-communications
docker-ps-communications1847×520 119 KB

But is not working for me, any idea? It may be an error mine.

mfe-communciaton-error
mfe-communciaton-error1844×1066 49.5 KB

I would greatly appreciate any advice or recommendations you might have regarding this issue

Thank you very much!

2

Hey @jvente! I’m going to have to try this out with frontend-app-communications over the next couple of days for other reasons, so feel free to ping me if nobody else is able to help in the mean time.

1 Like
3

What are the logs from the “communications” container?

4

Thanks @arbrandes I will ask you any update :smiley:

@regis the container restarts each some seconds so I can’t see the logs

5

You can see the logs by running tutor dev run communications.

6

Hi, These are the logs

image
image1687×748 148 KB

7

What’s the output of tutor dev run communications ls /openedx/app?

What’s the output of tutor mounts list?

8

Here the logs of both

image
image1699×475 84 KB

9

Let’s keep trying…

$ tutor dev run communications ls -l /openedx/app
$ tutor dev run communications ls -l /openedx/app/package.json
$ tutor dev run communications npm run npm run start --- --config ./webpack.dev-tutor.config.js
10

On it:

  • tutor dev run communications ls -l /openedx/app
  • tutor dev run communications ls -l /openedx/app/package.json

respectively

image1
image11720×832 176 KB

  • tutor dev run communications npm run npm run start — --config ./webpack.dev-tutor.config.js

image2
image21720×422 84.3 KB

11

Sorry, I should have written:

tutor dev run communications npm run start --- --config ./webpack.dev-tutor.config.js
12

No problem

image
image1699×883 172 KB

13

The fact that you are able to run tutor dev run communications npm run start --- --config ./webpack.dev-tutor.config.js but not tutor dev run communications baffles me. Because npm run start --- --config ./webpack.dev-tutor.config.js should be the exact same command executed in your container with tutor dev run communications.

I suspect an issue with Docker itself. Destroy the containers and networks and then attempt to run the MFE again:

tutor dev dc down
tutor dev run communications
14

Here we go:

image_1
image_11740×315 68.3 KB

image_2
image_21852×886 206 KB

It’s weird that the bundle looks like is ok, but in the url doesn’t work.

image_3
image_31852×886 52.2 KB

I think it’s something related to how the mfe is being redirected. I will be doing some tests as well

15

OK I think your issue is resolved. The communications port is not exposed because you are using tutor dev run and not tutor dev start. Just start your whole platform again with: tutor local start -d.

FTR, in the most recent version of tutor-mfe, you should not have to explicitely configure the mount location of the MFE. Just run:

tutor mounts add /path/to/frontend-app-communications

and it should auto-magically work.

1 Like