Prerequisites

September 26, 2025 · View on GitHub

######################### frontend-component-header #########################

Purpose

A generic header for Open edX micro-frontend applications.

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/master/src/index.jsx>_

As of version 7.x, consuming applications must support typescript.

Environment Variables

LMS_BASE_URL - The URL of the LMS of your Open edX instance.
LOGOUT_URL - The URL of the API endpoint which performs a user logout.
LOGIN_URL - The URL of the login page where a user can sign into their account.
SITE_NAME - The user-facing name of the site, used as alt text on the logo in the header. Defaults to "localhost" in development.
LOGO_URL - The URL of the site's logo. This logo is displayed in the header.
ORDER_HISTORY_URL - The URL of the order history page.
ACCOUNT_PROFILE_URL - The URL of the account profile page.
ACCOUNT_SETTINGS_URL - The URL of the account settings page.
AUTHN_MINIMAL_HEADER - A boolean flag which hides the main menu, user menu, and logged-out menu items when truthy. This is intended to be used in micro-frontends like frontend-app-authentication in which these menus are considered distractions from the user's task.

Installation

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

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

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

Cloning and Startup

.. code-block::

Clone your new repo:

``git clone https://github.com/openedx/frontend-component-header.git``

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-header && npm ci``

4. Start the dev server:

``npm start``

Usage

This library has the following exports:

(default): The header 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/index.scss: A SASS file which contains style information for the component. It should be imported into the micro-frontend's own SCSS file.

Plugins

This can be customized using Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>_.

The parts of this that can be customized in that manner are documented here </src/plugin-slots>_.

Examples

An example of component and messages usage. <https://github.com/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L21>_
An example of SCSS file usage. <https://github.com/openedx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L8>_

Development

Install dependencies::

npm ci

Start the development server::

npm start

Build a production distribution::

npm run build

License

The code in this repository is licensed under the AGPLv3 unless otherwise noted.

Please see LICENSE <LICENSE>_ for details.

Contributing

Contributions are very welcome. Please read How To Contribute_ for details.

.. _How To Contribute: https://openedx.org/r/how-to-contribute

This project is currently accepting all types of contributions, bug fixes, security fixes, maintenance work, or new features. However, please make sure to have a discussion about your new feature idea with the maintainers prior to beginning development to maximize the chances of your change being accepted. You can start a conversation by creating a new issue on this repo summarizing your idea.

Getting Help

If you're having trouble, we have discussion forums at https://discuss.openedx.org where you can connect with others in the community.

Our real-time conversations are on Slack. You can request a Slack invitation, then join our community Slack workspace. Because this is a frontend repository, the best place to discuss it would be in the #wg-frontend channel_.

For anything non-trivial, the best path is to open an issue in this repository with as many details about the issue you are facing as you can provide.

https://github.com/openedx/frontend-component-header/issues

For more information about these options, see the Getting Help_ page.

.. _Slack invitation: https://openedx.org/slack .. _community Slack workspace: https://openedx.slack.com/ .. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6 .. _Getting Help: https://openedx.org/community/connect

The Open edX Code of Conduct

All community members are expected to follow the Open edX Code of Conduct_.

.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/

Reporting Security Issues

Please do not report security issues in public. Please email security@openedx.org.