# Web UI

**Dependency Management**: We use the [Nix package manager](https://nixos.org/) to manage dependencies and ensure reproducibility, making your development process more robust.

The files in `src/api` are autogenerated from the openapi.json. The openapi.json comes from the backend, from fastapi which autogenerates the openapi.json file from the python code.

We then use orval to generate typescript files to `src/api`

## Build Development Web UI

To build the dev web ui with hotreloading

```bash
npm run dev
```

## Build release Web UI

To build the release version execute

```bash
nix build .#ui
```

you can find the output in your current working directory at a symlink called `result`
The actual web files served by the web server are located in
`result/lib/node_modules/clan-ui/out`

You can also build it directly in you dev environment. Notice however that this will clutter your directory. The out directory is directly in you working dir.

```bash
npm run build
```

## Development environment

The development environment created by `nix develop` or automatically by `direnv` is located at [shell.nix](shell.nix). The `shellHook` variable executes bash code.

## Updating dependencies

After changing dependencies with

`npm <dep> i --package-lock-only`

Update floco dependencies:

`nix run github:aakropotkin/floco -- translate -pt -o ./nix/pdefs.nix`

The prettier tailwind class sorting is not yet working properly with our devShell integration.

To sort classnames manually:

`cd /clan-core/pkgs/ui/`