This file explains how to work with the React-based website.
The React-based website was bootstrapped using Create React App, a popular toolkit for generating React application setups. You can find general information about Create React App on their documentation site.
Instead of plain JavaScript, I use TypeScript to ensure typed code.
To work with the React UI code, you will need to have the following tools installed:
- The Node.js JavaScript runtime.
- The Yarn package manager.
- Recommended: An editor with TypeScript, React, and ESLint linting support. See e.g. Create React App's editor setup instructions. If you are not sure which editor to use, we recommend using Visual Studio Code. Make sure that the editor uses the project's TypeScript version rather than its own.
The React UI depends on a large number of npm packages. These are not checked in, so you will need to download and install them locally via the Yarn package manager:
yarn
Yarn consults the package.json
and yarn.lock
files for dependencies to install. It creates a node_modules
directory with all installed dependencies.
You can start a development server for the React UI outside of a running Prometheus server by running:
yarn start
This will open a browser window with the React app running on http://localhost:3000/. The page will reload if you make edits to the source code. You will also see any lint errors in the console.
Create React App uses the Jest and React Testing Library framework for running tests. To run tests in interactive watch mode:
yarn test
We define linting rules for the ESLint linter. We recommend integrating automated linting and fixing into your editor (e.g. upon save), but you can also run the linter separately from the command-line.
To detect and automatically fix lint errors, run:
yarn lint
To build a production-optimized version of the React app to a build
subdirectory, run:
yarn build