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 as it 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.