chore: add Dev Container (#313)

.devcontainer/devcontainer.json

@@ -0,0 +1,32 @@
+// 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": {},
+    "ghcr.io/devcontainers-extra/features/caddy:1": {}
+  },
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "golang.go",
+        "svelte.svelte-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"
+}

.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for more information:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://containers.dev/guide/dependabot
+
+version: 2
+updates:
+ - package-ecosystem: "devcontainers"
+   directory: "/"
+   schedule:
+     interval: weekly

.gitignore

@@ -48,3 +48,6 @@ pocket-id-backend
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+#Debug
+backend/cmd/__debug_*

.vscode/launch.json

@@ -0,0 +1,42 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Backend",
+      "type": "go",
+      "request": "launch",
+      "envFile": "${workspaceFolder}/backend/.env.example",
+      "env": {
+        "APP_ENV": "development"
+      },
+      "mode": "debug",
+      "program": "${workspaceFolder}/backend/cmd/main.go",
+    },
+    {
+      "name": "Frontend",
+      "type": "node",
+      "request": "launch",
+      "envFile": "${workspaceFolder}/frontend/.env.example",
+      "cwd": "${workspaceFolder}/frontend",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": [
+        "run",
+        "dev"
+      ]
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Development",
+      "configurations": [
+        "Backend",
+        "Frontend"
+      ],
+      "presentation": {
+        "hidden": false,
+        "group": "",
+        "order": 1
+      }
+    }
+  ],
+}

.vscode/tasks.json

@@ -0,0 +1,37 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Run Caddy",
+      "type": "shell",
+      "command": "caddy run --config reverse-proxy/Caddyfile",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "custom",
+        "pattern": [
+          {
+            "regexp": ".",
+            "file": 1,
+            "location": 2,
+            "message": 3
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": ".*",
+          "endsPattern": "Caddyfile.*"
+        }
+      },
+      "presentation": {
+        "reveal": "always",
+        "panel": "new"
+      },
+      "runOptions": {
+        "runOn": "folderOpen",
+        "instanceLimit": 1
+      }
+    }
+  ]
+}

CONTRIBUTING.md

@@ -31,8 +31,15 @@ Before you submit the pull request for review please ensure that
 - You run `npm run format` to format the code
 
 ## Setup project
+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, backend and a reverse proxy.
+## 1. Using DevContainers
+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
 
 ### Backend
 
@@ -63,6 +70,10 @@ Run `caddy run --config reverse-proxy/Caddyfile` in the root folder.
 
 You're all set!
 
+## Debugging
+1. The VS Code is currently setup to auto launch caddy on opening the folder. (Defined in [tasks.json](.vscode/tasks.json))
+2. Press `F5` to start a debug session. This will launch both frontend and backend and attach debuggers to those process. (Defined in [launch.json](.vscode/launch.json))
+
 ### Testing
 
 We are using [Playwright](https://playwright.dev) for end-to-end testing.