Merge pull request #44 from pixelcorp-nl/fix-readme

Update readme

Author: joppekoers

.github/workflows/test.yml

@@ -3,19 +3,24 @@ name: Tests
 on:
   pull_request:
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   test:
     runs-on: ubuntu-latest
     timeout-minutes: 10
 
     steps:
     - name: Checkout code
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
-    - uses: docker-practice/actions-setup-docker@master
+    - name: Setup Docker buildx
+      uses: docker/setup-buildx-action@v3.8.0
 
     - name: Install pnpm
-      uses: pnpm/action-setup@v2
+      uses: pnpm/action-setup@v4
       with:
         version: latest
 
@@ -34,10 +39,14 @@ jobs:
         secrets: ${{ toJSON(secrets) }}
 
     - name: Setup .env file
-      run: env >> frontend/.env
+      run: cp frontend/.env-example frontend/.env
 
     - name: Start services
       run: make start-detached
 
+    - name: Wait for services to start
+      timeout-minutes: 2
+      run: make wait-for-healthcheck
+
     - name: Run tests
       run: (cd frontend && npm test)

Makefile

@@ -1,6 +1,6 @@
 # Start dependencies run frontend and backend seperately
 start-deps:
-	docker compose up --remove-orphans --build --detach redis postgres
+	docker compose up --remove-orphans --build --detach canvas-redis canvas-postgres
 
 # Starts all containers
 start:
@@ -13,7 +13,7 @@ start-detached:
 # Wait for services to start
 wait-for-healthcheck: $(eval SHELL:=/bin/bash)
 	while [ 1 ]; do \
-		STATUS=$$(docker inspect -f {{.State.Health.Status}} frontend); \
+		STATUS=$$(docker inspect -f {{.State.Health.Status}} canvas-frontend); \
 		echo "$$STATUS"; \
 		[[ "$$STATUS" = "unhealthy" ]] && sleep 1 && docker compose logs && exit 1; \
 		[[ "$$STATUS" = "healthy" ]] && exit 0; \
@@ -25,20 +25,20 @@ down:
 	docker compose down --remove-orphans --timeout 4
 
 nuke-postgres:
-	docker compose down --remove-orphans --timeout 4 postgres
-	rm -rf frontend/postgres-db
-	docker compose up --remove-orphans --build --detach postgres
+	docker compose down --remove-orphans --timeout 4 canvas-postgres
+	rm -rf frontend/postgres-db postgres-db
+	docker compose up --remove-orphans --build --detach canvas-postgres
 
 nuke-redis:
-	docker compose down --remove-orphans --timeout 4 redis
-	rm -rf frontend/redis-db
-	docker compose up --remove-orphans --build --detach redis
-
-nuke-all:
-	docker compose down --remove-orphans --timeout 4
-	rm -rf frontend/postgres-db
-	rm -rf frontend/redis-db
-	docker compose up --remove-orphans --build --detach redis postgres
+	docker compose down --remove-orphans --timeout 4 canvas-redis
+	rm -rf frontend/redis-db redis-db
+	docker compose up --remove-orphans --build --detach canvas-redis
+
+nuke-db:
+	docker compose down --remove-orphans --timeout 4 canvas-redis canvas-postgres
+	rm -rf frontend/postgres-db postgres-db
+	rm -rf frontend/redis-db redis-db
+	docker compose up --remove-orphans --build --detach canvas-redis canvas-postgres
 
 # Run tests
 test:

README.md

@@ -19,9 +19,9 @@ Pixels introduces students to the exciting world of programming by enabling them
 
 ## Prerequisites
 
-- [Node.js](https://nodejs.org/) >=18.x
+- [Node.js](https://github.com/nodesource/distributions) >=20.x
 - [pnpm](https://pnpm.io/installation) >=8.x
-- [Docker](https://www.docker.com/) >=23.x
+- [Docker](https://docs.docker.com/get-started/get-docker/) >=25.x
 
 ## Development
 
@@ -35,10 +35,10 @@ cd canvas.edu
 2. Set up environment variables
 ```shell
 cp frontend/.env-example frontend/.env
-# by default you don't have to change anything in the .env file
+# You probably don't have to change anything in the .env file, but take a look nonetheless
 ```
 
-3. Start dependencies (database, etc.)
+3. Start dependencies (postgres database, etc.)
 ```sh
 make start-deps
 ```
@@ -81,7 +81,7 @@ If you break the database(s), you can clear them by:
 # cd to the root of the project
 make nuke-postgres # if you want to clear the postgres database
 make nuke-redis # if you want to clear the redis database
-make nuke-all # if you want to clear both databases
+make nuke-db # if you want to clear both databases
 ```
 
 

docker-compose.yaml

@@ -1,31 +1,31 @@
 version: "3.7"
 services:
-  frontend:
-    container_name: frontend
+  canvas-frontend:
+    container_name: canvas-frontend
     restart: unless-stopped
     build: ./frontend
     ports:
       - 5173:5173
     env_file:
       - ./frontend/.env
     depends_on:
-      - redis
-      - postgres
+      - canvas-redis
+      - canvas-postgres
 
-  postgres:
-    container_name: postgres
+  canvas-postgres:
+    container_name: canvas-postgres
     restart: unless-stopped
-    image: postgres:alpine
+    image: postgres:17.2-alpine3.21
     environment:
       POSTGRES_PASSWORD: postgres
     ports:
       - 5432:5432
     volumes:
       - ./postgres-db:/var/lib/postgresql/data
 
-  redis:
-    container_name: redis
-    image: redis:alpine
+  canvas-redis:
+    container_name: canvas-redis
+    image: redis:7.4.2-alpine
     restart: unless-stopped
     volumes:
       - ./redis-db:/data

frontend/.env-example

@@ -1,5 +1,5 @@
-PRIVATE_REDIS_URL=redis://redis:16379
-PRIVATE_POSTGRES_URL=postgres://postgres:postgres@postgres:5432/postgres
+PRIVATE_REDIS_URL=redis://canvas-redis:6379
+PRIVATE_POSTGRES_URL=postgres://postgres:postgres@canvas-postgres:5432/postgres
 PUBLIC_CANVAS_ID=42
 PUBLIC_CANVAS_WIDTH=200
 PUBLIC_CANVAS_HEIGHT=200

frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-alpine as builder-main
+FROM node:18-alpine AS builder-main
 WORKDIR /app
 
 RUN npm i -g pnpm
@@ -12,11 +12,11 @@ RUN pnpm run build
 RUN pnpm prune --prod
 
 # =============== MAIN ===============
-FROM gcr.io/distroless/nodejs:18 as main
+FROM node:18-alpine AS main
 ENV NODE_ENV=production
 ENV PORT=5173
 WORKDIR /app
-# HEALTHCHECK --interval=5s --timeout=5s --start-period=10s --retries=3 CMD wget -q -O - http://localhost:5173/health
+HEALTHCHECK --interval=5s --timeout=1s --start-period=1s --retries=3 CMD wget -q -O - http://127.0.0.1:5173/health
 
 COPY --from=builder-main /app/package.json ./package.json
 # COPY --from=builder-main /app/node_modules ./node_modules