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 mardown 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
    

    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 disable the alert message during development, use the following:

    REACT_APP_SKIP_A11Y=true make run-frontend