A generic header for Open edX micro-frontend applications.
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.
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
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.
This library has the following exports:
(default)
: The header as a React component.messages
: Internationalization messages suitable for use with @edx/frontend-platform/i18ndist/index.scss
: A SASS file which contains style information for the component. It should be imported into the micro-frontend's own SCSS file.
Install dependencies:
npm i
Start the development server:
npm start
Build a production distribution:
npm run build
Any changes to this library have to be pushed to npmjs.com to be reflected on the build.
Publish to npm:
npm publish
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/frontend-component-header@1.0.0'