Fully Update Development to Dev Containers

.devcontainer/Dockerfile

@@ -0,0 +1,2 @@
+FROM node:20-alpine
+RUN apk update && apk add --no-cache git

.devcontainer/devcontainer.json

@@ -0,0 +1,28 @@
+{
+  "name": "ALL Development",
+
+  "dockerComposeFile": "docker-compose.yml",
+  "service": "container",
+
+  "workspaceFolder": "/workspace",
+  "features": {
+    "ghcr.io/devcontainers/features/common-utils:2": {
+      "installZsh": true,
+      "configureZshOhMyZsh": true,
+      "upgradePackages": true,
+      "username": "root"
+    },
+    "ghcr.io/devcontainers/features/git:1": "latest"
+    // Other dev tools can be found here: https://containers.dev/features
+  },
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "dbaeumer.vscode-eslint",
+        // "esbenp.prettier-vscode"
+        "ms-azuretools.vscode-docker"
+      ]
+    }
+  },
+  "remoteUser": "root"
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,48 @@
+services:
+  container:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    volumes:
+      - ..:/workspace:cached
+    command: sleep infinity
+  db:
+    image: postgres
+    ports:
+      - '5433:5433'
+    restart: always
+    env_file:
+      - ../server/.env
+    volumes:
+      - ../server/database/schema.sql:/docker-entrypoint-initdb.d/schema.sql
+    command: -p 5433
+    healthcheck:
+      test: ['CMD-SHELL', 'pg_isready -p 5433 -U $$POSTGRES_USER -d postgres']
+      interval: 5s
+      timeout: 5s
+      retries: 5
+  server:
+    build:
+      context: ../server
+      dockerfile: Dockerfile
+    volumes:
+      - ../server:/app
+      - /app/node_modules
+    ports:
+      - '5005:5005'
+    depends_on:
+      db:
+        condition: service_healthy
+  client:
+    build:
+      context: ../client
+      dockerfile: Dockerfile
+    environment:
+      VITE_WATCH_POLL_INTERVAL: '500'
+    volumes:
+      - ../client:/app
+      - /app/node_modules
+    ports:
+      - '3000:3000'
+    depends_on:
+      - server

.github/workflows/deploy.yaml → .github/workflows/deploy.yml

@@ -65,7 +65,11 @@ jobs:
           export ${{ secrets.ENV_URL }}
           export ${{ secrets.GA_TRACKING }}
           export ${{ secrets.LINT_DISABLE }}
-          npm i --legacy-peer-deps 
+          if [ -z "$VITE_SERVER_URL" ]; then
+            echo "::error::VITE_SERVER_URL is not set after exporting secrets.ENV_URL. Vite only reads VITE_-prefixed vars (not REACT_APP_*) — update the ENV_URL secret to define VITE_SERVER_URL=..." >&2
+            exit 1
+          fi
+          npm i --legacy-peer-deps
           npm run build --verbose
       - name: delete build and create new
         uses: appleboy/ssh-action@v1.0.0

.github/workflows/docker-build-check.yml

@@ -0,0 +1,27 @@
+name: Docker Build Check
+
+# Validates that the devcontainer images still build. Does not boot the
+# stack or exercise runtime behavior (env vars, DB connectivity, etc.) —
+# see .devcontainer/docker-compose.yml and README.md for those concerns.
+on:
+  pull_request:
+    branches: ["prod", "dev"]
+    paths:
+      - "client/Dockerfile"
+      - "client/package.json"
+      - "client/package-lock.json"
+      - "server/Dockerfile"
+      - "server/package.json"
+      - "server/package-lock.json"
+      - ".devcontainer/**"
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Build devcontainer images
+        run: docker compose -f .devcontainer/docker-compose.yml build

.github/workflows/node.js.yml

@@ -1,4 +1,4 @@
-# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# This workflow does a clean installation of node dependencies, caches them, and builds the client and server.
 # For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
 
 name: Node.js CI
@@ -11,22 +11,20 @@ jobs:
   build:
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [16.x, 18.x, 20.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
     steps:
-      - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.current-version }}
+      - uses: actions/checkout@v4
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.current-version }}
+          node-version: 20.x
           cache: "npm"
-      - run: cd client
-      - run: npm i --legacy-peer-deps
-      - run: npm run build --if-present
-      - run: cd ../
-      - run: cd server
-      - run: npm i --legacy-peer-deps
-      - run: npm run build --if-present
+      - name: Build client
+        run: |
+          cd client
+          npm i --legacy-peer-deps
+          npm run build --if-present
+      - name: Build server
+        run: |
+          cd server
+          npm i --legacy-peer-deps
+          npm run build --if-present

.github/workflows/staging-deploy.yaml → .github/workflows/staging-deploy.yml

@@ -57,7 +57,11 @@ jobs:
           export ${{ secrets.STAGING_ENV_URL }}
           export ${{ secrets.GA_TRACKING }}
           export ${{ secrets.LINT_DISABLE }}
-          npm i --legacy-peer-deps 
+          if [ -z "$VITE_SERVER_URL" ]; then
+            echo "::error::VITE_SERVER_URL is not set after exporting secrets.STAGING_ENV_URL. Vite only reads VITE_-prefixed vars (not REACT_APP_*) — update the STAGING_ENV_URL secret to define VITE_SERVER_URL=..." >&2
+            exit 1
+          fi
+          npm i --legacy-peer-deps
           npm run build --verbose
       - name: delete build and create new
         uses: appleboy/ssh-action@v1.0.0

.gitignore

@@ -4,6 +4,7 @@ server/service_key.json
 # IDE-specific directories
 .idea/
 .vscode/
+.cursor/
 
 # SSL Certificates
 *.crt

README.md

@@ -17,80 +17,56 @@ Clone the repository and open the command line for the upcoming instructions.
 After cloning the repository in the top level directory, run `npm install`. This will install all of the tools needed to
 commit and correctly format all code within the project.
 
-### PM2 Instructions
-
-After installing the dependencies for the super directory, first run `pm2 -v` to ensure that pm2 is installed correctly.
-If it gives you any issues, install it to your global npm registry with this command: `npm i -g pm2`.
-
-Next add the `ecosystem.config.js` file to your top level directory and this will allow you to have
-the correct env for client and server. After that is complete, then you can follow the install steps below.
-
 ### Developing Locally
 
-To develop on the full architecture developers can now utilize the ability to run the full system without
-needing to ssh into another server. To do this users are required to install the **latest version** of [Docker](https://www.docker.com/) to perform this task.
-
-To start the database container:
+The full stack (client, server, and database) runs in Docker via `.devcontainer/docker-compose.yml`. This replaces
+the previous PM2-based workflow. Install the **latest version** of [Docker](https://www.docker.com/) to get started.
 
-```bash
-docker compose up
-```
+#### Environment variables
 
-To run in detached mode:
+Create `server/.env` and `client/.env` (not committed — ask a teammate for values, or see below for the keys that
+must match the Docker network specifically):
 
-```bash
-docker compose up -d
-```
+- `server/.env` must point `DB_HOST`/`DB_PORT` at the `db` **service**, not your host machine:
+  ```
+  DB_HOST=db
+  DB_PORT=5433
+  ```
+  (plus `DB_USER`, `DB_PASS`, `DB_SCHEMA`, and the matching `POSTGRES_*` variables the `db` service reads on init)
+- `client/.env` must use Vite's `VITE_` prefix, not the old Create React App `REACT_APP_` prefix — the client was
+  migrated from CRA to Vite, and Vite only exposes `import.meta.env` variables prefixed `VITE_`. An old
+  `REACT_APP_SERVER_URL` will silently resolve to `undefined` in the app (labs, auth, and other API calls will fail
+  with no visible error) instead of failing loudly:
+  ```
+  VITE_SERVER_URL=http://localhost:5005
+  ```
 
-To shut down database container:
+#### Running
 
 ```bash
-docker compose down
+cd .devcontainer
+docker compose up -d --build
 ```
 
-#### Full start up
-
-1. Navigate to top level folder.
-2. Run `npm install --legacy-peer-deps`.
-3. Connect to the port of your local db or production.
-   1. For local dev
-      1. `cd server/database`
-      2. `docker compose up -d`
-         1. If you want reuse this volume to **keep your changes use** `docker compose start`
-         2. In the event you want to stop it **without losing the volume** `docker compose stop`
-   2. For dev connecting to staging or production
-      1. Run the documented developer instructions to connect.
-4. Start the server & client
-   1. In the root directory, run `pm2 start`
-5. To check the logs and see if things built correctly
-   1. Run `pm2 log`
-      a. If there are any errors run:
-      b. `pm2 delete all`
-      c. `pm2 start`
-6. To stop the application
-   1. Run `pm2 stop all`, and if running local dev configuration, `docker compose down`
-
-### Server
-
-1. Navigate to the server folder.
-2. `npm install`
-3. `node app.js`
-4. The server should be accessible via `http://localhost:5000`
-
-### Client
-
-#### Development
-
-1. Navigate to the client folder.
-2. `npm install`
-3. `npm start`
-4. The client should be open by itself, accessible via `http://localhost:3000`
-
-#### Publishing
-
-1. If you have done #1-2 in `Development`, go ahead to the next step. If not, do that.
-2. `npm build`
-3. All the files you need are in the `build` folder.
+- Client: <http://localhost:3000>
+- Server: <http://localhost:5005>
+- Database: `localhost:5433`
+
+To view logs: `docker compose logs -f [client|server|db]`. To stop: `docker compose down`. The `db` service has no
+persistent volume, so its data does not survive a `down`/`up` cycle — it re-seeds from `server/database/schema.sql`
+every time the container starts fresh.
+
+#### HMR / Fast Refresh notes
+
+- Docker Desktop's bind mounts do not reliably forward native filesystem change events into the container (verified
+  on macOS with VirtioFS), so `client/vite.config.mjs` enables Chokidar polling
+  (`server.watch.usePolling`/`VITE_WATCH_POLL_INTERVAL`) for file-change detection. This is required, not a
+  workaround to remove.
+- This project's React components use `.js` extensions rather than `.jsx`. Under `@vitejs/plugin-react`'s default
+  (automatic) JSX runtime, only `.jsx`/`.tsx` files qualify as Fast Refresh boundaries, so `.js` component edits
+  would otherwise force a full page reload instead of an instant hot update. `vite.config.mjs` sets
+  `jsxRuntime: "classic"` on the plugin, which instead qualifies any file with a literal `import React` — true for
+  every component here — restoring instant Fast Refresh.
 
 ## Part of The National Science Foundation's Grant for Developing Experiential Laboratories for Computing Accessibility Education. Grant #1825023
 

client/.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+build
+package-lock.json
+.git
+.env
+.env.*

client/.eslintrc.json

@@ -8,29 +8,13 @@
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:react/jsx-runtime",
-    "plugin:jest/recommended",
     "plugin:prettier/recommended"
   ],
-  "overrides": [
-    {
-      "files": [
-        "**/*.spec.js",
-        "**/*.spec.jsx",
-        "**/*.test.js"
-      ],
-      "env": {
-        "jest": true
-      }
-    }
-  ],
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
-  "plugins": [
-    "react",
-    "jest"
-  ],
+  "plugins": ["react"],
   "settings": {
     "react": {
       "createClass": "createReactClass",
@@ -62,4 +46,4 @@
       }
     ]
   }
-}
+}

client/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:20-alpine AS dependencies-env
+WORKDIR /app
+COPY package*.json ./
+RUN npm install --legacy-peer-deps
+
+FROM node:20-alpine
+WORKDIR /app
+COPY --from=dependencies-env /app/node_modules /app/node_modules
+COPY . ./
+ENV CHOKIDAR_USEPOLLING=true
+ENV CHOKIDAR_INTERVAL=500
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0", "--port", "3000"]