chore(repo): improve the devcontainer setup (#27221)

- respect `pnpm` version declared in root `package.json`
- improve performances when installing node modules
- add troubleshooting instructions in `CONTRIBUTING.md` to help solve
common issue related to outdated `GLIBC` version

.devcontainer/Dockerfile

@@ -1,7 +0,0 @@
-FROM mcr.microsoft.com/devcontainers/typescript-node:20-bullseye
-
-# Update the underlying (Debian) OS, to make sure we have the latest security patches and libraries like 'GLIBC' 
-RUN sudo apt-get update  && sudo apt-get -y upgrade
-
-# Update pnpm
-RUN npm install -g pnpm@8.15.7

.devcontainer/devcontainer.json

@@ -3,31 +3,46 @@
 {
   "name": "NxDevContainer",
   // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-  "build": {
-    // Path is relative to the devcontainer.json file.
-    "dockerfile": "Dockerfile"
-  },
+
+  // Starting from a base image that already contains GLIBC v2.33 or higher (required by Nx)
+  // Try a more recent distribution, if your are having build issues related to GLIBC version
+  // Here we use 'bookworm', which is based on `Debian-12`, which comes with `GLIBC v2.36`
+  // (Nx tools currenlty requires `GLIBC v2.33` or higher)
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:20-bookworm",
+
   "features": {
     "ghcr.io/devcontainers/features/rust:1": {}
   },
+
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
   // 4211 = nx graph port
-  "forwardPorts": [4211],
+  // 4873 = verdaccio (local npm registry) port
+  "forwardPorts": [4211, 4873],
+
   // Use 'postCreateCommand' to run commands after the container is created.
   "postCreateCommand": "./.devcontainer/postCreateCommand.sh",
+
   // Configure tool-specific properties.
   "customizations": {
     "vscode": {
       "extensions": [
         "nrwl.angular-console",
         "firsttris.vscode-jest-runner",
-        "eamodio.gitlens"
+        "eamodio.gitlens",
+        "mhutchie.git-graph",
+        "mutantdino.resourcemonitor" // to monitor cpu, memory usage from the dev container
       ],
       "settings": {
-        "debug.javascript.autoAttachFilter": "onlyWithFlag" // workaround for that issue: https://github.com/microsoft/vscode-js-debug/issues/374#issuecomment-622239998
+        "debug.javascript.autoAttachFilter": "disabled" // workaround for that issue: https://github.com/microsoft/vscode-js-debug/issues/374#issuecomment-622239998
       }
     }
-  }
+  },
+
+  // To improve disk performances when installing node modules
+  // See https://code.visualstudio.com/remote/advancedcontainers/improve-performance
+  "mounts": [
+    "source=${localWorkspaceFolderBasename}-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume"
+  ],
   // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-  // "remoteUser": "root"
+  "remoteUser": "root"
 }

.devcontainer/postCreateCommand.sh

@@ -1,5 +1,23 @@
 #!/bin/sh
 
-# Install dependencies
-pnpm install --frozen-lockfile
+# Update the underlying (Debian) OS, to make sure we have the latest security patches and libraries like 'GLIBC' 
+echo "⚙️ Updating the underlying OS..."
+sudo apt-get update && sudo apt-get -y upgrade
 
+# Uninstall globally installed PNPM (required version will be reinstalled through corepack)
+echo "❌ Uninstalling globally installed PNPM..."
+npm uninstall -g pnpm
+
+# Prevent corepack from prompting user before downloading PNPM 
+export COREPACK_ENABLE_DOWNLOAD_PROMPT=0
+
+# Enable corepack 
+corepack enable 
+
+# Install the PNPM version defined in the root package.json
+echo "⚙️ Installing required PNPM version..."
+corepack prepare --activate
+
+# Install NPM dependencies
+echo "⚙️ Installing NPM dependencies..."
+pnpm install --frozen-lockfile

CONTRIBUTING.md

@@ -49,15 +49,33 @@ The repo comes with a preconfigured `devcontainer.json` file (located in `.devco
 
 If you open the repo in [Github Codespace](https://github.com/features/codespaces), it will also leverage this config file, to setup the codespace, with the same required tools.
 
+> 💡 **Troubleshooting**
+>
+> If you are having issues when running Nx commands like `build`, `test`... related to the version of `GLIBC`,
+> it probably means the version that is installed on the devcontainer, **is outdated** compare to the minimum version required by Nx tools.
+>
+> You can check currently installed version by running the following command, in a terminal within the container:
+>
+> `ldd --version`
+>
+> Then, try updating the base image used in [devcontainer.json](.devcontainer/devcontainer.json) and rebuild it, to see if it solved the issue.
+>
+> Current base image is `"mcr.microsoft.com/devcontainers/typescript-node:20-bookworm"` which is based on `Debian-12 (bookworm)`,
+> which comes with `GLIBC v2.36` pre-installed (Nx tools currenlty requires `GLIBC v2.33` or higher).
+
 ## Building the Project
 
-> Nx uses Rust to build native bindings for Node. Please make sure that you have Rust installed via [rustup.rs](https://rustup.rs)
-> If you have VSCode + Docker, this can be automated for you, see [section](#development-workstation-setup) above
+> 💡 Nx uses `Rust` to build native bindings for Node. Please make sure that you have Rust installed via [rustup.rs](https://rustup.rs)
+> If you have `VSCode` + `Docker`, this can be automated for you, see [section](#development-workstation-setup) above
 
 After cloning the project to your machine, to install the dependencies, run:
 
 ```bash
-pnpm i
+pnpm install
+
+// or prefer...
+
+pnpm install --frozen-lockfile // if you haven't changed any dependency
 ```
 
 To build all the packages, run: