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


    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 as it sets up the store, memory router, and other utilities that may be needed for current or future stories:

      <YourComponentTheStoryIsAbout />

    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.