frontend-component-header

Overview

A generic header for Open edX micro-frontend applications.

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.

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.
• 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.
• ENABLE_ORG_LOGO - A boolean flag to enable the display of the org logo on the center of the header nav bar. Defaults to false

Installation

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

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

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

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
• 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.

Examples

• An example of component and messages usage.
• An example of SCSS file usage.

Development

Install dependencies:

npm i

Start the development server:

npm start

Build a production distribution:

npm run build

Publishing to npmjs.com

Any changes to this library have to be pushed to npmjs.com to be reflected on the build.

Publish to npm:

npm publish

Deploy in production

To replace the default edx header with the new one, use one of the following instructions:

Add the necessary settings to the mfe_brand plugin:

RUN npm install '@edx/frontend-component-header@npm:@nauedu/frontend-component-header'

Alternatively, you can specify the version:

RUN npm install '@edx/frontend-component-header@npm:@nauedu/[email protected]'