Improve IDX templates

.idx-templates/latest/dev.nix

@@ -1,22 +1,29 @@
 # To learn more about how to use Nix to configure your environment
 # see: https://developers.google.com/idx/guides/customize-idx-env
-{ pkgs, ... }:
-{
+{ pkgs, ... }: {
   # Which nixpkgs channel to use.
   channel = "stable-24.05"; # or "unstable"
   # Use https://search.nixos.org/packages to find packages
   packages = [ pkgs.nodejs_20 ];
   # Sets environment variables in the workspace
   env = { };
-  idx = {
+  idx = let
     # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
-    extensions = [
-      "astro-build.astro-vscode"
-    ];
+    # Workaround for https://community.idx.dev/t/8374
+    # `idx.extensions` only work for extensions declared in the Nixpkgs derivation used internally by IDX,
+    # forked at some point from the official `release-24.05` channel.
+    # Instead of relying on IDX internal installation, we also add a startup script to install/update the extensions.
+    extensions = [ "astro-build.astro-vscode" ];
+  in {
+    inherit extensions;
     workspace = {
       # Runs when a workspace is first created with this `dev.nix` file
       onCreate = {
-        install = "npm ci --prefer-offline --no-audit --no-progress --timing || npm i --no-audit --no-progress --timing";
+        install-deps =
+          "npm ci --prefer-offline --no-audit --no-progress --timing || npm i --no-audit --no-progress --timing";
+        # Workaround described above.
+        install-extensions = pkgs.lib.escapeShellArgs ([ "code" ]
+          ++ builtins.map (ext: "--install-extension=${ext}") extensions);
         # Open editors for the following files by default, if they exist:
         default.openFiles = [ "src/pages/index.astro" ];
       };
@@ -27,16 +34,8 @@
       enable = true;
       previews = {
         web = {
-          command = [
-            "npm"
-            "run"
-            "dev"
-            "--"
-            "--port"
-            "$PORT"
-            "--hostname"
-            "0.0.0.0"
-          ];
+          command =
+            [ "npm" "run" "dev" "--" "--port" "$PORT" "--hostname" "0.0.0.0" ];
           manager = "web";
         };
       };

.idx-templates/latest/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": [],
+  "unwantedRecommendations": ["astro-build.astro-vscode"]
+}

.idx-templates/latest/idx-template.nix

@@ -1,21 +1,56 @@
-{
-  pkgs,
-  astroTemplate ? "basics",
-  ...
-}:
-{
-  packages = [
-    pkgs.nodejs_20
-  ];
+{ pkgs, astroTemplate ? "basics", debug ? false, ... }: {
+  packages = [ pkgs.git pkgs.nodejs_20 pkgs.nodePackages.pnpm ];
 
-  bootstrap = ''
-    mkdir "$out"
-    npm create astro@latest "$out" -- --template ${astroTemplate} --git --no-install --no-houston
+  bootstrap = let
+    script = pkgs.writeShellScript "bootstrap" ''
+      set -exo pipefail
+      logfile="$PWD/create.log"
+      {
+        ${
+          pkgs.lib.strings.escapeShellArgs [
+            # Create new project on a "project" folder in the bootstrap environment
+            # `npm create` hangs randomly when running inside of Nix building, use PNPM
+            # to create the project within the bootstrap environment and use NPM for intalling
+            # dependencies on later stages
+            "pnpm"
+            "create"
+            "astro@latest"
+            "project"
+            # Use the selected template
+            "--template"
+            astroTemplate
+            "--git" # Initialize Git repository in the new workspace
+            "--no-install" # Skip installing dependency as it is done on a later phase of IDX startup
+            "--skip-houston" # Skip the Houston animation since this command runs non-interactively
+            "--yes" # Accept all default options
+          ]
+        }
 
-    mkdir -p "$out"/.idx
-    cp ${./dev.nix} "$out/.idx/dev.nix"
-    cp ${./icon.png} "$out/.idx/icon.png"
+        # Move the project to the workspace output
+        mv project "$out"
 
-    ( cd "$out" && npm i --package-lock-only --ignore-scripts )
+        cd "$out"
+
+        # Create IDX config directory in the workspace
+        mkdir -p ".idx"
+
+        # Copy the template development configuration into the IDX directory
+        # Use cat piped to a file so it doesn't carry the permissions from the Nix store (read-only and owned by a different user)
+        cat ${./dev.nix} > ".idx/dev.nix"
+        
+        # Overwrite extensions file for IDX so it doesn't show the extension recommendation popup
+        # The extension will be installed automatically
+        mkdir -p .vscode
+        cat ${./extensions.json} > ".vscode/extensions.json"
+
+        # Add the modified files to the staging area like all other files
+        git add . || true
+      } 2>&1 | tee "$logfile"
+
+      ${if debug then ''mv "$logfile" "$out/create.log"'' else ""}
+    '';
+  in ''
+    # Timeout for the whole bootstrap script
+    timeout -k 30s 30s ${script}
   '';
 }