#1806 Add DevContainer configuration

.devcontainer/config-devcontainer.yaml

@@ -0,0 +1,28 @@
+database:
+  user: hanko
+  password: hanko
+  host: postgresd
+  port: 5432
+  dialect: postgres
+email_delivery:
+  smtp:
+    host: "mail"
+    port: "1025"
+  from_address: [email protected]
+secrets:
+  keys:
+    - abcedfghijklmnopqrstuvwxyz
+service:
+  name: Hanko Authentication Service
+webauthn:
+  relying_party:
+    origins:
+      - "http://localhost:8888"
+session:
+  cookie:
+    secure: false # is needed for safari, because safari does not store secure cookies on localhost
+server:
+  public:
+    cors:
+      allow_origins:
+        - "http://localhost:8888"

.devcontainer/devcontainer-nginx.conf

@@ -0,0 +1,26 @@
+server {
+ listen 80;
+ server_name hanko-quickstart;
+
+ location /elements.js {
+   root /usr/share/nginx/html/elements/;
+ }
+
+ location /sdk.modern.js {
+   root /usr/share/nginx/html/frontend-sdk/;
+ }
+
+ location /backend/ {
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-NginX-Proxy true;
+    proxy_pass http://hanko:8000/;
+  }
+
+ location / {
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-NginX-Proxy true;
+    proxy_pass http://quickstart:8080/;
+  }
+}

.devcontainer/devcontainer.json

@@ -0,0 +1,9 @@
+{
+  "dockerComposeFile": "./devcontainers-full-setup.yaml",
+  "service": "devcontainer",
+  "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
+  "forwardPorts": [
+    80,
+    8025
+  ]
+}

.devcontainer/devcontainers-full-setup.yaml

@@ -0,0 +1,107 @@
+version: '3.9'
+services:
+  hanko-migrate:
+    build: ../backend
+    volumes:
+      - type: bind
+        source: ./config-devcontainer.yaml
+        target: /etc/config/config.yaml
+    command: --config /etc/config/config.yaml migrate up
+    restart: on-failure
+    depends_on:
+      postgresd:
+        condition: service_healthy
+    networks:
+      - intranet
+  hanko:
+    depends_on:
+      hanko-migrate:
+        condition: service_completed_successfully
+    build: ../backend
+    ports:
+      - '8000:8000' # public
+      - '8001:8001' # admin
+    restart: unless-stopped
+    command: serve --config /etc/config/config.yaml all
+    volumes:
+      - type: bind
+        source: ./config-devcontainer.yaml
+        target: /etc/config/config.yaml
+    networks:
+      - intranet
+    environment:
+      - PASSWORD_ENABLED
+  postgresd:
+    image: postgres:12-alpine
+    ports:
+      - "5442:5432"
+    environment:
+      - POSTGRES_USER=hanko
+      - POSTGRES_PASSWORD=hanko
+      - POSTGRES_DB=hanko
+      - DB_PORT=5442
+    healthcheck:
+      test: pg_isready -U hanko -d hanko
+      interval: 10s
+      timeout: 10s
+      retries: 3
+      start_period: 30s
+    networks:
+      - intranet
+  elements:
+    image: node:18.14-alpine
+    working_dir: /workspace
+    entrypoint: /bin/sh -c
+    command:
+      - npm install && npm run build:dev
+    volumes:
+      - type: bind
+        source: ../frontend/
+        target: /workspace
+    networks:
+      - intranet
+  quickstart:
+    build: ../quickstart
+    ports:
+      - "8888:8080"
+    environment:
+      - HANKO_URL=/backend
+      - HANKO_URL_INTERNAL=http://hanko:8000
+      - HANKO_FRONTEND_SDK_URL=/sdk.modern.js
+      - HANKO_ELEMENT_URL=/elements.js
+    networks:
+      - intranet
+  mail:
+    image: mailhog/mailhog:latest
+    restart: always
+    ports:
+      - 2500:1025
+      - 8025:8025
+    networks:
+      - intranet
+  entry:
+    image: nginx
+    volumes:
+      - ./devcontainer-nginx.conf:/etc/nginx/conf.d/default.conf
+      - ../frontend/elements/dist/:/usr/share/nginx/html/elements/
+      - ../frontend/frontend-sdk/dist/:/usr/share/nginx/html/frontend-sdk/
+    depends_on:
+      hanko:
+        condition: service_started
+      mail:
+        condition: service_started
+      quickstart:
+        condition: service_started
+    ports:
+      - '80:80'
+    networks:
+      - intranet
+  devcontainer:
+    image: mcr.microsoft.com/devcontainers/base:ubuntu
+    volumes:
+      - ../..:/workspaces:cached
+    command: sleep infinity
+    networks:
+      - intranet
+networks:
+  intranet:

frontend/elements/package.json

@@ -95,7 +95,7 @@
     "lint": "eslint 'src/**/*.ts?(x)'",
     "format": "pretty-quick --staged",
     "build": "npx webpack --mode=production",
-    "build:dev": "npx webpack --mode=development --config webpack.config.dev.cjs"
+    "build:dev": "npx webpack watch --mode=development --config webpack.config.dev.cjs"
   },
   "description": "The <hanko-auth> element offers a complete user interface that will bring a modern login and registration experience to your users.",
   "repository": "github:teamhanko/hanko",

frontend/frontend-sdk/package.json

@@ -25,7 +25,7 @@
     "lint": "eslint 'src/**/*.ts'",
     "format": "pretty-quick --staged",
     "build": "microbundle --globals @github/webauthn-json=webauthnJson --tsconfig tsconfig.prod.json",
-    "dev": "microbundle watch",
+    "build:dev": "microbundle watch",
     "docs": "jsdoc -r -c jsdoc.json -d ./.generated/docs -R README.md --pedantic",
     "test": "jest --coverage"
   },

frontend/package.json

@@ -13,7 +13,8 @@
     "test": "turbo run test",
     "start": "turbo run start",
     "build:elements": "turbo build --filter=./frontend-sdk --filter=./elements",
-    "build:elements:dev": "turbo build:dev --filter=./elements"
+    "build:dev": "turbo build:dev --parallel",
+    "build:elements:dev": "turbo build:dev --filter=@teamhanko/hanko-elements"
   },
   "devDependencies": {
     "turbo": "^1.10.7"

frontend/turbo.json

@@ -6,7 +6,6 @@
       "outputs": ["dist/**"]
     },
     "build:dev": {
-      "dependsOn": ["^build"],
       "outputs": ["dist/**"]
     },
     "start": {