diff --git a/hivemq-edge/src/frontend/.env b/hivemq-edge/src/frontend/.env
index dc092c5956..d2ee9e9725 100644
--- a/hivemq-edge/src/frontend/.env
+++ b/hivemq-edge/src/frontend/.env
@@ -5,3 +5,4 @@ VITE_APP_ISSUES=https://hivemq.kanbanize.com/ctrl_board/57/
VITE_FLAG_MOCK_SERVER=false
VITE_FLAG_FACET_SEARCH=true
VITE_FLAG_WORKSPACE_FLOW_PANEL=true
+VITE_FLAG_TOPIC_EDITOR_SHOW_BRANCHES=false
diff --git a/hivemq-edge/src/frontend/.env.example b/hivemq-edge/src/frontend/.env.example
index 580b60e8f0..8a82e4d448 100644
--- a/hivemq-edge/src/frontend/.env.example
+++ b/hivemq-edge/src/frontend/.env.example
@@ -1,3 +1,6 @@
VITE_API_BASE_URL="the base URL of the API server"
PERCY_TOKEN="The token from Percy project"
+PERCY_BRANCH=local
+PERCY_PARALLEL_TOTAL=-1
+PERCY_PARALLEL_NONCE=1234
diff --git a/hivemq-edge/src/frontend/README.md b/hivemq-edge/src/frontend/README.md
index ef943b0bec..4773434816 100644
--- a/hivemq-edge/src/frontend/README.md
+++ b/hivemq-edge/src/frontend/README.md
@@ -4,14 +4,19 @@ HiveMQ Edge Edition
## Libraries
-| Library | Description | Link |
-| ----------- | ----------------------------------------------------------------------- | -------------------------------------------- |
-| React | Main UI Framework to build reactive frontend applications | https://react.dev/ |
-| React Query | Data-fetching library for web applications | https://tanstack.com/query/latest/docs/react |
-| Axios | Use modern network handler to send, resend or intercept network request | https://github.com/axios/axios |
-| Chakra UI | Simple, modular and accessible UI component library | https://chakra-ui.com/ |
-| React icons | Icons with ES6 imports | https://react-icons.github.io/react-icons/ |
-| i18next | Internationalisation framework | https://react.i18next.com/ |
+| Library | Description | Link |
+| --------------------- | --------------------------------------------------------------------------------- | --------------------------------------------------- |
+| React | Main UI Framework to build reactive frontend applications | https://react.dev/ |
+| React Query | Data-fetching library for web applications | https://tanstack.com/query/latest/docs/react |
+| Axios | Use modern network handler to send, resend or intercept network request | https://github.com/axios/axios |
+| Chakra UI | Simple, modular and accessible UI component library | https://chakra-ui.com/ |
+| React icons | Icons with ES6 imports | https://react-icons.github.io/react-icons/ |
+| i18next | Internationalisation framework | https://react.i18next.com/ |
+| react-jsonschema-form | A React component for building Web forms from JSON Schema.
Supports ChakraUI | https://github.com/rjsf-team/react-jsonschema-form/ |
+| chakra-react-select | A Chakra UI themed wrapper for the popular library React Select | https://github.com/csandman/chakra-react-select |
+| reactflow | Highly customizable library for building interactive node-based UI | https://reactflow.dev/ |
+| d3 | The JavaScript library for bespoke data visualization | https://d3js.org/ |
+| luxon | A powerful, modern, and friendly wrapper for JavaScript dates and times. | https://moment.github.io/luxon/#/ |
## Development
@@ -22,6 +27,13 @@ Install the following dependencies to start the development of the project.
| PNPM | Node package manager to install frontend dependencies | https://pnpm.io/installation |
| NVM | Node.js version manager | https://github.com/nvm-sh/nvm#installing-and-updating |
+On a MacOS, you can simply use the following two commands
+
+```shell
+brew install pnpm
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
+```
+
Then you can install the node.js version of the project by running
```shell
@@ -36,16 +48,6 @@ pnpm install --frozen-lockfile
**That's it happy development** 🎉
-### Run
-
-Start the application locally by running
-
-```shell
-pnpm dev
-```
-
-The web app will be running on `http://localhost:5173/
-
### Configuration
The application uses the "dotenv" pattern for configuring environment variables, see https://vitejs.dev/guide/env-and-mode.html.
@@ -61,12 +63,23 @@ Additional environment variables are loaded from the following files:
The `.env` file contains the main variables safe to be committed in git.
A `env.example` file has been created with all the values expected to be created
either in a `.env.local` or `.env.production.local`, both of them excluded from git.
-They are :
+
+Add the following keys into your `.env.local` :
```dotenv
VITE_API_BASE_URL="the base URL of the API server, ie http://localhost:8080"
```
+### Run
+
+Start the application locally by running
+
+```shell
+pnpm dev
+```
+
+The web app will be running on http://localhost:3000/app/login
+
### Deployment
To build a version ready for deployment, run the command
@@ -87,16 +100,17 @@ pnpm run dev:openAPI
```
```shell
-openapi --input /hivemq-edge-openapi.yaml \
+openapi --input '../../../../hivemq-edge/ext/hivemq-edge-openapi-2023.7.yaml' \
-o ./src/api/__generated__ \
- -c axios \
- --name HiveMqClient
+ -c axios \
+ --name HiveMqClient \
+ --exportSchemas true
```
with the following options:
- the `OpenAPI` spec is given as a local path, assuming deployment of the backend locally. It could also be a URL or even the string content.
- The current spec can be found in [hivemq/hivemq-edge-test](https://github.com/hivemq/hivemq-edge-test/blob/master/src/test/resources/hivemq-edge-openapi.yaml)
+ The current spec can be found in `/hivemq-edge/ext/hivemq-edge-openapi-2023.7.yaml`)
- all files are created in the `./src/api/__generated__` folder and are not expected to be modified manually (safe from `eslint` and `prettier`)
- `axios` is used for the HTTP client
- a custom client, to configure individual instances, is created as `HiveMqClient`