From 827b652b68065aef0b7c5c1f61c9f3cfbfeb453b Mon Sep 17 00:00:00 2001
From: Tibo De Peuter <tibo.depeuter@ugent.be>
Date: Fri, 21 Mar 2025 10:01:38 +0100
Subject: [PATCH] docs: Beschrijf docker in installatie

---
 README.md          | 12 +++++++-----
 backend/README.md  | 25 ++++++++++++++++---------
 frontend/README.md |  8 ++++++++
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index dc09bbfc..7bbe7269 100644
--- a/README.md
+++ b/README.md
@@ -21,14 +21,17 @@ Alternatief kan je één van de volgende methodes gebruiken om de applicatie lok
 
 ### Quick start
 
+Om de applicatie lokaal te draaien als kant-en-klare Docker-containers:
+
 1. Installeer Docker en Docker Compose op je systeem (zie [Docker](https://docs.docker.com/get-docker/)
    en [Docker Compose](https://docs.docker.com/compose/)).
 2. Clone deze repository.
 3. In de backend, kopieer `.env.example` (of `.env.development.example`) naar `.env` en pas de variabelen aan waar
    nodig.
-4. Voer `docker compose up` uit in de root van de repository.
+4. Voer `docker compose -f compose.staging.yml up --build` uit in de root van de repository.
 5. Optioneel: Configureer de applicatie aan de hand van
    de [configuratiehandleiding](https://github.com/SELab-2/Dwengo-1/wiki/Administrator:-Productie-omgeving#dwengo-1-configuratie).
+6. De applicatie is nu beschikbaar op [`http://localhost/`](http://localhost/) en [`http://localhost/api`](http://localhost/api).
 
 ```bash
 docker compose version
@@ -38,14 +41,13 @@ cp .env.example .env
 # Pas .env aan
 nano .env
 cd ..
-docker compose up
-# Configureer de applicatie
+docker compose -f compose.staging.yml up --build
 ```
 
-### Handmatige installatie
+### Handmatige installatie en ontwikkeling
 
 Zie de submappen voor de installatie-instructies van de [frontend](./frontend/README.md)
-en [backend](./backend/README.md).
+en [backend](./backend/README.md) en instructies voor het opzetten van een ontwikkelomgeving.
 
 ## Architectuur
 
diff --git a/backend/README.md b/backend/README.md
index 442cea82..48b14bbf 100644
--- a/backend/README.md
+++ b/backend/README.md
@@ -4,23 +4,21 @@
 
 ```shell
 npm install
+
+# Start de nodige services voor ontwikkeling
+cd ../ # Ga naar de root van de repository
+docker compose up -d
 ```
 
-Setup the environment variables in a `.env` file in the root of the project. You can use the `.env.example` file as a template.
+Zet de omgevingsvariabelen in een `.env` bestand in de root van het project.
+Je kan het `.env.example` bestand als template gebruiken.
 
-### Development
+### Ontwikkeling
 
 ```shell
 npm run dev
 ```
 
-### Production
-
-```shell
-npm run build
-npm run start
-```
-
 ### Tests
 
 Voer volgend commando uit om de unit tests uit te voeren:
@@ -29,6 +27,15 @@ Voer volgend commando uit om de unit tests uit te voeren:
 npm run test:unit
 ```
 
+### Productie
+
+```shell
+npm run build
+npm run start
+```
+
+Zie ook de [installatiehandleiding](https://github.com/SELab-2/Dwengo-1/wiki/Administrator:-Productie-omgeving).
+
 ## Keycloak configuratie
 
 Tijdens development is het voldoende om gebruik te maken van de keycloak configuratie die automatisch ingeladen wordt.
diff --git a/frontend/README.md b/frontend/README.md
index f798f404..8baba8b6 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -19,7 +19,15 @@ See [Vite Configuration Reference](https://vite.dev/config/).
 ## Project Setup
 
 ```sh
+# Install dependencies
 npm install
+
+# Start necessary services for development
+cd ../ # Go to the root of the repository
+docker compose up -d
+# Start the backend
+cd backend
+npm run dev # or npm run build && npm run start
 ```
 
 ### Compile and Hot-Reload for Development