From d98417c90e1676876b5f97200c23bafcbb2b76af Mon Sep 17 00:00:00 2001
From: Andrew Baldwin <abald.cg.ide@aldogroup.com>
Date: Thu, 21 Sep 2023 16:33:29 +0200
Subject: [PATCH] Update developing-locust.rst

---
 docs/developing-locust.rst | 66 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)

diff --git a/docs/developing-locust.rst b/docs/developing-locust.rst
index 1345df43e6..d01fabe4c8 100644
--- a/docs/developing-locust.rst
+++ b/docs/developing-locust.rst
@@ -117,3 +117,69 @@ Or you can make sass watch for changes to the ``.sass`` files and automatically
     $ make sass_watch
 
 The CSS files that are generated by SASS should be checked into version control.
+
+
+Making changes to Locust's Modern Web UI
+========================================
+
+The modern Web UI is built using React and Typescript
+
+## Setup
+
+### 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 ...)
+
+- Verify nvm was installed correctly
+
+```bash
+nvm --version
+```
+
+- Finally, install the proper Node version according to engines in the package.json
+
+```bash
+nvm install {version}
+nvm alias default {version}
+```
+
+### Yarn
+
+- Install Yarn from their official website (avoid installing through Node)
+- Verify yarn was installed correctly
+
+```bash
+yarn --version
+```
+
+- Next in dashboard, install all dependencies
+
+```bash
+cd dashboard
+yarn
+```
+
+## Developing
+
+To develop the frontend, run `yarn dev`. This will start the webpack 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 watch`. This will output the static website to the `dist` directory. Webpack will automatically detect any changed files and re-build as needed. Simply refresh the page to view the changes
+
+The frontend can additionally be built using make:
+```bash
+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.
+
+## 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.
+
+## Typechecking
+
+We use Typescript in the frontend project. Run `yarn type-check` to find any issues.