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
 
@@ -27,26 +24,25 @@ Once the devcontainer is running:
 |---------|-----|---------|
 | React App | http://localhost:5173 | Frontend (Vite dev server) |
 | Express API | http://localhost:5050 | Backend REST API |
-| MongoDB | mongodb://admin:mongodb@localhost:27017 | Database (no browser UI) |
+| MongoDB | mongodb://localhost:27017 | Database (no browser UI) |
 | MongoDB VS Code Extension | N/A | Query database directly in VS Code |
 
 ## 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://localhost:27017/"
   }
 }

.devcontainer/docker-compose.yml

@@ -1,34 +1,26 @@
-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
+
+    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
+    
 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,16 +5,16 @@ 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://localhost:27017/}"
 PORT_VALUE="${PORT:-5050}"
 
 ensure_config() {
-  if [[ ! -f "$CONFIG_FILE" ]]; then
-    cat > "$CONFIG_FILE" <<EOF
+  cat > "$CONFIG_FILE" <<EOF
 ATLAS_URI=$ATLAS_URI_VALUE
 PORT=$PORT_VALUE
 EOF
-  fi
+
+  echo "Wrote $CONFIG_FILE with ATLAS_URI and PORT."
 }
 
 wait_for_mongodb() {
@@ -35,8 +35,28 @@ wait_for_mongodb() {
 seed_database() {
   (
     cd "$SERVER_DIR"
-    node seed.js
+    node --env-file=config.env seed.js > /tmp/mern-seed.log 2>&1
+  )
+
+  echo "Seed completed (log: /tmp/mern-seed.log)."
+}
+
+verify_seed_data() {
+  local count
+
+  count=$(
+    cd "$SERVER_DIR" &&
+      node --env-file=config.env --input-type=module -e "import { MongoClient } from 'mongodb'; const c = new MongoClient(process.env.ATLAS_URI); await c.connect(); const n = await c.db('employees').collection('records').countDocuments(); console.log(n); await c.close();"
   )
+
+  echo "Seed verification: employees.records has $count documents."
+
+  if [[ "$count" -le 0 ]]; then
+    echo "Seed verification failed: no documents found in employees.records."
+    echo "Seed log tail:"
+    tail -n 50 /tmp/mern-seed.log || true
+    return 1
+  fi
 }
 
 start_server_if_needed() {
@@ -68,6 +88,7 @@ start_client_if_needed() {
 ensure_config
 wait_for_mongodb
 seed_database
+verify_seed_data
 start_server_if_needed
 start_client_if_needed
 

.github/workflows/main.yaml

@@ -19,7 +19,7 @@ jobs:
       mongodb:
         image: mongo:latest
         options: >-
-          --health-cmd mongosh
+          --health-cmd "mongosh --username admin --password mongodb --authenticationDatabase admin --eval \"db.adminCommand('ping')\""
           --health-interval 10s
           --health-timeout 5s
           --health-retries 5
@@ -51,7 +51,7 @@ jobs:
 
       - name: Start server in the background
         env:
-          ATLAS_URI: mongodb://admin:mongodb@localhost:27017/
+          ATLAS_URI: mongodb://admin:mongodb@localhost:27017/employees?authSource=admin
         run: |
           echo "ATLAS_URI=$ATLAS_URI" > config.env
           npm start > /tmp/server.log 2>&1 &

.vscode/settings.json

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

README.md

@@ -7,7 +7,6 @@ Companion code for the [MERN Stack Tutorial](https://www.mongodb.com/languages/m
 [![CI](https://github.com/mongodb-developer/mern-stack-example/actions/workflows/main.yaml/badge.svg)](https://github.com/mongodb-developer/mern-stack-example/actions/workflows/main.yaml)
 [![License: Apache-2.0](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](LICENSE)
 [![GitHub stars](https://img.shields.io/github/stars/mongodb-developer/mern-stack-example?style=social)](https://github.com/mongodb-developer/mern-stack-example/stargazers)
-[![GitHub issues](https://img.shields.io/github/issues/mongodb-developer/mern-stack-example)](https://github.com/mongodb-developer/mern-stack-example/issues)
 
 ## Project Overview
 

mern/server/config.env.example

@@ -1,7 +1,7 @@
 # MongoDB Atlas Connection String
 # Replace with your MongoDB Atlas connection string
 # Format: mongodb+srv://<username>:<password>@<cluster>.mongodb.net/
-ATLAS_URI=mongodb://admin:mongodb@localhost:27017/
+ATLAS_URI=mongodb://localhost:27017/
 
 # Express Server Port
 PORT=5050