[NOT READY, WIP] react attendance page

.devcontainer/compose.extend.yaml

@@ -17,7 +17,7 @@ services:
     command: /bin/sh -c "while sleep 1000; do :; done"
     environment:
       - DB_PROTOCOL=tcp(mysql:3306)
-  mysql: # extending server/compose.yaml
+  mysql:  # extending server/compose.yaml
     networks: # make accessible to devcontainer via network
       - dev-net
 

.devcontainer/devcontainer.json

@@ -1,64 +1,63 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
 // README at: https://github.com/devcontainers/templates/tree/main/src/debian
 {
-  "name": "DxE ADB",
+	"name": "DxE ADB",
 
-  // https://code.visualstudio.com/docs/devcontainers/create-dev-container#_use-docker-compose
-  "dockerComposeFile": ["../server/compose.yaml", "./compose.extend.yaml"],
-  "service": "devcontainer", // defined in dockerComposeFile
-  "runServices": ["devcontainer", "mysql"], // defined in dockerComposeFile
-  "workspaceFolder": "/workspace",
-  "shutdownAction": "stopCompose",
-  "remoteUser": "vscode",
+	// https://code.visualstudio.com/docs/devcontainers/create-dev-container#_use-docker-compose
+	"dockerComposeFile": ["../server/compose.yaml", "./compose.extend.yaml"],
+	"service": "devcontainer", // defined in dockerComposeFile
+	"runServices": ["devcontainer", "mysql"], // defined in dockerComposeFile
+	"workspaceFolder": "/workspace",
+	"shutdownAction": "stopCompose",
+	"remoteUser": "vscode",
 
-  // Features to add to the dev container. More info: https://containers.dev/features.
-  "features": {
-    "ghcr.io/devcontainers/features/docker-in-docker:2": {
-      "moby": true,
-      "azureDnsAutoDetection": true,
-      "installDockerBuildx": true,
-      "version": "latest",
-      "dockerDashComposeVersion": "v1"
-    },
-    "ghcr.io/devcontainers/features/go:1": {
-      "version": "latest"
-    },
-    "ghcr.io/devcontainers/features/node:1": {
-      "nodeGypDependencies": true,
-      "version": "18" // Match version from Dockerfile
-    },
-    // Shares a pnpm store between devcontainers.
-    // https://github.com/joshuanianji/devcontainer-features/tree/main/src/mount-pnpm-store
-    "ghcr.io/joshuanianji/devcontainer-features/mount-pnpm-store:1": {},
-    "ghcr.io/jungaretti/features/make:1": {},
-    "ghcr.io/rocker-org/devcontainer-features/apt-packages:1": {
-      // mariadb-client package provides the `mysql` command for
-      // development / debugging purposes (not an app dependeny).
-      "packages": "mariadb-client"
-    }
-  },
-  "customizations": {
-    "vscode": {
-      "extensions": [
-        "ms-vscode.makefile-tools",
-        "golang.go",
-        "Vue.volar",
-        "GitHub.vscode-github-actions",
-        "ms-vscode.vscode-typescript-next",
-        "esbenp.prettier-vscode"
-      ]
-    }
-  },
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	"features": {
+		"ghcr.io/devcontainers/features/docker-in-docker:2": {
+			"moby": true,
+			"azureDnsAutoDetection": true,
+			"installDockerBuildx": true,
+			"version": "latest",
+			"dockerDashComposeVersion": "v1"
+		},
+		"ghcr.io/devcontainers/features/go:1": {
+			"version": "latest"
+		},
+		"ghcr.io/devcontainers/features/node:1": {
+			"nodeGypDependencies": true,
+			"version": "18"  // Match version from Dockerfile
+		},
+		"ghcr.io/jungaretti/features/make:1": {},
+		"ghcr.io/rocker-org/devcontainer-features/apt-packages:1": {
+			// mariadb-client package provides the `mysql` command for
+			// development / debugging purposes (not an app dependeny).
+			"packages": "mariadb-client"
+		}
+	},
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"ms-vscode.makefile-tools",
+				"golang.go",
+				"Vue.volar",
+				"GitHub.vscode-github-actions",
+				"ms-vscode.vscode-typescript-next",
+				"esbenp.prettier-vscode"
+			]
+		}
+	},
 
-  // Use 'forwardPorts' to make a list of ports inside the container available locally.
-  "forwardPorts": [8080 /* ADB main site (adb.dxe.io) */],
-  "otherPortsAttributes": {
-    // Other ports will be automatically forwarded, but without any
-    // notification. They will still appear in the "ports" tab of the Panel
-    // in VS Code.
-    "onAutoForward": "silent"
-  }
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [
+		8080 /* ADB main site (adb.dxe.io) */
+	],
+	"otherPortsAttributes": {
+		// Other ports will be automatically forwarded, but without any
+		// notification. They will still appear in the "ports" tab of the Panel
+		// in VS Code.
+		"onAutoForward": "silent"
+	}
 
-  // Configure tool-specific properties.
-  // "customizations": {},
+	// Configure tool-specific properties.
+	// "customizations": {},
 }

.github/workflows/main.yml

@@ -62,5 +62,6 @@ jobs:
           account_id: ${{ secrets.AWS_ACCOUNT_ID }}
           repo: dxe/adb-next
           region: us-west-2
-          dockerfile: Dockerfile.frontend-v2
+          path: frontend-v2
+          dockerfile: frontend-v2/Dockerfile
           tags: latest,${{ github.sha }}

.gitignore

@@ -13,4 +13,3 @@ frontend-v2/.next
 frontend-v2/out
 npm-debug.log
 server/src/__debug*
-node_modules/

.vscode/launch.json

@@ -1,58 +1,66 @@
 {
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      // Note: This configuration does not serve the front-end app, but
-      // compiles, watches for changes and recompiles it. The app is
-      // served via the Go server.
-      "name": "Launch Vue Frontend build watcher",
-      "request": "launch",
-      "runtimeArgs": ["run-script", "watch"],
-      "cwd": "${workspaceFolder}/frontend",
-      "runtimeExecutable": "npm",
-      "skipFiles": ["<node_internals>/**"],
-      "type": "node",
-      "runtimeVersion": "16",
-      // Webpack watch only shows build status when TTY is detected
-      "console": "integratedTerminal",
-    },
-    {
-      "name": "Launch React Frontend",
-      "request": "launch",
-      "runtimeArgs": ["run-script", "dev"],
-      "cwd": "${workspaceFolder}/frontend-v2",
-      "runtimeExecutable": "npm",
-      "skipFiles": ["<node_internals>/**"],
-      "type": "node",
-      "runtimeVersion": "18",
-      "env": {
-        "NEXT_PUBLIC_API_BASE_URL": "http://localhost:8080",
-      },
-    },
-    {
-      // Warning: The Go server serves the Vue frontend files from the
-      // filesystem, but this launch configuration does not wait for
-      // the Vue frontend build watcher to finish the initial build.
-      // There may be a delay before the latest changes take effect.
-      "name": "Launch Go Server",
-      "type": "go",
-      "request": "launch",
-      "mode": "debug",
-      "program": "${workspaceFolder}/server/src/main.go",
-      "envFile": "${workspaceFolder}/server/debug.env",
-    },
-  ],
-  "compounds": [
-    {
-      "name": "Launch all",
-      "configurations": [
-        "Launch Go Server",
-        "Launch Vue Frontend build watcher",
-        "Launch React Frontend",
-      ],
-    },
-  ],
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            // Note: This configuration does not serve the front-end app, but
+            // compiles, watches for changes and recompiles it. The app is
+            // served via the Go server.
+            "name": "Launch Vue Frontend build watcher",
+            "request": "launch",
+            "runtimeArgs": [
+                "run-script",
+                "watch"
+            ],
+            "cwd": "${workspaceFolder}/frontend",
+            "runtimeExecutable": "npm",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "type": "node",
+            "runtimeVersion": "16",
+        },
+        {
+            "name": "Launch React Frontend",
+            "request": "launch",
+            "runtimeArgs": [
+                "run-script",
+                "dev"
+            ],
+            "cwd": "${workspaceFolder}/frontend-v2",
+            "runtimeExecutable": "npm",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "type": "node",
+            "runtimeVersion": "18",
+            "env": {
+                "NEXT_PUBLIC_API_BASE_URL": "http://localhost:8080",
+            }
+        },
+        {
+            // Warning: The Go server serves the Vue frontend files from the
+            // filesystem, but this launch configuration does not wait for
+            // the Vue frontend build watcher to finish the initial build.
+            // There may be a delay before the latest changes take effect.
+            "name": "Launch Go Server",
+            "type": "go",
+            "request": "launch",
+            "mode": "debug",
+            "program": "${workspaceFolder}/server/src/main.go",
+            "envFile": "${workspaceFolder}/server/debug.env"
+        }
+    ],
+    "compounds": [
+        {
+            "name": "Launch all",
+            "configurations": [
+                "Launch Go Server",
+                "Launch Vue Frontend build watcher",
+                "Launch React Frontend"
+            ]
+        }
+    ]
 }

.vscode/settings.json

@@ -1,16 +1,18 @@
 {
-  // Stop Makefile extension from asking about installing C++ tools when the
-  // project is opened.
-  "makefile.configureOnOpen": false,
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[go]": {
-    "editor.defaultFormatter": "golang.go",
-  },
-  "[dockerfile]": {
-    "editor.defaultFormatter": "ms-azuretools.vscode-docker",
-  },
-  // Ensures same settings are used by VS Code extension and CLI.
-  "prettier.requireConfig": true,
-  "prettier.prettierPath": "./frontend-v2/node_modules/prettier",
+    // Stop Makefile extension from asking about installing C++ tools when the
+    // project is opened.
+    "makefile.configureOnOpen": false,
+    "editor.formatOnSave": true,
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[css]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "[vue]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
 }

Dockerfile

@@ -1,28 +1,33 @@
 ## Build API backend.
+
 FROM golang:latest AS build-api
 WORKDIR /src
 COPY server/src ./
 RUN GOFLAGS=-mod=readonly GOPROXY=https://proxy.golang.org go mod download
 RUN CGO_ENABLED=0 go build -o adb
 
-## Build web UI frontend.
+## Build web UI frontend.   
+
 FROM node:16 AS build-ui
+
 WORKDIR /src
-# Copy shared directory at the correct relative path
-COPY shared ../shared/
 COPY frontend ./
 RUN npm ci --legacy-peer-deps
 RUN npm run build
 
 ## Assemble composite server container.
+
 FROM alpine:latest
 RUN apk add --no-cache ca-certificates tzdata
 RUN addgroup -S adb && adduser -S adb -G adb
+
 WORKDIR /app
 COPY server/run.sh ./
 COPY server/templates templates/
 COPY frontend/static static/
 COPY --from=build-api /src/adb ./
 COPY --from=build-ui /src/dist dist/
+
 USER adb
-ENTRYPOINT ["./run.sh"]
+
+ENTRYPOINT ["./run.sh"]

Makefile

@@ -47,7 +47,6 @@ dev_db:
 
 # Install all deps for this project.
 deps:
-	. $(NVM_SCRIPT) && nvm install 22 && pnpm i
 	. $(NVM_SCRIPT) && cd frontend && nvm install 16 && npm i --legacy-peer-deps
 	. $(NVM_SCRIPT) && cd frontend-v2 && nvm install 18 && npm i -g pnpm && pnpm i
 	cd server/src && go get -t github.com/dxe/adb/...
@@ -86,4 +85,5 @@ prod_build:
 # Keep in sync with hooks/pre-commit.
 fmt:
 	cd server && gofmt -w `find . -name '*.go'`
-	. $(NVM_SCRIPT) && nvm use 22 && pnpx prettier --write .
+	cd frontend && npx prettier --write **/*.{ts,vue,js}
+	cd frontend-v2 && pnpm fmt

frontend-v2/.prettierignore

@@ -0,0 +1 @@
+.next/**