Panorama MFE: deployment and development

Like every Open edX micro-frontend, the Panorama MFE is a Node/React application built with the frontend build scripts and served as static assets. This page covers the operator-relevant parts: how it is deployed in production, and how to run it locally.

Production deployment

For a real Open edX site, deploy the MFE through the Panorama Tutor plugin. The plugin:

  • Adds the Panorama MFE to the MFE image.

  • Adds the Open edX backend to the LMS image’s dependencies.

  • Adds a link to the Panorama MFE from the learner dashboard.

The MFE is then served at <mfe base url>/panorama. This is the recommended path for operators; you should not need to build the MFE by hand.

Configuration

The MFE follows standard Open edX MFE configuration, via .env files or the runtime MFE config API. The setting that matters most is LMS_BASE_URL, which is the origin the MFE calls for the /panorama/api/ endpoints. Standard MFE variables (BASE_URL, LOGIN_URL, LOGOUT_URL, REFRESH_ACCESS_TOKEN_ENDPOINT, logos, SITE_NAME, and so on) apply as for any MFE.

Requirements for local development

  • Node 18.x (an .nvmrc is included; run nvm use).

  • A running Open edX LMS to authenticate against and to serve the /panorama/api/ endpoints (devstack or Tutor).

Running locally

  1. Install dependencies:

    npm install

  2. Confirm the dev port. The default is 2100 (in .env.development); change it in the .env.* files if needed.

  3. Start the dev server:

    npm start

  4. Open the app at http://localhost:2100 (or your configured port).

Building for production

npm run build

Using local sibling packages

To develop the MFE against local checkouts of shared packages (for example @openedx/paragon or @edx/frontend-platform), copy module.config.js.example to module.config.js and uncomment the modules you want resolved from peer directories. Remember to build the dist output of any local package that has a build step.

Note

The MFE has no Panorama-specific runtime configuration beyond the standard MFE settings. Behavior (modes, dashboards, roles, student view) is driven entirely by the backend, so almost all operational tuning happens there. See Open edX Backend: configuration.

Back to Home