Pipeline Status Test Coverage GitLab contributors Open Issues

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.

Contributions#

We welcome contributions of all kinds, including issues, comments, and merge requests. Please see our Contribution Guidelines for details.

License#

License details can be found in the 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:

Install npm (Node Package Manager).
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. For convenience, we can start the backend using Docker:

Install Docker Desktop
Open a PowerShell terminal (e.g., in the JavaScript IDE) and go to the root of the repository
Run the docker compose file to automatically set up the backend (e.g. in PowerShell):
```
docker compose up -d
```
This may take some time to download the images.
You can now access the backend (the API) via http://localhost:8000/docs

Run#

Open Docker Desktop
Open a PowerShell terminal (in the root directory) and re-run the backend:
```
docker compose up -d
```
You can now access the backend (the API) via http://localhost:8000/docs
Run and hot-reload the frontend for development:
```
npm run dev
```
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#

Open Docker Desktop
In Docker Desktop, switch to the Containers/App tab: Stop and Delete the SunPeek container sunpeek_frontend_development
In Docker Desktop, switch to the Volumes tab: Delete the SunPeek volume sunpeek_frontend_development_hit_postgres_data.
Next, follow the steps in Run

Option 2 - via PowerShell#

Make sure Docker Desktop is running
Open a PowerShell terminal (in the root directory) and run:
```
docker compose pull
docker compose up -d
```
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#

Run your application as described in the Run section
Run/Debug entrypoint.py in the Python Backend root.
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:

Run docker ps to get the id of the sunpeek_frontend_development-api-1 container
Extract the data using docker cp CONTAINER_ID:/code/raw_data <path-to-your-python-backend>/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