Create dev mode

- Minimal dev/hot-reload with vscode mode
- Still WIP

Author: alexrecuenco

.vscode/tasks.json

@@ -9,14 +9,15 @@
             "dependsOn": [
                 "npm: dev - packages/frontend",
                 "npm: dev - packages/backend",
+                "npm: dev - packages/interface",
             ],
+            "problemMatcher": [],
         },
         {
             "type": "npm",
             "script": "dev",
             "isBackground": true,
             "path": "packages/frontend",
-            // See here https://stackoverflow.com/a/72655542/7346915
             "problemMatcher": [
                 {
                     "owner": "typescript",
@@ -25,8 +26,8 @@
                     "applyTo": "allDocuments",
                     "background": {
                         "activeOnStart": true,
-                        // "beginsPattern": "sd",
-                        // "endsPattern": " > "
+                        "beginsPattern": "ready",
+                        "endsPattern": "ready",
                     },
                     "pattern": [
                         {
@@ -50,10 +51,46 @@
             "type": "npm",
             "script": "dev",
             "isBackground": true,
+            "dependsOn": ["compose: database"],
             "path": "packages/backend",
-            "problemMatcher": ["$tsc-watch"],
+            "problemMatcher": [
+                {
+                    "owner": "typescript",
+                    "source": "ts",
+                    "applyTo": "allDocuments",
+                    "background": {
+                        "activeOnStart": true,
+                        "beginsPattern": ".*starting.*",
+                        "endsPattern": ".*running.*",
+                    },
+                },
+            ],
             "label": "npm: dev - packages/backend",
-            "detail": "tsc-watch --onSuccess 'node .'",
+        },
+        {
+            "type": "npm",
+            "script": "dev",
+            "isBackground": true,
+            "path": "packages/interface",
+            "problemMatcher": ["$tsc-watch"],
+            "label": "npm: dev - packages/interface",
+        },
+        {
+            "type": "shell",
+            "command": "docker",
+            "args": [
+                "compose",
+                "-f",
+                "compose.yaml",
+                "-f",
+                "compose.debug.yaml",
+                "up",
+                "db",
+                "-d",
+            ],
+            "isBackground": false,
+            "problemMatcher": [],
+            "label": "compose: database",
         },
     ],
 }

README.md

@@ -1,17 +1,58 @@
 # Example
 
+In order do as follows
+
+## Build
+
+```bash
+npm run build -ws
+```
+
+## Test
+
+```bash
+npm run test -ws
+```
+
+## Prepare database
+
+```bash
+# at a separate terminal run this and keep running
+docker compose -f compose.yaml -f compose.debug.yaml up db
+# In a separate terminal
+npm run db:prepare -w backend
+```
+
 ## Launch
 
+### *production mode*
+
 ```bash
 docker compose up
 ```
 
 App will be accessible on port 8080
 
-### Launch development environment
+### Hot-reload mode
 
 In `vscode` use the task labeled `dev`.
 
+In the terminal you want to open two terminals, opening a database and the development environment
+
+```bash
+# Then keep this process running
+npm run dev
+```
+
+Clean resources
+
+```bash
+docker compose -f compose.yaml -f compose.debug.yaml down -v db
+npm run clean -ws --if-present
+```
+
+Access `http://localhost:3000/tasks/debug/populate` to populate a few tasks
+
 ### Launch in debug mode
 
 TODO, WIP

compose.debug.yaml

@@ -7,3 +7,7 @@ services:
       POSTGRES_HOST_AUTH_METHOD: trust
     ports:
       - 5432:5432
+    volumes:
+      - db-debug:/var/lib/postgresql/data
+volumes:
+  db-debug:

compose.yaml

@@ -48,8 +48,8 @@ services:
     volumes:
       - db-data:/var/lib/postgresql/data
     environment:
-      - POSTGRES_DB=example
-      - POSTGRES_PASSWORD_FILE=/run/secrets/db-password
+      POSTGRES_DB: taskdb
+      POSTGRES_PASSWORD_FILE: /run/secrets/db-password
     expose:
       - 5432
     healthcheck:

package.json

@@ -18,7 +18,7 @@
         "packages/backend"
     ],
     "scripts": {
-        "dev": "concurrently -k -n backend,frontend -c magenta,blue \"npm run dev -w backend\" \"npm run dev -w frontend\"",
+        "dev": "npm run build -ws --if-present && concurrently -k -n backend,frontend,interface -c magenta,blue,grey \"npm run dev -w backend\" \"npm run dev -w frontend\" \"npm run dev -w interface\"",
         "test": "npm run test -ws --if-present",
         "start:all": "echo REDO npm run build && node . serve",
         "watch": "echo REDO tsc-watch --onSuccess 'node .'",

packages/backend/.env

@@ -0,0 +1,2 @@
+PGPASSWORDFILE=../../db/password.txt
+DEBUG=*

packages/backend/.gitignore

@@ -0,0 +1 @@
+!.env

packages/backend/db/create.sql

@@ -1,9 +1,14 @@
 {
     "watch": [
-        "src"
+        "src",
+        ".env",
+        "../../interface/src"
     ],
+    "env": {
+        "NODE_OPTIONS": "--no-warnings=ExperimentalWarning"
+    },
     "ext": "ts",
     "execMap": {
-        "ts": "node --no-warnings=ExperimentalWarning --loader ts-node/esm"
+        "ts": "node --loader ts-node/esm -r tsconfig-paths/register src/index.ts serve"
     }
 }