Skip to main content

Frontend

The frontend is written in Typescript and React, as well as a few other important modules like:

  • Material UI
  • React Router
  • Redux
  • Redux Sagas

Building and running​

The frontend can be quickly built using:

make frontend

Once built, it can be run in development mode (auto-refresh) using:

make run-frontend

This command leverages the create-react-app's start script that launches a development server for the frontend (by default at localhost:3000).

API documentation​

API documentation for TypeScript is done with typedoc and typedoc-plugin-markdown, and is configured in tsconfig.json

make docs

The API output markdown is generated in docs/development/api and is not committed to Git, but is shown on the website at headlamp/latest/development/api

Storybook​

Components can be discovered, developed, and tested inside the 'storybook'.

From within the Headlamp repo run:

make storybook

If you are adding new stories, please wrap your story components with the TestContext helper component. This sets up the store, memory router, and other utilities that may be needed for current or future stories:

<TestContext>
  <YourComponentTheStoryIsAbout />
</TestContext>

Accessibility (a11y)​

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.