Update Codespaces configuration

Author: sis0k0

.devcontainer/README.md

@@ -8,10 +8,7 @@ This project is configured to work seamlessly in GitHub Codespaces or with VS Co
 2. The devcontainer will automatically:
    - Spin up a MongoDB instance (Atlas Local)
    - Install all dependencies
-   - Seed sample data each time the Codespace starts
-   - Start the Express API on port 5050
-   - Start the React app on port 5173
-   - Open the React app in the built-in Codespaces browser preview
+   - Seed sample data
 
 ## Using with VS Code Dev Containers
 
@@ -32,21 +29,20 @@ Once the devcontainer is running:
 
 ## Quick Start in Codespaces
 
-Once the devcontainer is fully loaded, the app should already be running.
-
-If you want to check logs:
+Once the devcontainer is fully loaded (wait for "Poststart" to complete):
 
 ```bash
-tail -f /tmp/mern-server.log
-tail -f /tmp/mern-client.log
-```
-
-If you need to restart startup tasks manually:
+# Terminal 1: Start the Express server
+cd mern/server
+npm start
 
-```bash
-bash .devcontainer/startup.sh
+# Terminal 2: Start the React dev server
+cd mern/client
+npm run dev
 ```
 
+Then open http://localhost:5173 in your browser.
+
 ## Database Credentials
 
 - **Host**: `mongodb` (inside container) or `localhost:27017` (from host)
@@ -75,9 +71,8 @@ The devcontainer includes these extensions:
 
 ### MongoDB connection issues
 ```bash
-# Check if mongodb is running
-cd mern/server
-node --input-type=module -e "import { MongoClient } from 'mongodb'; const c = new MongoClient(process.env.ATLAS_URI || 'mongodb://admin:mongodb@mongodb:27017/employees'); await c.connect(); console.log(await c.db('admin').command({ ping: 1 })); await c.close();"
+# Check if MongoDB is running
+mongosh -u admin -p mongodb --eval "db.adminCommand('ping')"
 ```
 
 ### Port conflicts

.devcontainer/devcontainer.json

@@ -1,26 +1,14 @@
 {
-  "name": "MERN Stack with MongoDB",
+  "name": "MERN Stack Example",
   "dockerComposeFile": "docker-compose.yml",
   "service": "app",
   "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
-  
-  "features": {
-    "ghcr.io/devcontainers/features/node:1": {
-      "version": "22"
-    }
-  },
 
   "customizations": {
     "vscode": {
       "extensions": [
-        "mongodb.mongodb-vscode",
-        "ms-vscode.vscode-typescript-next",
-        "esbenp.prettier-vscode"
-      ],
-      "settings": {
-        "mongodb.connectionSslEnabled": false,
-        "mongodb.defaultAuthenticationDatabase": "admin"
-      }
+        "mongodb.mongodb-vscode"
+      ]
     }
   },
 
@@ -43,7 +31,14 @@
   "postCreateCommand": "cd mern/server && npm ci && cd ../client && npm ci",
   "postStartCommand": "bash .devcontainer/startup.sh",
 
+  // this will open 3 bash sessions, each one running the specified command
+  "postAttachCommand": {
+    "server": "cd mern/server && npm start",
+    "client": "cd mern/client && npm run dev -- --host 0.0.0.0",
+    "portSetup": "sleep 5 && .devcontainer/portSetup.sh"
+  },
+
   "remoteEnv": {
-    "ATLAS_URI": "mongodb://admin:mongodb@mongodb:27017/employees"
+    "ATLAS_URI": "mongodb://admin:mongodb@localhost:27017/employees"
   }
 }

.devcontainer/docker-compose.yml

@@ -1,34 +1,31 @@
-version: '3.8'
-
 services:
   app:
     image: mcr.microsoft.com/devcontainers/javascript-node:22-bookworm
     volumes:
       - ../..:/workspaces:cached
+ 
+    # Overrides default command so things don't shut down after the process ends.
     command: sleep infinity
+
+    # Runs app on the same network as the database container, allows "forwardPorts" in devcontainer.json function.
     network_mode: service:mongodb
-    environment:
-      - ATLAS_URI=mongodb://admin:mongodb@mongodb:27017/employees
-      - PORT=5050
+    # Use "forwardPorts" in **devcontainer.json** to forward an app port locally. 
+    # (Adding the "ports" property to this file will not forward from a Codespace.)
+
+    depends_on:
+      - mongodb
 
   mongodb:
-    image: mongodb/mongodb-atlas-local:latest
+    image: mongodb/mongodb-atlas-local:8.0.3-20250506T093411Z
     restart: unless-stopped
-    ports:
-      - 27017:27017
-    environment:
-      MONGODB_INITDB_ROOT_USERNAME: admin
-      MONGODB_INITDB_ROOT_PASSWORD: mongodb
-      MONGO_INITDB_DATABASE: employees
     volumes:
       - mongodb-data:/data/db
-      - mongodb-config:/data/configdb
-    healthcheck:
-      test: mongosh --eval "db.adminCommand('ping')"
-      interval: 10s
-      timeout: 5s
-      retries: 5
+      - ../..:/workspaces:cached
+    ports:
+      - 27017:27017
+    
+    # Add "forwardPorts": ["27017"] to **devcontainer.json** to forward MongoDB locally.
+    # (Adding the "ports" property to this file will not forward from a Codespace.)
 
 volumes:
-  mongodb-data:
-  mongodb-config:
+  mongodb-data:

.devcontainer/portSetup.sh

@@ -0,0 +1,19 @@
+if [ -z "$CODESPACE_NAME" ]; then
+    echo "Not running in a codespace, exiting."
+    exit
+fi
+
+echo "Installing GH"
+
+(type -p wget >/dev/null || (sudo apt update && sudo apt install wget -y)) \
+&& sudo mkdir -p -m 755 /etc/apt/keyrings \
+&& out=$(mktemp) && wget -nv -O$out https://cli.github.com/packages/githubcli-archive-keyring.gpg \
+&& cat $out | sudo tee /etc/apt/keyrings/githubcli-archive-keyring.gpg > /dev/null \
+&& sudo chmod go+r /etc/apt/keyrings/githubcli-archive-keyring.gpg \
+&& sudo mkdir -p -m 755 /etc/apt/sources.list.d \
+&& echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null \
+&& sudo apt update \
+&& sudo apt install gh -y
+
+echo "Exposing ports"
+gh codespace ports visibility 5050:public 5173:public 27017:public -c $CODESPACE_NAME

.devcontainer/startup.sh

@@ -5,7 +5,7 @@ ROOT_DIR="/workspaces/${localWorkspaceFolderBasename:-$(basename "$PWD")}"
 SERVER_DIR="$ROOT_DIR/mern/server"
 CLIENT_DIR="$ROOT_DIR/mern/client"
 CONFIG_FILE="$SERVER_DIR/config.env"
-ATLAS_URI_VALUE="${ATLAS_URI:-mongodb://admin:mongodb@mongodb:27017/employees}"
+ATLAS_URI_VALUE="${ATLAS_URI:-mongodb://admin:mongodb@localhost:27017/employees}"
 PORT_VALUE="${PORT:-5050}"
 
 ensure_config() {

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "mdb.presetConnections": [
+        {
+            "name": "Local Database",
+            "connectionString": "mongodb://localhost:27017"
+        }
+    ],
+    "mdb.showOverviewPageAfterInstall": false
+}