Static pages (about, blog, donate, etc.) MFE URLs?

mboisson · April 13, 2026, 2:14pm

Hi,

What is the URL of the “static pages” ( edx-platform/lms/templates/static_templates at release-ulmo · edx/edx-platform · GitHub ) ? I cannot find them. Do they require a special MFE ?

mboisson · April 13, 2026, 2:51pm

I think I found them, they are not under an MFE. Apparently at edx.<domain>/about and such.

Is there any plan to port them to an MFE ?

sarina · April 13, 2026, 2:56pm

@arbrandes mind weighing in on this one?

arbrandes · April 15, 2026, 2:42pm

Replied on another thread. Unless Product says otherwise, I don’t think those templates are ever going to be ported.

mboisson · April 15, 2026, 2:51pm

Hum, those are presumably kind of a big deal for some sites ? Couldn’t they be iframed into some general MFE page ? All they really need is to get the proper headers and footers from MFE.

arbrandes · April 15, 2026, 3:01pm

(Disclaimer: this is just my personal opinion as a developer.)

Giving operators the ability to present arbitrary externally-hosted content sandwiched between the existing header and footer does makes sense. And yes, an iframed page would solve that.

As a matter of fact, this will be explicitly possible in Verawood using the new frontend-base app architecture (which I’m rushing to get ready as we speak ). An operator will be able to create arbitrary routes and pages to go with them, all reusing the header/footer if they want to.

It’s actually because of this that I think those specific pages will probably never be ported: they won’t need to be.

sarina · April 15, 2026, 3:12pm

Thanks @arbrandes - to be clear, this won’t be possible in Verawood for the learning MFE though, yes?

arbrandes · April 15, 2026, 3:34pm

As far as I know, those URLs are only seen in the Django footer, and the current version of frontend-component-footer (which is what the Learning MFE uses) does not actually have any of them.

But given that frontend-component-footer (which the Learning MFE uses) is configurable (via FooterSlot), all an operator will have to do to get a React About page in Verawood is:

Create a frontend-base app that implements it
Add a link to it using FooterSlot
Wire both up in a single Tutor plugin

arbrandes · April 15, 2026, 3:39pm

Follow-up question:

Can’t we just offer those apps out of the box?

Yes, of course. But the combination of a) them being so simple, but also b) the fact they’ll likely be completely different for each instance, makes me think we’re better off making them template apps that users can optionally fork and modify to their liking.

sarina · April 15, 2026, 3:48pm

Ah, sorry I was mixing threads. I thought we were talking about custom pages (which appear as a tab in the Learning MFE) not the footer links. You’re correct on this.

mboisson · July 29, 2026, 6:19pm

With Verawood on the horizon, is there a full example somewhere that shows how to create a custom static page such ? Maybe the “about” page would be a good example.

mboisson · August 11, 2026, 4:16pm

Is there a way to add such static pages through tutor patches rather than writing a full NPM app and deploy it ?

arbrandes · August 11, 2026, 6:56pm

For this to work, you’d have to create a proper frontend-base app because that’s what allows you to insert a whole new page - this is what you’ll link to from elsewhere.

The canonical example of an app is the frontend-base branch of frontend-template-application. That is what I’d start paring down to get the single page. There is probably a lot to remove for a truly minimal app, but if you start with the whole thing you’ll have a better chance of it working to begin with.

Note that you don’t have to publish anything to NPM. As tutor-mfe documents:

Optionally, a source key can be added to the app dictionary. If source is present, it will be used at build time instead of installing from NPM.

source accepts two shapes:

A git URL (https://..., git@...) - cloned at build time. An optional git ref can be pinned with the standard #<ref> suffix (e.g. https://github.com/myorg/frontend-app-my-app.git#my-branch). Without the suffix, the repository’s default branch is used.

A file:// URL (e.g. file://site/packages/frontend-app-my-app) - the path, relative to the tutor-mfe build context, is copied at build time. Tutor plugins can render templates into this path to ship an app’s source alongside the plugin itself.

If any of this doesn’t work, let me know and I’ll be glad to help (and to fix documentation as needed).

mboisson · August 11, 2026, 7:57pm

Thanks for the pointer. I am happy to try it and take notes about my process to improve documentation.

I forked the frontend-template-application, used the frontend-base branch to create

https://github.com/calculquebec/frontend-static-pages/tree/cq-static-pages

You can see the few changes I have made so far here:

https://github.com/calculquebec/frontend-static-pages/compare/frontend-base...calculquebec:frontend-static-pages:cq-static-pages?expand=1

I installed it and enabled it through tutor with:

@FRONTEND_APPS.add()
def _add_my_app(apps):
    apps["static-pages"] = {
        "npm_package": "@calculquebec/frontend-static-pages",
        "npm_version": "^1.0.0",
        "enabled": True,
        "source": "https://github.com/calculquebec/frontend-static-pages.git#cq-static-pages",
    }
    return apps

hooks.Filters.ENV_PATCHES.add_items(
    [
        (
            "mfe-site-config-imports",
            """
import { staticPagesApp } from '@calculquebec/frontend-static-pages';
"""
        ),
        (
            "mfe-site-config",
            """
addApp(siteConfig, staticPagesApp);
"""
        ),
    ]
)

However, I can’t find what URL to use to reach the example page.

Looking at the routes:

https://github.com/calculquebec/frontend-static-pages/blob/cq-static-pages/src/routes.tsx

I tried

https://apps.edx.evolo-dev.calculquebec.cloud/template-example

https://apps.edx.evolo-dev.calculquebec.cloud/template-main

https://apps.edx.evolo-dev.calculquebec.cloud/static-pages/example/ExamplePage

but they all return a 404, instead of showing the example pages. Am I missing something to handle routes ?

arbrandes · August 11, 2026, 8:03pm

If I remember correctly, the path should just be /template/. It comes from here:

github.com/openedx/frontend-template-application

src/routes.tsx

frontend-base


      
          import { templateRole } from './constants';
          
          const routes = [
            {
              id: 'org.openedx.frontend.route.template.main',
              path: 'template',
              handle: {
                roles: [templateRole],
              },
              async lazy() {
                const module = await import(/* webpackChunkName: "template-main" */ './Main');
                return { Component: module.default };
              },
              children: [
                {
                  index: true,

arbrandes · August 11, 2026, 8:08pm

By the way, frontend-base routes are basically just React Router v6 routes with a little sugar on top to handle “roles”.

mboisson · August 11, 2026, 8:24pm

Ah! Indeed,

https://apps.edx.evolo-dev.calculquebec.cloud/template/

does return the example page. Although it returns a blank page to a non-authenticated user. We would likely want those pages to be visible to a non-authenticated user, like the authn app.

Any idea about that part ?

mboisson · August 14, 2026, 5:29pm

Thanks Adolfo,

With Gemini’s help, I was able to create a first static page, with an FAQ:

https://apps.edx.evolo-dev.calculquebec.cloud/faq

One thing I notice is that the example app uses an example custom menu. How could I reuse the same menu as the catalog or the learner-dashboard pages, with the “Courses”, and “Discover new courses” menus (learner-dashboard), or “Explore courses” (and not “Courses”) from the catalog menu (when the user is not logged in).

I could probably hard-code it, but it seems those components should be reusable/importable from existing apps instead of the Example menu ?

arbrandes · August 14, 2026, 6:50pm

Frontend-base allows you to do exactly that, provided the app exports the component you’re after. If it doesn’t, it’s probably just an omission: I suspect most app maintainers would have no objections to doing so.

mboisson · August 17, 2026, 12:23pm

So, I tried this change:

 import { SlotOperation } from '@openedx/frontend-base';

-import { exampleHeaderApp } from './widgets/ExampleHeader';
+//import { exampleHeaderApp } from './widgets/ExampleHeader';
+import { learnerDashboardHeaderApp } from '@openedx/frontend-app-learner-dashboard';

 const slots: SlotOperation[] = [
-  ...(exampleHeaderApp.slots ?? []),
+  ...(learnerDashboardHeaderApp.slots as []),
 ];

but it fails with

3.612 @calculquebec/frontend-static-pages:build: src/slots.tsx(4,10): error TS2724: '"@openedx/frontend-app-learner-dashboard"' has no exported member named 'learnerDashboardHeaderApp'. Did you mean 'learnerDashboardApp'?
3.644 @calculquebec/frontend-static-pages:build: make: *** [Makefile:52: build] Error 2
3.650 @calculquebec/frontend-static-pages:build: npm error Lifecycle script `build` failed with error:
3.650 @calculquebec/frontend-static-pages:build: npm error code 2
3.650 @calculquebec/frontend-static-pages:build: npm error path /openedx/site/packages/frontend-app-static-pages
3.650 @calculquebec/frontend-static-pages:build: npm error workspace @calculquebec/frontend-static-pages@0.0.0-dev
3.651 @calculquebec/frontend-static-pages:build: npm error location /openedx/site/packages/frontend-app-static-pages
3.651 @calculquebec/frontend-static-pages:build: npm error command failed
3.651 @calculquebec/frontend-static-pages:build: npm error command sh -c make build
3.685 @openedx/frontend-app-authn:build: make: *** [Makefile:39: build] Interrupt

I then try to import from @openedx/frontend-app-learner-dashboard/widgets/LearnerDashboardHeader, but I got

3.464 @calculquebec/frontend-static-pages:build: src/slots.tsx(4,43): error TS2307: Cannot find module '@openedx/frontend-app-learner-dashboard/widgets/LearnerDashboardHeader' or its corresponding type declarations.
3.494 @calculquebec/frontend-static-pages:build: make: *** [Makefile:52: build] Error 2
3.503 @calculquebec/frontend-static-pages:build: npm error Lifecycle script `build` failed with error:
3.503 @calculquebec/frontend-static-pages:build: npm error code 2
3.504 @calculquebec/frontend-static-pages:build: npm error path /openedx/site/packages/frontend-app-static-pages
3.504 @calculquebec/frontend-static-pages:build: npm error workspace @calculquebec/frontend-static-pages@0.0.0-dev
3.504 @calculquebec/frontend-static-pages:build: npm error location /openedx/site/packages/frontend-app-static-pages
3.504 @calculquebec/frontend-static-pages:build: npm error command failed

Does that mean the actual header is not exported ?

Topic		Replies	Views
MFE for custom pages? Frontend ulmo	8	110	April 15, 2026
Custom Static Pages Site Operators	4	451	March 8, 2021
How to access custom MFE in production Site Operators tutor	7	302	January 30, 2026
No MFE for /courses sub pages ? Still using legacy? Frontend ulmo	14	140	January 28, 2026
How to customize header and footer in tutor mfe Tutor Help how-to , tutor , tutor-mfe , olive	48	4826	February 4, 2026

Static pages (about, blog, donate, etc.) MFE URLs?

Related topics