Prerequisites

September 26, 2025 · View on GitHub

######################### frontend-component-footer #########################

|Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|

Purpose

A generic footer for Open edX micro-frontend applications. It includes a logo and an optional language selector dropdown.

Getting Started

Prerequisites

The devstack_ is currently recommended as a development environment for your new MFE. If you start it with make dev.up.lms that should give you everything you need as a companion to this frontend.

Note that it is also possible to use Tutor_ to develop an MFE. You can refer to the relevant tutor-mfe documentation_ to get started using it.

.. _Devstack: https://github.com/openedx/devstack

.. _Tutor: https://github.com/overhangio/tutor

.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development

Requirements

This component uses @edx/frontend-platform services such as i18n, analytics, configuration, and the AppContext React component, and expects that it has been loaded into a micro-frontend that has been properly initialized via @edx/frontend-platform's initialize function. Please visit the frontend template application to see an example. <https://github.com/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx>_

Environment Variables

This component requires that the following environment variable be set by the consuming micro-frontend.

  • LMS_BASE_URL - The URL of the LMS of your Open edX instance.
  • LOGO_TRADEMARK_URL - This is a URL to a logo for use in the footer. This is a different environment variable than LOGO_URL (used in frontend-component-header) to accommodate sites that would like to have additional trademark information on a logo in the footer, such as a (tm) or (r) symbol.

Installation

To install this footer into your Open edX micro-frontend, run the following command in your MFE:

npm i --save @edx/frontend-component-footer

This will make the component available to be imported into your application.

Cloning and Startup

.. code-block::

  1. Clone your new repo:
``git clone https://github.com/openedx/frontend-component-footer.git``
  1. Use node v24.x.
The current version of the micro-frontend build scripts support node 24.

Using other major versions of node *may* work, but this is unsupported.  For
convenience, this repository includes an .nvmrc file to help in setting the
correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.

3. Install npm dependencies:

``cd frontend-component-footer && npm ci``

4. Start the dev server:

``npm start``

Usage

This library has the following exports:

  • (default): The footer as a React component.
  • messages: Internationalization messages suitable for use with @edx/frontend-platform/i18n <https://edx.github.io/frontend-platform/module-Internationalization.html>_
  • dist/footer.scss: A SASS file which contains style information for the component. It should be imported into the micro-frontend's own SCSS file.