Image Loads on Dev Server but Not on Tutor Local in frontend-app-authn Despite Using Plugin and Forked Repo

Development
1

Hi everyone,

I’m working on customizing the frontend-app-authn MFE in Open edX. I’ve added a custom image (for the registration banner) that loads correctly when running the app with npm run dev (i.e., on the dev server). However, when I build and run it via Tutor (tutor local), the image does not appear — only the background color and text are visible.

Here’s what I’ve tried:

  • Added the image and relevant styles in my forked version of frontend-app-authn.
  • Pushed the changes to GitHub.
  • Created a custom Tutor plugin that points to my fork and builds the MFE using tutor plugins enable my-plugin && tutor images build openedx.
  • Verified that the image URL (e.g., http://apps.local.openedx.io:1999/my-register-banner-large.jpg) works on the dev server, but the same image does not load from http://apps.local.openedx.io/my-register-banner-large.jpg in Tutor local (no port).

Questions:

  1. Is there a difference in how static assets are served between npm run dev and Tutor local builds?
  2. How can I ensure that custom images used in my MFE are correctly bundled and served in the Tutor environment?
  3. Should I be placing such images in a specific static directory or serving them via another method?

Thanks in advance!

2

My first thought is that the problem is the mfe image not being rebuilt. Have you run tutor images build mfe?

3

yes first i made changes in forked copy of frontend-app-authn package , pushed changes on github then rant he command tutor images build mfe, then i switched to local from dev and made a plugin - from tutormfe.hooks import MFE_APPS
from tutor import hooks as tutor_hooks

@MFE_APPS.add()
def add_custom_authn_mfe(mfes):
mfes[“authn”] = {
“repository”: “forked copy url”,
“version”: “custom-layout”, # or use a specific branch or commit
“port”: 1999
}
return mfes

from tutormfe.hooks import MFE_APPS
from tutor import hooks

@hooks.Filters.ENV_PATCHES.add()
def _remove_authn_patches(patches):
new_patches = [patch for patch in patches if patch[0] != “mfe-dockerfile-post-npm-install-authn”]
return new_patches - this second patch because The Indigo theme is going to install its own branding package in the authentication MFE:

If you don’t want Indigo to add that patch, then you’ll have to implement a “creative” hack:

@hooks.Filters.ENV_PATCHES.add()
def _remove_authn_patches(patches):
new_patches = [patch for patch in patches if patch[0] != “mfe-dockerfile-post-npm-install-authn”]
return new_patches . still no luck, am i doing it right?

4

The issue is that this url does not resolve to any MFE: http://apps.local.openedx.io/my-register-banner-large.jpg

It should be: http://apps.local.openedx.io/authn/my-register-banner-large.jpg (notice the extra /authn)

The base url http://apps.local.openedx.io/ is resolved by caddy, and typically redirects to the learner dashboard in production. But http://apps.local.openedx.io/myimage.jpg will not resolve to anything.

I’m not sure how you added your image to the authn MFE, but you should make sure that it’s loaded from the right url.

5

i put the image isnide public folder of forked authn repo and declared the path in .env file -

BANNER_IMAGE_LARGE='/my-register-banner-large.jpg'
BANNER_IMAGE_MEDIUM='/my-register-banner-large.jpg'
BANNER_IMAGE_SMALL='/my-register-banner-large.jpg'
BANNER_IMAGE_EXTRA_SMALL='/my-register-banner-large.jpg'

and after that pushed the changes to new branch and used that branch to inlcude it in tutor plugin:

def add_custom_authn_mfe(mfes):
    mfes[“authn”] = {
        “repository”: “forked copy url”,
        “version”: “custom-layout”, # or use a specific branch or commit
        “port”: 1999
    }
    return mfes
6

Try removing the “/” prefix in these settings.

7

i tried it, after making changes in env file i pushed the code to repo and run tutor images build mfe and then switched to local (local.openedx.io) and checked through inspect element , i found the image is still not being rendered but its there by the url(http://apps.local.openedx.io/authn/my-register-banner-large.jpg) , but image is still not at this url

8

also @regis can you tell me configuration i gave to make in env file according it to load to local properly? like what will be the LMS URL and LMS base url in env file of authn , MFE_CONFIG_API_URL, logout url, login url

9

also @regis the image is accesible in this url - http://apps.local.openedx.io:1999/my-register-banner-large.jpg in dev