# Web UI
-The Web UI code and configuration is in the repository directory [ui/web](./ui/web). Commands execution is relative to that directory.
+The Web UI code and configuration is in the repository directory [ui/web](./../../ui/web/). Commands execution is relative to that directory.
## Project setup
+### Dependencies
+
```shell
corepack enable
corepack prepare pnpm@latest --activate
pnpm install
```
-The simulator UI server must be enabled, use WebSocket and disable authentication. The simulator main configuration file should have a `uiServer` section like this:
+### Configuration
+
+#### Simulator UI Server Configuration
+
+The simulator UI server must be enabled, use WebSocket transport type and have authentication disabled. The simulator main configuration file should have a `uiServer` section like this:
```json
"uiServer": {
},
```
-See [here](../../README.md#charging-stations-simulator-configuration) for more details.
+See [here](./../../README.md#charging-stations-simulator-configuration) for more details.
+
+#### Web UI configuration
+
+Copy the configuration template [src/assets/config-template.ts](src/assets/config-template.ts) to `src/assets/config.ts`.
### Run
-#### Compiles and run for production
+#### Compiles for production
```shell
-pnpm start
+pnpm build
```
-#### Compiles and run for development
+#### Compiles and preview locally for production
+
+```shell
+pnpm preview
+```
+
+#### Compiles and run for production
```shell
-pnpm serve
+pnpm start
```
#### Try it out
1. With the top 2 buttons you can now stop and afterwards start the simulator and inspect the server console for the number of charging stations, e.g. with the default configuration: `Charging stations simulator ... started with 10 charging station(s)`
2. Each charging station is a row in the table below, try "Stop Charging Station" and refresh with the large blue button and see the status Started turns from Yes into No.
-### Compiles and minifies for production
+### Development
+
+#### Compiles and run for development
```shell
-pnpm build
+pnpm dev
+```
+
+#### Formats files
+
+```shell
+pnpm format
```
-### Lints files
+#### Lints and fixes files
```shell
-pnpm lint
+pnpm lint:fix
```