The frontend is written in Typescript and React, as well as a few other important modules like:
- Material UI
- React Router
- Redux Sagas
Building and running
The frontend can be quickly built using:
Once built, it can be run in development mode (auto-refresh) using:
This command leverages the
create-react-app’s start script that launches
a development server for the frontend (by default at
API documentation for TypeScript is done with typedoc and typedoc-plugin-markdown , and is configured in tsconfig.json
The API output mardown is generated in docs/development/api and is not committed to git, but is shown on the website at headlamp/latest/development/api
Components can be discovered, developed and tested inside the ‘storybook’.
From within the Headlamp repo run:
If you are adding new stories, please wrap your story components with the
component as it sets up the store, memory router, and other utilities that may be needed for
current or future stories:
<TestContext> <YourComponentTheStoryIsAbout /> </TestContext>
Developer console warnings and errors
axe-core is used to detect some a11y issues at runtime when running Headlamp in developer mode. This detects more issues than testing components via eslint or via unit tests.
Any issues found are reported in the developer console.
To enable the alert message during development, use the following:
REACT_APP_SKIP_A11Y=false make run-frontend
This shows an alert when an a11y issue is detected.