Scaffold the Angular application

.gitattributes

@@ -1,8 +1,15 @@
-*       text=auto
+*               text=auto
 
-*.md    text eol=lf
-*.yml   text eol=lf
-*.yaml  text eol=lf
-*.json  text eol=lf
+*.md            text eol=lf
+*.xml           text eol=lf
+*.yml           text eol=lf
+*.yaml          text eol=lf
+*.json          text eol=lf
+*.html          text eol=lf
+*.scss          text eol=lf
+*.ts            text eol=lf
 
-pnpm-lock.yaml text eol=lf linguist-generated
+*.ico           binary
+
+pnpm-lock.yaml  text eol=lf linguist-generated
+.run/*          linguist-generated

.github/actions/ci/action.yml

@@ -7,10 +7,30 @@ runs:
         - name: Prepare workspace
           uses: ./.github/actions/prepare-workspace
 
+        - name: Compile core
+          shell: bash
+          run: pnpm build
+
+        - name: Run tests
+          shell: bash
+          run: |
+              pnpm playwright-install-browsers
+              pnpm test-ci
+
         - name: Run Prettier
           shell: bash
           run: pnpm format-check
 
+        #       TODO: Add ESLint
+        #        - name: Run ESLint
+        #          shell: bash
+        #          run: pnpm lint-ts
+        #
+        #        TODO: Add Stylelint
+        #        - name: Run Stylelint
+        #          shell: bash
+        #          run: pnpm lint-css
+
         - name: Run Markdownlint
           shell: bash
           run: pnpm lint-md

.gitignore

@@ -1,7 +1,19 @@
 .idea/
 .vscode/*
+!.vscode/extensions.json
+!.vscode/launch.json
+!.vscode/tasks.json
 
 .claude/worktrees/
 
 node_modules/
 .husky/_/
+
+.angular/
+dist/
+
+coverage/
+reports/
+
+.ssl/*
+!.ssl/.gitkeep

.lintstagedrc.json

@@ -1,4 +1,4 @@
 {
     "*.md": "markdownlint-cli2 --fix",
-    "*.{yml,yaml,json}": "prettier -w"
+    "*.{yml,yaml,json,html,scss,ts}": "prettier -w"
 }

.prettierignore

@@ -5,6 +5,9 @@
 !*.yml
 !*.yaml
 !*.json
+!*.html
+!*.scss
+!*.ts
 
 node_modules/
 .husky/_/
@@ -14,4 +17,6 @@ pnpm-lock.yaml
 
 .idea/
 .vscode/*
-.vscode/extensions.json
+!.vscode/extensions.json
+!.vscode/launch.json
+!.vscode/tasks.json

.prettierrc.json

@@ -1,4 +1,12 @@
 {
+    "overrides": [
+        {
+            "files": ["*.html"],
+            "options": {
+                "parser": "angular"
+            }
+        }
+    ],
     "plugins": ["prettier-plugin-organize-imports"],
     "quoteProps": "consistent",
     "singleQuote": true

.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+    "recommendations": [
+        "angular.ng-template",
+        "esbenp.prettier-vscode",
+        "editorconfig.editorconfig",
+        "davidanson.vscode-markdownlint",
+        "vitest.explorer",
+        "ms-playwright.playwright"
+    ]
+}

.vscode/launch.json

@@ -0,0 +1,4 @@
+{
+    "version": "0.2.0",
+    "configurations": []
+}

.vscode/tasks.json

@@ -0,0 +1,65 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "type": "npm",
+            "script": "start",
+            "label": "start",
+            "detail": "ng serve",
+            "isBackground": true,
+            "problemMatcher": []
+        },
+        {
+            "type": "npm",
+            "script": "build",
+            "label": "build",
+            "detail": "ng build",
+            "group": { "kind": "build", "isDefault": true },
+            "problemMatcher": []
+        },
+        {
+            "type": "npm",
+            "script": "test",
+            "label": "test",
+            "detail": "ng test",
+            "isBackground": true,
+            "problemMatcher": []
+        },
+        {
+            "type": "npm",
+            "script": "test-ci",
+            "label": "test-ci",
+            "detail": "ng test -c ci",
+            "group": { "kind": "test", "isDefault": true },
+            "problemMatcher": []
+        },
+        {
+            "type": "npm",
+            "script": "playwright-install-browsers",
+            "label": "playwright-install-browsers",
+            "detail": "playwright install chromium",
+            "problemMatcher": []
+        },
+        {
+            "type": "npm",
+            "script": "format",
+            "label": "format",
+            "detail": "prettier -w .",
+            "problemMatcher": []
+        },
+        {
+            "type": "npm",
+            "script": "format-check",
+            "label": "format-check",
+            "detail": "prettier -l .",
+            "problemMatcher": []
+        },
+        {
+            "type": "npm",
+            "script": "lint-md",
+            "label": "lint-md",
+            "detail": "markdownlint-cli2",
+            "problemMatcher": []
+        }
+    ]
+}

AGENTS.md

@@ -6,6 +6,8 @@ Commit message and CI conventions shared across all `dnd-mapp` repositories are
 
 Pull request conventions are documented in [Creating a Pull Request](https://github.com/dnd-mapp/wiki/blob/main/pages/development-conventions/creating-a-pull-request.md).
 
+TypeScript and Angular coding conventions are documented in [Angular & TypeScript Conventions](https://github.com/dnd-mapp/wiki/blob/main/pages/development-conventions/angular-typescript.md).
+
 ## Commit conventions
 
 - Draft commit messages and get confirmation before committing.

README.md

@@ -1,30 +1,68 @@
-# dnd-mapp/project-template
+# dnd-mapp/angular-app-template
 
-Template repository for bootstrapping new `dnd-mapp` repositories, with shared tooling and CI pre-configured.
+Template repository for bootstrapping new Angular-based `dnd-mapp` repositories, with shared tooling, CI, and browser-based testing pre-configured.
+
+## Prerequisites
+
+- [mise](https://mise.jdx.dev/) (recommended): manages the Node.js and pnpm versions this repo pins in `package.json`'s `devEngines` field. Run `mise install` after installing it to pick up matching versions automatically.
+- [mkcert](https://github.com/FiloSottile/mkcert): generates the locally trusted HTTPS certificate the dev server uses (see [Installation](#installation)).
 
 ## Installation
 
-Click **Use this template** on GitHub to create a new repository from this one. In the new repository, install dependencies and set up the Husky git hooks:
+Click **Use this template** on GitHub to create a new repository from this one. In the new repository, generate the dev server's certificate, then install dependencies (this also sets up the Husky git hooks) and the Chromium browser used for tests:
 
 ```bash
+mkcert -install
+mkcert -cert-file .ssl/cert.pem -key-file .ssl/key.pem localhost.www.dndmapp.dev
 pnpm install
+pnpm playwright-install-browsers
 ```
 
 Then update `package.json`'s `name` and `description`, and this README, to match the new repository.
 
+## Editor setup
+
+Configure your editor to run Prettier on save, so files match this repo's `.prettierrc.json` without needing `pnpm format` before every commit.
+
+- **VS Code**: install the recommended [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) (VS Code prompts for it automatically via `.vscode/extensions.json`), then add to your `settings.json`:
+
+  ```json
+  {
+      "editor.defaultFormatter": "esbenp.prettier-vscode",
+      "editor.formatOnSave": true
+  }
+  ```
+
+- **WebStorm**: open Settings → Languages & Frameworks → JavaScript → Prettier, and check **Run on save**. WebStorm auto-detects the local `prettier` package and this repo's config.
+
+ESLint isn't configured in this repo yet, so there's nothing to wire up on that front for either editor.
+
 ## Usage
 
 ```bash
+pnpm start         # Serve the app locally at https://localhost.www.dndmapp.dev:4000
+pnpm build         # Production build
+pnpm test          # Run unit tests in a real Chromium browser via Vitest + Playwright, with a UI
+pnpm test-ci       # Run tests headless, as CI does
 pnpm format        # Format all files with Prettier
 pnpm format-check  # Check formatting without writing changes
 pnpm lint-md       # Lint Markdown files with markdownlint-cli2
 ```
 
-Husky and lint-staged run Prettier and markdownlint on staged files before each commit. GitHub Actions runs the same checks on every pull request and on pushes to `main` (see `.github/workflows/`). It also validates commit messages against [Conventional Commits](https://www.conventionalcommits.org/) via commitlint.
+The dev server serves over HTTPS using the self-signed certificate in `.ssl/` and only accepts requests to `localhost.www.dndmapp.dev`; map that hostname to `127.0.0.1` in your hosts file before running `pnpm start` by adding this line:
+
+```text
+127.0.0.1 localhost.www.dndmapp.dev
+```
+
+- **Windows**: edit `C:\Windows\System32\drivers\etc\hosts` in a text editor running as Administrator.
+- **macOS/Linux**: append the line with elevated privileges, e.g. `echo '127.0.0.1 localhost.www.dndmapp.dev' | sudo tee -a /etc/hosts`.
+
+Husky and lint-staged run Prettier and markdownlint on staged files before each commit. GitHub Actions runs the build, tests, and formatting/linting checks on every pull request and on pushes to `main` (see `.github/workflows/`), and validates commit messages against [Conventional Commits](https://www.conventionalcommits.org/) via commitlint.
 
 ## Contributing
 
-See [Creating a Pull Request](https://wiki.dndmapp.nl.eu.org/development-conventions/creating-a-pull-request) for how to open a pull request in any `dnd-mapp` repository.
+See [Creating a Pull Request](https://wiki.dndmapp.nl.eu.org/development-conventions/creating-a-pull-request) for how to open a pull request in any `dnd-mapp` repository, and [Angular & TypeScript Conventions](https://wiki.dndmapp.nl.eu.org/development-conventions/angular-typescript) for this repo's coding conventions.
 
 ## License