Next Dev Launch Config Fix

.devcontainer/Dockerfile

@@ -26,6 +26,7 @@ RUN apt-get update \
         wget \
         zsh \
         net-tools \
+        procps \
     && rm -rf /var/lib/apt/lists/*
 
 # Install Node.js 22 from https://github.com/nodesource

.gitignore

@@ -28,6 +28,7 @@ ENV/
 Thumbs.db
 .vscode/*
 !.vscode/launch.json
+!.vscode/tasks.json
 .idea/
 *.swp
 
@@ -44,4 +45,4 @@ backend/script/test.py
 coverage/
 .coverage
 htmlcov/
-*.cover
+*.cover

.vscode/launch.json

@@ -6,14 +6,7 @@
       "type": "debugpy",
       "request": "launch",
       "module": "fastapi",
-      "args": [
-        "dev",
-        "src/main.py",
-        "--host",
-        "127.0.0.1",
-        "--port",
-        "8000"
-      ],
+      "args": ["dev", "src/main.py", "--host", "127.0.0.1", "--port", "8000"],
       "jinja": true,
       "cwd": "${workspaceFolder}/backend",
       "env": {
@@ -23,7 +16,7 @@
       "justMyCode": false
     },
     {
-      "name": "Frontend",
+      "name": "Purge & Frontend",
       "type": "node",
       "request": "launch",
       "runtimeExecutable": "npm",
@@ -33,14 +26,15 @@
       "serverReadyAction": {
         "pattern": "- Local:.*(https?://localhost:[0-9]+)",
         "uriFormat": "%s",
-        "action": "debugWithChrome"
-      }
+        "action": "openExternally"
+      },
+      "preLaunchTask": "Purge Next Dev" // Kill lingering procs blocking port
     }
   ],
   "compounds": [
     {
       "name": "Full Stack: Frontend + Backend",
-      "configurations": ["Backend", "Frontend"],
+      "configurations": ["Backend", "Purge & Frontend"],
       "presentation": {
         "hidden": false,
         "group": "fullstack",

.vscode/tasks.json

@@ -0,0 +1,18 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    // Devcontainers has an issue where Next launch processes will persist
+    // after ending the debug session, making future launches run on different
+    // ports. Traditional "kill process on port X" attempts don't work to kill
+    // them, and this was the only fix that works
+    {
+      "label": "Purge Next Dev",
+      "type": "shell",
+      "command": "pkill -f 'next dev --turbopack' 2>/dev/null || true",
+      "presentation": {
+        "reveal": "always",
+        "close": false
+      }
+    }
+  ]
+}

README.md

@@ -90,12 +90,13 @@ Or you can do the actions manually. Then,
 *If you haven't run in a day or more, run `python -m script.reset_dev` from the `/backend` directory to ensure all mock data is updated to be centered around today's date*
 
 ### VSCode Debugger (Recommended)
-Navigate to the "Debug and Run" tab on the VSCode side bar.  
+Navigate to the "Debug and Run" tab on the VSCode side bar.
 
 At the top of the side bar, next to the green play button, select the desired module to run
 - **Backend**: Starts the FastAPI backend on http://localhost:8000
-- **Frontend**: Starts the Next.js frontend on http://localhost:3000 in a chrome debugger window
-- **Full Stack**: Starts both at once in separate terminals
+- **Purge & Frontend**: Starts the Next.js frontend on http://localhost:3000
+  - *The "Purge" part of this is referring to the task that kills any `next dev` processes in order to address a devcontainer issue. Note that this prevents you from running multiple of these debug sessions concurrently. If mulitple are needed, refer to the manual instructions below*
+- **Full Stack**: Starts both of the above in separate terminals
 
 Then simply press the green play button
 
@@ -121,20 +122,20 @@ Navigate to [http://localhost:3000]() to view the website
 
 ### Manual Testing
 
-After running the backend, navigate to [http://localhost:3000/docs]()  
-Click on the "Authorize 🔓" button in the top right, and enter "admin", "student", or "police" as the mock token for the respective role  
+After running the backend, navigate to [http://localhost:3000/docs]()
+Click on the "Authorize 🔓" button in the top right, and enter "admin", "student", or "police" as the mock token for the respective role
 You can then make any requests using the provided GUI
 
 ### Unit Tests
 
-The best way to run unit tests is by using the "Testing" window on the sidebar. This provides an intuitive GUI for running tests within the IDE.  
+The best way to run unit tests is by using the "Testing" window on the sidebar. This provides an intuitive GUI for running tests within the IDE.
 You can also run all tests by opening a new terminal and simply running
 
 ```sh
 pytest
 ```
 
-## Accessing the database
+## Accessing the Database
 
 - Navigate to the PostgreSQL Explorer tab on the sidebar in VSCode
 - Click the plus icon in the top right

backend/src/main.py

@@ -12,7 +12,7 @@
 
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["http://localhost:3000", "http://127.0.0.1:3000"],
+    allow_origin_regex=r"^https?://(localhost|127\.0\.0\.1)(:\d+)?$",
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],