# Webviz
## Development
### How to get started
The easiest way to set up a development environment (frontend + backend) is to run:
```bash
docker-compose up
```
You can then access
- frontend application at `http://localhost:8080`
- backend at `http://localhost:8080/api/`
- backend API documentation at `http://localhost:8080/api/docs`
Before you start however you need to create a file `.env` at the root of the project
with the following variables:
```
AZURE_TENANT_ID=3aa4a235-b6e2-48d5-9195-7fcf05b459b0
AZURE_CLIENT_ID=6e4f6e15-5b73-40e7-835e-f563fabd604a
AZURE_CLIENT_SECRET=...
WEBVIZ_ENTERPRISE_SUBSCRIPTION_KEY=0
WEBVIZ_REDIS_AUTH_STORE_PASSWORD=0
WEBVIZ_REDIS_CACHE_PASSWORD=0
WEBVIZ_SESSION_STORE_FERNET_KEY=AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=
```
If you want to test persistence features locally with Cosmos DB Emulator, use:
```bash
docker-compose -f docker-compose.yml -f docker-compose-cosmos-db.yml up
```
### Hot reload
Both frontend and backend are hot reloaded through `docker compose` when files
in the following folders are changed:
```
./frontend/public
./frontend/src
./frontend/theme
./backend/src
```
If other files are changed through the host operating system,
e.g. typically when a new dependency is added, the relevant component needs to be rebuilt. I.e.
`docker-compose up --build frontend` or `docker-compose up --build backend`.
### Auto-generate `/frontend/src/api`
All the content in `/frontend/src/api/autogen` is auto-generated using the defined endpoints
in the Python backend. In order to update the auto-generated code you can either
1. Run `npm run generate-api --prefix ./frontend`.
2. Use the VSCode tasks shortcut:
a) `Ctrl + P` to open the command palette.
b) Type `> Tasks` and enter to filter to commands only.
c) Run task "Generate frontend code from OpenAPI".
In both cases the backend needs to already be running (e.g. using `docker-compose`
as stated above).
### Radix applications
The production application is located at https://webviz.fmu.equinor.com
(which is an alias for https://frontend-webviz-prod.c3.radix.equinor.com/,
which again is promoted manually from the pre-prod application mentioned below).
We have four applications in Radix built automatically and redeployed when pushing commits to the respective branch:
- [Pre-prod application](https://frontend-webviz-preprod.c3.radix.equinor.com/) built from the `main` branch.
- [Review application](https://frontend-webviz-review.c3.radix.equinor.com/) built from the `review` branch.
- [Review2 application](https://frontend-webviz-review2.c3.radix.equinor.com/) built from the `review2` branch.
- [Review3 application](https://frontend-webviz-review3.c3.radix.equinor.com/) built from the `review3` branch.
You can update, for example, the `review` branch with the state of another feature branch by running:
```
git push upstream <featurebranchname>:review --force
```
The `review2` and `review3` branches are updated similarly. The `main` branch only accepts commits through pull requests.
NB: Note that Radix will always use the `radixconfig.yml` as it is in `main` branch (unless changed in Radix UI).
### Usage in GitHub codespaces
Using the standard GitHub codespace image, you can easily start up the application by running
the same command as locally:
```
docker-compose up
```
in the terminal. When using GitHub codespaces you do not have to create the `.env` file since
environment variables are automatically set up for you at startup through repository settings.
Note that you need to have at least "collaborator" role in the repository in order to have
environment variables automatically set up.
When you start up the docker containers, GitHub codespace will automatically make a link where
you can access the application in development mode (i.e. changes you do the code will automatically
be reflected in the application).