# \[Tutor\] Fails when build mfe images

**URL:** <https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952>\
**Category:** Development\
**Tags:** tutor\
**Created:** [December 20, 2023, 2:24pm UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952 "2023-12-20T14:24:55Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![the\_tan\_Nguyen](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/the_tan_nguyen/32/6248_2.png) [@the\_tan\_Nguyen](https://discuss.openedx.org/u/the_tan_Nguyen)\
**Post date:** [December 20, 2023, 2:24pm UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/1 "2023-12-20T14:24:56Z")

</div>

Hi Everyone,

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/2X/e/e1949f0309a7ebe8f3bd3b58e82ba1679f2b1c83.png)

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/:](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](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.

---

<div class="post-metadata">

**Author:** ![the\_tan\_Nguyen](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/the_tan_nguyen/32/6248_2.png) [@the\_tan\_Nguyen](https://discuss.openedx.org/u/the_tan_Nguyen)\
**Post date:** [December 21, 2023, 12:42pm UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/2 "2023-12-21T12:42:07Z")

</div>

Little update,

After follow this guide: [Document how to use BuildKit options to reduce resources consumption · Issue #125 · overhangio/tutor-mfe · GitHub](https://github.com/overhangio/tutor-mfe/issues/125). 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/:](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.](https://github.com/lydell/source-map-resolve#deprecated)  
> #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](https://bit.ly/2ZEqIau)  
> #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](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](http://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](http://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:

````auto
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 :(
````

---

<div class="post-metadata">

**Author:** ![ChaVietCode](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/chavietcode/32/6025_2.png) [@ChaVietCode](https://discuss.openedx.org/u/ChaVietCode)\
**Post date:** [December 22, 2023, 9:08am UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/3 "2023-12-22T09:08:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![the\_tan\_Nguyen](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/the_tan_nguyen/32/6248_2.png) [@the\_tan\_Nguyen](https://discuss.openedx.org/u/the_tan_Nguyen)\
**Post date:** [December 22, 2023, 4:50pm UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/4 "2023-12-22T16:50:08Z")

</div>

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:

```auto
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

---

<div class="post-metadata">

**Author:** ![the\_tan\_Nguyen](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/the_tan_nguyen/32/6248_2.png) [@the\_tan\_Nguyen](https://discuss.openedx.org/u/the_tan_Nguyen)\
**Post date:** [December 22, 2023, 4:56pm UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/5 "2023-12-22T16:56:56Z")

</div>

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. 💿➡️📀](https://github.com/openedx/frontend-template-application/tree/master)

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](https://docs.tutor.edly.io/tutorials/plugin.html)

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:

```from

@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

---

<div class="post-metadata">

**Author:** ![rediris](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/rediris/32/2097_2.png) [@rediris](https://discuss.openedx.org/u/rediris)\
**Post date:** [December 28, 2023, 4:33pm UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/6 "2023-12-28T16:33:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![the\_tan\_Nguyen](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/the_tan_nguyen/32/6248_2.png) [@the\_tan\_Nguyen](https://discuss.openedx.org/u/the_tan_Nguyen)\
**Post date:** [December 29, 2023, 2:06pm UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/7 "2023-12-29T14:06:33Z")

</div>

thanks for your response.

but it did not work on my case

---

<div class="post-metadata">

**Author:** ![rediris](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/rediris/32/2097_2.png) [@rediris](https://discuss.openedx.org/u/rediris)\
**Post date:** [February 12, 2024, 6:40pm UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/8 "2024-02-12T18:40:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![the\_tan\_Nguyen](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/the_tan_nguyen/32/6248_2.png) [@the\_tan\_Nguyen](https://discuss.openedx.org/u/the_tan_Nguyen)\
**Post date:** [February 13, 2024, 1:31pm UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/9 "2024-02-13T13:31:28Z")

</div>

yes, I have already did it

---

<div class="post-metadata">

**Author:** ![rediris](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/rediris/32/2097_2.png) [@rediris](https://discuss.openedx.org/u/rediris)\
**Post date:** [February 16, 2024, 7:02pm UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/10 "2024-02-16T19:02:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rediris](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/rediris/32/2097_2.png) [@rediris](https://discuss.openedx.org/u/rediris)\
**Post date:** [February 16, 2024, 7:04pm UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/11 "2024-02-16T19:04:21Z")

</div>

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

> [@How can I change the appearance of login/register?](https://discuss.openedx.org/t/how-can-i-change-the-appearance-of-login-register/12267/14):
>
> 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.

---

<div class="post-metadata">

**Author:** ![the\_tan\_Nguyen](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/the_tan_nguyen/32/6248_2.png) [@the\_tan\_Nguyen](https://discuss.openedx.org/u/the_tan_Nguyen)\
**Post date:** [February 17, 2024, 4:01am UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/12 "2024-02-17T04:01:22Z")

</div>

hi @rediris ,

Thank for your help.

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/2X/b/b64afe90d0a2587289c1f50eec81fdabc74ee9cc.jpeg)

I’ve successfully build mfe image:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/2X/c/c66ff6e68c25931b35d06cda7322504e983eadad.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![rediris](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/rediris/32/2097_2.png) [@rediris](https://discuss.openedx.org/u/rediris)\
**Post date:** [February 23, 2024, 2:10pm UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/13 "2024-02-23T14:10:18Z")

</div>

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](https://github.com/nvm-sh/nvm) 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](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.

---

<div class="post-metadata">

**Author:** ![Vitika](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/vitika/32/6622_2.png) [@Vitika](https://discuss.openedx.org/u/Vitika)\
**Post date:** [March 28, 2024, 1:21pm UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/14 "2024-03-28T13:21:57Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![the\_tan\_Nguyen](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/the_tan_nguyen/32/6248_2.png) [@the\_tan\_Nguyen](https://discuss.openedx.org/u/the_tan_Nguyen)\
**Post date:** [March 28, 2024, 1:29pm UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/15 "2024-03-28T13:29:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Vitika](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/vitika/32/6622_2.png) [@Vitika](https://discuss.openedx.org/u/Vitika)\
**Post date:** [March 28, 2024, 1:36pm UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/16 "2024-03-28T13:36:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![the\_tan\_Nguyen](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/the_tan_nguyen/32/6248_2.png) [@the\_tan\_Nguyen](https://discuss.openedx.org/u/the_tan_Nguyen)\
**Post date:** [March 28, 2024, 2:00pm UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/17 "2024-03-28T14:00:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Vitika](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/vitika/32/6622_2.png) [@Vitika](https://discuss.openedx.org/u/Vitika)\
**Post date:** [March 29, 2024, 5:51am UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/18 "2024-03-29T05:51:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rediris](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/rediris/32/2097_2.png) [@rediris](https://discuss.openedx.org/u/rediris)\
**Post date:** [April 3, 2024, 1:51pm UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/19 "2024-04-03T13:51:41Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![WillEVTdigital](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/willevtdigital/32/6667_2.png) [@WillEVTdigital](https://discuss.openedx.org/u/WillEVTdigital)\
**Post date:** [April 11, 2024, 2:01pm UTC](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952/20 "2024-04-11T14:01:03Z")

</div>

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

[Next page](https://discuss.openedx.org/t/tutor-fails-when-build-mfe-images/11952.md?page=2)
