[](https://hub.docker.com/r/sunpeek/web-ui)
# SunPeek WebUI
You are currently looking at the SunPeek **WebUI**, the JavaScript-based frontend responsible for the graphical web interface.
This repository is mainly for development. If you just want to use SunPeek, please visit the [SunPeek Documentation](https://docs.sunpeek.org/).
## Contributions
We welcome contributions of all kinds, including issues, comments, and merge requests.
Please see our [Contribution Guidelines](https://docs.sunpeek.org/contributing/) for details.
## License
License details can be found in the [LICENSE](https://gitlab.com/sunpeek/web-ui/-/blob/main/LICENSE) file.
----------
# Developer Guide
## Installation
SunPeek WebUI is the frontend of SunPeek.
It requires access to the SunPeek Backend to work properly.
Use `npm` (Node Package Manager) to install the frontend code:
1. Install [npm](https://nodejs.org/en/download/) (Node Package Manager).
2. Clone the repository and run the following command in the root directory:
```
npm install
```
The frontend can only be run together with the [SunPeek Backend](https://gitlab.com/sunpeek/sunpeek).
For convenience, we can start the backend using Docker:
3. Install [Docker Desktop](https://docs.docker.com/desktop/install/windows-install/)
4. Open a PowerShell terminal (e.g., in the JavaScript IDE) and go to the root of the repository
5. Run the docker compose file to automatically set up the backend (e.g. in PowerShell):
```
docker compose up -d
```
6. This may take some time to download the images.
7. You can now access the backend (the API) via http://localhost:8000/docs
## Run
1. Open Docker Desktop
2. Open a PowerShell terminal (in the root directory) and re-run the backend:
```
docker compose up -d
```
3. You can now access the backend (the API) via http://localhost:8000/docs
4. Run and hot-reload the frontend for development:
```
npm run dev
```
5. You should now have access to the WebUI via `http://localhost:5173/`
Note that Vite might choose a different port if `5173` is already in use.
## Update
To update to the latest backend version, follow the steps below.
### Option 1 - via Docker Desktop
1. Open Docker Desktop
2. In Docker Desktop, switch to the **Containers/App** tab: Stop and Delete the SunPeek container `sunpeek_frontend_development`
3. In Docker Desktop, switch to the **Volumes** tab: Delete the SunPeek volume `sunpeek_frontend_development_hit_postgres_data`.
4. Next, follow the steps in **Run**
### Option 2 - via PowerShell
1. Make sure Docker Desktop is running
2. Open a PowerShell terminal (in the root directory) and run:
```
docker compose pull
docker compose up -d
```
3. Next, follow the steps in **Run**
## Debugging with the Python Backend
It is also possible to debug the WebUI directly with the Python Backend
to debug the frontend and backend together at the same time.
### Connecting locally
1. Run your application as described in the **Run** section
2. Run/Debug `entrypoint.py` in the Python Backend root.
3. With this setup, the Python API should automatically assume priority over Docker
and accept the API requests instead of the Docker container.
### Syncing Data
However, the measurement data is still missing. It is stored inside the Docker container and is not directly accessible when running the Python backend locally. You can copy the data from the container to your local Python backend directory:
1. Run `docker ps` to get the id of the `sunpeek_frontend_development-api-1` container
2. Extract the data using `docker cp CONTAINER_ID:/code/raw_data /raw_data`. If you put this data in the raw_data directory inside your Python backend root, you should have access to the same data
**Example:**
```
> docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
252ea9fc34e7 sunpeek/sunpeek:0.3.82 "python entrypoint.py" 6 minutes ago Up 2 minutes 0.0.0.0:8000->8000/tcp sunpeek_frontend_development-api-1
e834765537d9 timescale/timescaledb:latest-pg14 "docker-entrypoint.s…" 6 minutes ago Up 6 minutes (healthy) 0.0.0.0:5432->5432/tcp sunpeek_frontend_development-db-1
> docker cp 252ea9fc34e7:/code/raw_data/. "C:\Users\SunPeek\SunPeek Python\raw_data"
```
## Testing
SunPeek WebUI uses Jest for automated testing. Tests are located in the `/tests` directory.
To run all tests:
```
npm test
```