docs: adapt contribution guide

.devcontainer/devcontainer.json

@@ -1,8 +1,5 @@
-// For format details, see https://aka.ms/devcontainer.json. For config options, see the
-// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
 {
   "name": "pocket-id",
-  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
   "image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
   "features": {
     "ghcr.io/devcontainers/features/go:1": {}
@@ -11,21 +8,14 @@
     "vscode": {
       "extensions": [
         "golang.go",
-        "svelte.svelte-vscode"
+        "svelte.svelte-vscode",
+        "bradlc.vscode-tailwindcss",
+        "esbenp.prettier-vscode"
       ]
     }
   },
-  // Use 'postCreateCommand' to run commands after the container is created.
+  "containerEnv": {
-  // Install npm dependencies for the frontend.
+    "HOST": "0.0.0.0"
-  "postCreateCommand": "npm install --prefix frontend"
+  },
-
+  "postCreateCommand": "npm install --prefix frontend && cd backend && go mod download"
-
-  // Features to add to the dev container. More info: https://containers.dev/features.
-  // "features": {},
-  // Use 'forwardPorts' to make a list of ports inside the container available locally.
-  // "forwardPorts": [],
-  // Configure tool-specific properties.
-  // "customizations": {},
-  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-  // "remoteUser": "root"
 }

.gitignore

@@ -18,7 +18,7 @@ Thumbs.db
 # Env
 .env
 .env.*
-!.env.example
+!.env.development-example
 !.env.test
 
 # Vite

.vscode/extensions.json

@@ -1,5 +1,8 @@
 {
   "recommendations": [
-    "inlang.vs-code-extension"
+    "golang.go",
+    "svelte.svelte-vscode",
+    "bradlc.vscode-tailwindcss",
+    "esbenp.prettier-vscode"
   ]
 }

CONTRIBUTING.md

@@ -17,7 +17,7 @@ Before you submit the pull request for review please ensure that
   example:
 
   ```
-  feat(share): add password protection
+  fix: hide global audit log switch for non admin users
   ```
 
   Where `TYPE` can be:
@@ -30,37 +30,47 @@ Before you submit the pull request for review please ensure that
 - Your pull request has a detailed description
 - You run `npm run format` to format the code
 
-## Setup project
+## Development Environment
 
-Pocket ID consists of a frontend, backend and a reverse proxy. There are two ways to get the development environment setup:
+Pocket ID consists of a frontend and backend. In production the frontend gets statically served by the backend, but in development they run as separate processes to enable hot reloading.
 
-## 1. Using DevContainers
+There are two ways to get the development environment setup:
+
+### 1. Install required tools
+
+#### With Dev Containers
+
+If you use [Dev Containers](https://code.visualstudio.com/docs/remote/containers) in VS Code, you don't need to install anything manually, just follow the steps below.
 
 1. Make sure you have [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension installed
 2. Clone and open the repo in VS Code
 3. VS Code will detect .devcontainer and will prompt you to open the folder in devcontainer
 4. If the auto prompt does not work, hit `F1` and select `Dev Containers: Open Folder in Container.`, then select the pocket-id repo root folder and it'll open in container.
 
-## 2. Manual
+#### Without Dev Containers
 
-### Backend
+If you don't use Dev Containers, you need to install the following tools manually:
 
-The backend is built with [Gin](https://gin-gonic.com) and written in Go.
+- [Node.js](https://nodejs.org/en/download/) >= 22
+- [Go](https://golang.org/doc/install) >= 1.24
+- [Git](https://git-scm.com/downloads)
 
-#### Setup
+### 2. Setup
+
+#### Backend
+
+The backend is built with [Gin](https://gin-gonic.com) and written in Go. To set it up, follow these steps:
 
 1. Open the `backend` folder
-2. Copy the `.env.example` file to `.env` and edit the variables as needed
+2. Copy the `.env.development-example` file to `.env` and edit the variables as needed
-3. Start the backend with `go run -tags e2etest,exclude_frontend ./cmd`
+3. Start the backend with `go run -tags exclude_frontend ./cmd`
 
 ### Frontend
 
-The frontend is built with [SvelteKit](https://kit.svelte.dev) and written in TypeScript.
+The frontend is built with [SvelteKit](https://kit.svelte.dev) and written in TypeScript. To set it up, follow these steps:
-
-#### Setup
 
 1. Open the `frontend` folder
-2. Copy the `.env.example` file to `.env` and edit the variables as needed
+2. Copy the `.env.development-example` file to `.env` and edit the variables as needed
 3. Install the dependencies with `npm install`
 4. Start the frontend with `npm run dev`
 
@@ -70,8 +80,15 @@ You're all set! The application is now listening on `localhost:3000`. The backen
 
 We are using [Playwright](https://playwright.dev) for end-to-end testing.
 
+If you are contributing to a new feature please ensure that you add tests for it. The tests are located in the `tests` folder at the root of the project.
+
 The tests can be run like this:
 
-1. Start the backend normally
+1. Visit the setup folder by running `cd tests/setup`
-2. Start the frontend in production mode with `npm run build && node --env-file=.env build/index.js`
+
-3. Run the tests with `npm run test`
+2. Start the test environment by running `docker compose up -d --build`
+
+3. Go back to the test folder by running `cd ..`
+4. Run the tests with `npx playwright test`
+
+If you make any changes to the application, you have to rebuild the test environment by running `docker compose up -d --build` again.

backend/.env.development-example

@@ -2,6 +2,8 @@
 # All environment variables can be found on https://pocket-id.org/docs/configuration/environment-variables
 
 APP_ENV=development
-APP_URL=http://localhost:1411
+# Set the APP_URL to the URL where the frontend is listening
+# In the development environment the backend gets proxied by the frontend
+APP_URL=http://localhost:3000
 PORT=1411
 MAXMIND_LICENSE_KEY=your_license_key

frontend/.env.development-example

@@ -1,2 +1,3 @@
 # If the backend in your development environment is running on a different port, change the value of the variable below.
 DEVELOPMENT_BACKEND_URL=http://localhost:1411
+PORT=3000

frontend/vite.config.ts

@@ -16,6 +16,7 @@ export default defineConfig({
 	],
 
 	server: {
+		host: process.env.HOST,
 		proxy: {
 			'/api': {
 				target: process.env.DEVELOPMENT_BACKEND_URL || 'http://localhost:1411'