github.com/thanos-io/thanos@v0.32.5/pkg/ui/react-app/README.md (about)

     1  # Working with the React UI
     2  
     3  This file explains how to work with the React-based Thanos UI.
     4  
     5  ## Introduction
     6  
     7  The [React-based](https://reactjs.org/) Thanos UI was bootstrapped using [Create React App](https://github.com/facebook/create-react-app), a popular toolkit for generating React application setups. You can find general information about Create React App on [their documentation site](https://create-react-app.dev/).
     8  
     9  Instead of plain JavaScript, we use [TypeScript](https://www.typescriptlang.org/) to ensure typed code.
    10  
    11  ## Development environment
    12  
    13  To work with the React UI code, you will need to have the following tools installed:
    14  
    15  * The [Node.js](https://nodejs.org/) JavaScript runtime.
    16  * The [npm](https://www.npmjs.com/) package manager. Once you installed Node, npm should already be available.
    17  * *Recommended:* An editor with TypeScript, React, and [ESLint](https://eslint.org/) linting support. See e.g. [Create React App's editor setup instructions](https://create-react-app.dev/docs/setting-up-your-editor/). If you are not sure which editor to use, we recommend using [Visual Studio Code](https://code.visualstudio.com/docs/languages/typescript). Make sure that [the editor uses the project's TypeScript version rather than its own](https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript).
    18  
    19  **NOTE**: When using Visual Studio Code, be sure to open the `pkg/ui/react-app` directory in the editor instead of the root of the repository. This way, the right ESLint and TypeScript configuration will be picked up from the React workspace.
    20  
    21  ## Installing npm dependencies
    22  
    23  The React UI depends on a large number of [npm](https://www.npmjs.com/) packages. These are not checked in, so you will need to download and install them locally via the npm package manager:
    24  
    25      npm install
    26  
    27  npm consults the `package.json` and `package-lock.json` files for dependencies to install. It creates a `node_modules` directory with all installed dependencies.
    28  
    29  ## Running a local development server
    30  
    31  You can start a development server for the React UI outside of a running Thanos server by running:
    32  
    33      npm start
    34  
    35  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.
    36  
    37  Due to a `"proxy": "http://localhost:10902"` setting in the `package.json` file, any API requests from the React UI are proxied to `localhost` on port `10902` by the development server. This allows you to run a normal Thanos Query server to handle API requests, while iterating separately on the UI.
    38  
    39      [browser] ----> [localhost:3000 (dev server)] --(proxy API requests)--> [localhost:10902 (Thanos)]
    40  
    41  ## Running tests
    42  
    43  Create React App uses the [Jest](https://jestjs.io/) framework for running tests. To run tests in interactive watch mode:
    44  
    45      npm test
    46  
    47  To generate an HTML-based test coverage report, run:
    48  
    49      CI=true npm test --coverage
    50  
    51  This creates a `coverage` subdirectory with the generated report. Open `coverage/lcov-report/index.html` in the browser to view it.
    52  
    53  The `CI=true` environment variable prevents the tests from being run in interactive / watching mode.
    54  
    55  See the [Create React App documentation](https://create-react-app.dev/docs/running-tests/) for more information about running tests.
    56  
    57  ## Linting
    58  
    59  We define linting rules for the [ESLint](https://eslint.org/) 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.
    60  
    61  To detect and automatically fix lint errors, run:
    62  
    63      npm run lint
    64  
    65  This is also available via the `react-app-lint-fix` target in the main Thanos `Makefile`.
    66  
    67  ## Building the app for production
    68  
    69  To build a production-optimized version of the React app to a `build` subdirectory, run:
    70  
    71      npm run build
    72  
    73  **NOTE:** You will likely not need to do this directly. Instead, this is taken care of by the `assets` target in the main Thanos `Makefile` when building the full binary.
    74  
    75  ## Integration into Thanos
    76  
    77  To build a Thanos binary that includes a compiled-in version of the production build of the React app, change to the root of the repository and run:
    78  
    79      make build
    80  
    81  This compiles in all web assets into the Thanos binary.
    82  
    83  Note that `make build` only compiles static assets using `bindata.go`, if you are working on React UI, make sure you run `make assets` to update `pkg/ui/bindata.go`