.. _mfe_deployment:

Panorama MFE: deployment and development
========================================

.. contents:: On this page
   :local:
   :depth: 2

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 <https://github.com/aulasneo/tutor-contrib-panorama>`_. The plugin:

* Adds the Panorama MFE to the MFE image.
* Adds the :ref:`Open edX backend <backend_overview>` 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
---------------

#. Install dependencies:

   .. code-block:: shell

      npm install

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

#. Start the dev server:

   .. code-block:: shell

      npm start

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

Building for production
-----------------------

.. code-block:: shell

   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 :ref:`backend_configuration`.

`Back to Home <index.html>`_