diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 8920b5b0..2f3a86eb 100644 --- a/.devcontainer/devcontainer.json +++ b/.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. - // Install npm dependencies for the frontend. - "postCreateCommand": "npm install --prefix frontend" - - - // 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" -} \ No newline at end of file + "containerEnv": { + "HOST": "0.0.0.0" + }, + "postCreateCommand": "npm install --prefix frontend && cd backend && go mod download" +} diff --git a/.gitignore b/.gitignore index 7d16ab0f..efb0a768 100644 --- a/.gitignore +++ b/.gitignore @@ -18,7 +18,7 @@ Thumbs.db # Env .env .env.* -!.env.example +!.env.development-example !.env.test # Vite diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 116d6852..64fce0ea 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,5 +1,8 @@ { "recommendations": [ - "inlang.vs-code-extension" + "golang.go", + "svelte.svelte-vscode", + "bradlc.vscode-tailwindcss", + "esbenp.prettier-vscode" ] -} \ No newline at end of file +} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 964ce94d..1d426d8e 100644 --- a/CONTRIBUTING.md +++ b/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 -3. Start the backend with `go run -tags e2etest,exclude_frontend ./cmd` +2. Copy the `.env.development-example` file to `.env` and edit the variables as needed +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. - -#### Setup +The frontend is built with [SvelteKit](https://kit.svelte.dev) and written in TypeScript. To set it up, follow these steps: 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 -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` +1. Visit the setup folder by running `cd tests/setup` + +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. diff --git a/backend/.env.example b/backend/.env.development-example similarity index 55% rename from backend/.env.example rename to backend/.env.development-example index 09a7d04d..5ff00bb2 100644 --- a/backend/.env.example +++ b/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 \ No newline at end of file diff --git a/frontend/.env.example b/frontend/.env.development-example similarity index 94% rename from frontend/.env.example rename to frontend/.env.development-example index 1b670cba..c7a77c14 100644 --- a/frontend/.env.example +++ b/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 diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 2ae2332b..38e2b69b 100644 --- a/frontend/vite.config.ts +++ b/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'