[Tutor] Fails when build mfe images

[the_tan_Nguyen]

Hi Everyone,

I keep failing with tutor images build --no-cache mfe:

The error in text:

[course-authoring-common 3/5] RUN --mount=type=cache,target=/root/.npm,sharing=shared npm clean-install --no-audit --no-fund --registry=https://registry.npmjs.org/:
#0 128.7 npm notice
#0 128.7 npm notice New patch version of npm available! 10.2.3 → 10.2.5
#0 128.7 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.5
#0 128.7 npm notice Run npm install -g npm@10.2.5 to update!
#0 128.7 npm notice
#0 128.7 npm ERR! code ETIMEDOUT
#0 128.7 npm ERR! syscall read
#0 128.7 npm ERR! errno -110
#0 128.7 npm ERR! network read ETIMEDOUT
#0 128.7 npm ERR! network This is a problem related to network connectivity.
#0 128.7 npm ERR! network In most cases you are behind a proxy or have bad network settings.
#0 128.7 npm ERR! network
#0 128.7 npm ERR! network If you are behind a proxy, please make sure that the
#0 128.7 npm ERR! network ‘proxy’ config is set properly. See: ‘npm help config’
#0 128.9
#0 128.9 npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2023-12-20T14_07_59_480Z-debug-0.log

---

ERROR: failed to solve: executor failed running [/bin/sh -c npm clean-install --no-audit --no-fund --registry=$NPM_REGISTRY]: exit code: 146

Also I updated the npm version at the top of the Dockerfile but the same issue still occurs:
# syntax=docker/dockerfile:1

FROM node:latest

# Update npm to a specific version

RUN npm install -g npm@10.2.5

# Remains code ...

at: C:\Users\AN515-43\AppData\Local\tutor\tutor\env\plugins\mfe\build\mfe\Dockerfile

Can anyone help me with this please.

[the_tan_Nguyen]

Little update,

After follow this guide: Document how to use BuildKit options to reduce resources consumption · Issue #125 · overhangio/tutor-mfe · GitHub. I can run only 2 tasks at a time and I can see the error log more details:

[account-common 3/5] RUN --mount=type=cache,target=/root/.npm,sharing=shared npm clean-install --no-audit --no-fund --registry=https://registry.npmjs.org/:
#0 33.92 npm WARN deprecated redux-devtools-extension@2.13.9: Package moved to @redux-devtools/extension.
#0 34.95 npm WARN deprecated source-map-resolve@0.5.3: See GitHub - lydell/source-map-resolve: [DEPRECATED] Resolve the source map and/or sources for a generated file.
#0 35.00 npm WARN deprecated formidable@1.2.6: Please upgrade to latest, formidable@v2 or formidable@v3! Check these notes: formidable/VERSION_NOTES.md at master · node-formidable/formidable · GitHub
#0 35.12 npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
#0 39.60 npm notice
#0 39.60 npm notice New patch version of npm available! 10.2.3 → 10.2.5
#0 39.60 npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.5
#0 39.60 npm notice Run npm install -g npm@10.2.5 to update!
#0 39.60 npm notice
#0 39.60 npm ERR! code ECONNRESET
#0 39.60 npm ERR! syscall read
#0 39.60 npm ERR! errno -104
#0 39.60 npm ERR! network read ECONNRESET
#0 39.60 npm ERR! network This is a problem related to network connectivity.
#0 39.60 npm ERR! network In most cases you are behind a proxy or have bad network settings.
#0 39.60 npm ERR! network
#0 39.60 npm ERR! network If you are behind a proxy, please make sure that the
#0 39.60 npm ERR! network ‘proxy’ config is set properly. See: ‘npm help config’
#0 39.69
#0 39.69 npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2023-12-21T12_19_16_776Z-debug-0.log

Dockerfile:125

123 | ENV CPPFLAGS=-DPNG_ARM_NEON_OPT=0
124 | ENV PACT_SKIP_BINARY_INSTALL=true
125 | >>> RUN --mount=type=cache,target=/root/.npm,sharing=shared npm clean-install --no-audit --no-fund --registry=$NPM_REGISTRY

---

ERROR: failed to solve: process “/bin/sh -c npm clean-install --no-audit --no-fund --registry=$NPM_REGISTRY” did not complete successfully: exit code: 152
Error: Command failed with status 1: docker buildx build --tag=docker.io/overhangio/openedx-mfe:17.0.0 --no-cache --output=type=docker --cache-from=type=registry,ref=docker.io/overhangio/openedx-mfe:17.0.0-cache C:\Users\AN515-43\AppData\Local\tutor\tutor\env\plugins\mfe\build\mfe

========================================================

The code around line 125 in my Dockerfile:

FROM base AS account-common
COPY --from=account-src /package.json /openedx/app/package.json
COPY --from=account-src /package-lock.json /openedx/app/package-lock.json
ARG NPM_REGISTRY=https://registry.npmjs.org/


ENV CPPFLAGS=-DPNG_ARM_NEON_OPT=0
ENV PACT_SKIP_BINARY_INSTALL=true
(line 125) RUN --mount=type=cache,target=/root/.npm,sharing=shared npm clean-install --no-audit --no-fund --registry=$NPM_REGISTRY


COPY --from=account-src / /openedx/app
COPY --from=account-i18n /openedx/app/src/i18n/messages /openedx/app/src/i18n/messages

# Whenever a new MFE supports Atlas, it should be added to this list.
# When all MFEs support Atlas, this if-statement should be removed.


EXPOSE 1997

# Configuration needed at build time
ENV APP_ID=account
ENV PUBLIC_PATH='/account/'
# We could in theory point the mfe_config API directly to the LMS. But for that we would
# have to code the LMS url into the mfe image, and this configuration is user-dependent.
# So we point to a relative url that will be a proxy for the LMS.
ENV MFE_CONFIG_API_URL=/api/mfe_config/v1
ARG ENABLE_NEW_RELIC=false```

I really need a help :(

[ChaVietCode (Cha Viết Code)]

Can you provide the plugins you forked MFE’s apps?

[the_tan_Nguyen]

Thanks for asking,

As you can see [account-common 3/5] is the packed mfe which already existed when I enable mfe plugin in docker tutor.

What I did was:

pip install "tutor[full]"

tutor plugins enable mfe

# after mfe plugin enabled, I run:

tutor build images --no-cache mfe

# this is where the error arise

So yeah, I did not fork anything

[the_tan_Nguyen]

Hi everyone this my background:
I am trying to write a custom app to contribute to openedx.

These are what I am trying to do:

• Write a custom react app from tutor react mfe template
• Write a plugin to run my react app.

But I am facing errors when build images.

These are the steps that I did:
Step 2: Create custom react mfe from template:

Go to: GitHub - openedx/frontend-template-application: A template repository for creating Open edX frontend applications. 💿➡️📀

Create new repo from this template with name: frontend_app_[yourmfe]

Step 3: Work with plugin path:
Follow the doc: Creating a Tutor plugin — Tutor documentation

Create plugin folder in that path:
mkdir -p “$(tutor plugins printroot)”

Go to the path printed from:
tutor plugins printroot

Step 4: Create a plugin file:
Add a file [yourmfe]plugin.py in the above path

Add this code:

@MFE_APPS.add()
def _add_my_mfe(mfes):
    mfes["mfe_yourmfe"] = {
        "repository": "https://github.com/thetansabe/frontend_app_[yourmfe].git",
        "port": 2003,
        "version": "master", # optional, will default to the Open edX current tag.
        # "refs" : "https://api.github.com/repos/rimsha-zaib/mfe_courses/git/refs/heads",
    }
    return mfes

Step 5: Save config:
tutor plugins enable [yourmfe]plugin.py
tutor config save

Step 6: Run your custom mfe:
tutor images build mfe => this is where I failed
tutor local launch

Do you have any idea

[rediris (Roman Edirisinghe)]

Maybe try tutor build images mfe --no-cache --no-registry-cache?

[the_tan_Nguyen]

thanks for your response.

but it did not work on my case

[rediris (Roman Edirisinghe)]

Did you already do a tutor local launch immediately after first installing it? I’ve noticed I run into all sorts of trouble if I don’t do that first. In other words, try running a fully vanilla tutor once, even before you add any customizations.

[the_tan_Nguyen]

yes, I have already did it

[rediris (Roman Edirisinghe)]

I wish I had additional suggestion for you. Hopefully some of the more experienced folks can lend some assistance. I’m fairly fresh into this process myself.

[rediris (Roman Edirisinghe)]

Oh, maybe try running it in dev mode using a bind-mount as suggested here:

How can I change the appearance of login/register?

Did you try the following? tutor mounts add /path/to/your/local/mfe/authn tutor config save tutor dev launch Keep in mind tutor local launch is emulating a production environment, and tutor dev launch is for local development.

[the_tan_Nguyen]

hi @rediris ,

Thank for your help.

I want to ask you this, after following your guide:

I’ve successfully build mfe image:

But the problem is, when I go to my custom mfe URL (highlighted in red), the page is blank.

Can you help me with this.

[rediris (Roman Edirisinghe)]

Ah, yes. If you’re bind mounting a directory, you’ll have to manually install node packages etc, for that particular MFE.

Firstly, stop all running services: tutor dev stop.

Open up a terminal window in the directory of your MFE.

I recommend using node version manager for the next step:

nvm use - this tells node version manager to use the node version defined in the .nvmrc file in the root of the folder. This is probably going to be some flavor of node version 18.x.x
npm install - installs all relevant packages for the MFE

Once that’s done, you should ideally be able to run tutor dev launch again and have it spin up.

Tip: give your MFE folder a more meaningful name - mfe_frontendapptutor is a bit vague and doesn’t indicate at all what the function of the application is. But it’s your call, ultimately.

I hope some of that helps!

FYI, I learned so much from this repository - https://github.com/Abstract-Tech/community-theme-tutor
I’m sure this setup is specific to their needs, but the way they’ve implemented changes to stock MFEs and incorporated their own really helped me tremendously, plus the instructions helped provide some clarity (although they are a bit messy). If you do decide to try this out, be sure to only use it for local development, as they have commited a config.yml file with prepopulated keys/secrets visible to the public.

[Vitika]

@the_tan_Nguyen I am also getting the blank page. Were you able to resolve this one too?

Also, I am not mounting any dir

[the_tan_Nguyen]

Yes, it was blank for me too, even after mounting the directory. So my process when developing MFE locally is:

1. Run Tutor LOCAL docker.
2. Configure the MFE’s env.dev file to work with Tutor local docker.
3. Hardcode the user info data.
4. Start coding.
5. Change the hardcoded lines and run tutor build images to integrate my MFE with tutor local for verification

[Vitika]

Yeah but how you resolved it being blank in tutor local?

[the_tan_Nguyen]

Are you saying that even after integrating your MFE with local Tutor, your page is still blank? If that’s the case, then:

• When you first run tutor local launch docker, a directory will be created to save your YAML config.
• Go to that directory, open the .yml file, and search for your MFE plugin name.
• If your MFE plugin name is not found in the YAML file, then you have set up the plugin incorrectly

[Vitika]

I have my plugin name under PLUGINS in the config. Also, I am able to see the page title when opening it but not the body, is there a step I need to do on frontend side? I did a build but its going to dist folder which doesn’t seem to be getting served

[rediris (Roman Edirisinghe)]

While looking at the blank page, open up developer tools in your browser, look at the console, refresh the page - what errors do you see?

[WillEVTdigital (Will)]

Hi @the_tan_Nguyen did you manage to find a solution to this? I’ve come across the same issue.