Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix docs: modern UI developing guide #2446

Merged
merged 1 commit into from
Nov 6, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 42 additions & 32 deletions docs/developing-locust.rst
Original file line number Diff line number Diff line change
Expand Up @@ -124,64 +124,74 @@ Making changes to Locust's Modern Web UI

The modern Web UI is built using React and Typescript

## Setup
Setup
-----

### Node
Node
````

Install node using nvm to easily switch between node version

- Copy and run the install line from [nvm](https://github.com/nvm-sh/nvm) (starts with curl/wget ...)
- Copy and run the install line from `nvm <https://github.com/nvm-sh/nvm>`_ (starts with curl/wget ...)

- Verify nvm was installed correctly

```bash
nvm --version
```
.. code-block:: console

$ nvm --version

- Install the proper Node version according to engines in the locust/webui/package.json
- Install the proper Node version according to engines in the ``locust/webui/package.json``

.. code-block:: console

```bash
nvm install {version}
nvm alias default {version}
```
$ nvm install {version}
$ nvm alias default {version}

### Yarn
Yarn
````

- Install Yarn from their official website (avoid installing through Node if possible)
- Verify yarn was installed correctly

```bash
yarn --version
```
.. code-block:: console

$ yarn --version

- Next in web, install all dependencies

```bash
cd locust/webui
yarn
```
.. code-block:: console

$ cd locust/webui
$ yarn


## Developing
Developing
----------

To develop the frontend, run `yarn dev`. This will start the Vite dev server and allow for viewing and editing the frontend, without needing to a run a locust web server
To develop the frontend, run ``yarn dev``. This will start the Vite dev server and allow for viewing and editing the frontend, without needing to a run a locust web server

To develop while running a locust instance, run `yarn dev:watch`. This will output the static files to the `dist` directory. Then simply a locust instance using the `--modern-ui` flag. Vite will automatically detect any changed files and re-build as needed. Simply refresh the page to view the changes
To develop while running a locust instance, run ``yarn dev:watch``. This will output the static files to the ``dist`` directory. Then simply a locust instance using the ``--modern-ui`` flag. Vite will automatically detect any changed files and re-build as needed. Simply refresh the page to view the changes

To compile the webui, run `yarn build`
To compile the webui, run ``yarn build``

The frontend can additionally be built using make:
```bash
make frontend_build
```

## Linting
.. code-block:: console

$ make frontend_build


Linting
-------

Run `yarn lint` to detect lint failures in the frontend project. Running `yarn lint --fix` will resolve any issues that are automatically resolvable. Your IDE can aditionally be configured with ESLint to resolve these issues on save.
Run ``yarn lint`` to detect lint failures in the frontend project. Running ``yarn lint --fix`` will resolve any issues that are automatically resolvable. Your IDE can aditionally be configured with ESLint to resolve these issues on save.

## Formatting
Formatting
----------

Run `yarn format` to fix any formatting issues in the frontend project. Once again your IDE can be configured to automatically format on save.
Run ``yarn format`` to fix any formatting issues in the frontend project. Once again your IDE can be configured to automatically format on save.

## Typechecking
Typechecking
------------

We use Typescript in the frontend project. Run `yarn type-check` to find any issues.
We use Typescript in the frontend project. Run ``yarn type-check`` to find any issues.