chore: adding devcontainer with create aztec app

.devcontainer/react/devcontainer.json

@@ -0,0 +1,23 @@
+{
+  "name": "React App",
+  "image": "node:lts-bookworm",
+  "features": {
+    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
+  },
+  "onCreateCommand": "cp -R /root/workspace /root/scripts && rm -rf /root/workspace/* && sh /root/scripts/onCreateCommand.sh app react",
+  "postAttachCommand": "sh /root/scripts/postAttachCommand.sh app react",
+  "customizations": {
+    "vscode": {
+      "settings": {},
+      "extensions": ["noir-lang.vscode-noir"]
+    }
+  },
+  "hostRequirements": {
+    "cpus": 8,
+    "memory": "8gb",
+    "storage": "32gb"
+  },
+  "workspaceMount": "source=${localWorkspaceFolder}/.devcontainer/scripts,target=/root/workspace,type=bind",
+  "workspaceFolder": "/root/workspace",
+  "forwardPorts": [8080]
+}

.devcontainer/scripts/onCreateCommand.sh

@@ -0,0 +1,22 @@
+#!/usr/bin/env bash
+
+TYPE=$1
+NAME=$2
+
+apt install gh
+
+curl -s install.aztec.network | NON_INTERACTIVE=1 BIN_PATH=/usr/local/bin bash -s
+docker compose -f $HOME/.aztec/docker-compose.yml pull
+
+if ! grep -q "PXE_URL" ~/.bashrc; then
+    echo "export PXE_URL=https://\$CODESPACE_NAME-8080.preview.\$GITHUB_CODESPACES_PORT_FORWARDING_DOMAIN" >> ~/.bashrc
+fi
+
+echo 'y' | npx create-aztec-app -t $TYPE -n $NAME -s
+mv react/* .
+rm -rf react
+
+yarn
+
+npx -y playwright install --with-deps
+yarn prep

.devcontainer/scripts/postAttachCommand.sh

@@ -0,0 +1,64 @@
+#!/usr/bin/env bash
+TYPE=$1
+NAME=$2
+
+gh codespace ports visibility 8080:public -c $CODESPACE_NAME
+
+(nohup /usr/local/bin/aztec sandbox &)
+
+r=$(tput sgr0)       # Reset color
+bold=$(tput bold)    # Bold text
+g=$(tput setaf 46)   # Light Green
+b=$(tput setaf 21)   # Bright Blue
+p=$(tput setaf 13)   # Magenta
+y=$(tput setaf 226)  # Bright Yellow
+c=$(tput setaf 51)   # Cyan
+o=$(tput setaf 208)  # Orange
+
+# Function to print colored text
+print_colored() {
+  case $2 in
+    green)
+      color=$g
+      ;;
+    blue)
+      color=$b
+      ;;
+    magenta)
+      color=$p
+      ;;
+    yellow)
+      color=$y
+      ;;
+    cyan)
+      color=$c
+      ;;
+    orange)
+      color=$o
+      ;;
+    *)
+      color=$r
+      ;;
+  esac
+  echo "${color}$1${r}"
+}
+
+echo
+echo "${bold}${c} █████╗ ███████╗████████╗███████╗ ██████╗${r}"
+echo "${bold}${o}██╔══██╗╚══███╔╝╚══██╔══╝██╔════╝██╔════╝${r}"
+echo "${bold}${g}███████║  ███╔╝    ██║   █████╗  ██║${r}"
+echo "${bold}${b}██╔══██║ ███╔╝     ██║   ██╔══╝  ██║${r}"
+echo "${bold}${p}██║  ██║███████╗   ██║   ███████╗╚██████╗${r}"
+echo "${bold}${y}╚═╝  ╚═╝╚══════╝   ╚═╝   ╚══════╝ ╚═════╝${r}"
+echo
+print_colored "${bold}Sandbox Codespace" "cyan"
+print_colored "${bold}Your codespace is ready with your chosen box! 🎉" "cyan"
+echo
+print_colored "All the packages are already installed, and you can now run yarn dev or any other package.json script." "magenta"
+print_colored "You can also use this codespace for its running sandbox, by connecting your local environment to it." "magenta"
+echo
+print_colored "To do so, set the PXE_URL to this codespace's sandbox URL:" "magenta"
+print_colored "${PXE_URL}" "green" 
+print_colored "ex. PXE_URL=\"${PXE_URL}\" yarn dev"
+echo
+print_colored "${bold}Enjoy your sandbox! 🏖️" "orange"

.devcontainer/token/devcontainer.json

@@ -0,0 +1,30 @@
+{
+  "name": "Token Contract Only",
+  "image": "node:lts-bookworm",
+  "features": {
+    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
+  },
+  "onCreateCommand": ".devcontainer/scripts/onCreateCommand.sh contract token_contract",
+  "postAttachCommand": ".devcontainer/scripts/postAttachCommand.sh contract token_contract",
+  "customizations": {
+    "vscode": {
+      "settings": {},
+      "extensions": ["noir-lang.vscode-noir"]
+    }
+  },
+  "workspaceMount": "source=${localWorkspaceFolder}/.devcontainer/token_contract,target=/root/workspace,type=bind",
+  "workspaceFolder": "/root/workspace",
+  "hostRequirements": {
+    "cpus": 8,
+    "memory": "8gb",
+    "storage": "32gb"
+  },
+  "mounts": [
+    {
+      "source": "${localWorkspaceFolder}/.devcontainer/scripts",
+      "target": "/root/workspace/.devcontainer/scripts",
+      "type": "bind"
+    }
+  ],
+  "forwardPorts": [8080]
+}

.devcontainer/vanilla/devcontainer.json

@@ -0,0 +1,30 @@
+{
+  "name": "Vanilla Typescript App",
+  "image": "node:lts-bookworm",
+  "features": {
+    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
+  },
+  "onCreateCommand": ".devcontainer/scripts/onCreateCommand.sh app vanilla",
+  "postAttachCommand": ".devcontainer/scripts/postAttachCommand.sh app vanilla",
+  "customizations": {
+    "vscode": {
+      "settings": {},
+      "extensions": ["noir-lang.vscode-noir"]
+    }
+  },
+  "workspaceMount": "source=${localWorkspaceFolder}/.devcontainer/vanilla,target=/root/workspace,type=bind",
+  "workspaceFolder": "/root/workspace",
+  "hostRequirements": {
+    "cpus": 8,
+    "memory": "8gb",
+    "storage": "32gb"
+  },
+  "mounts": [
+    {
+      "source": "${localWorkspaceFolder}/.devcontainer/scripts",
+      "target": "/root/workspace/.devcontainer/scripts",
+      "type": "bind"
+    }
+  ],
+  "forwardPorts": [8080]
+}

boxes/README.md

@@ -16,7 +16,7 @@ If you have [node](https://nodejs.org/en/download) installed, you can open a ter
 
 or
 
-`npm create aztec-app`
+`npx create-aztec-app`
 
 The script will install the sandbox, run it, and clone the boilerplate you chose. You can pass some options:
 

boxes/bin.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { Command } from "commander";
+import { Command, Option } from "commander";
 const program = new Command();
 import { chooseProject } from "./scripts/steps/chooseBox.js";
 import { sandboxRun } from "./scripts/steps/sandbox/run.js";
@@ -86,17 +86,37 @@ const init = async ({ debug, github_token, version }) => {
 program.option("-d, --debug", "output extra debugging");
 program.option("-gh, --github_token <github_token>", "a github token");
 program.option("-v, --version <version>", "a version number or master tag");
+program.option("-s, --skip-sandbox", "install and run sandbox after cloning");
+
+program.option(
+  "-t, --project-type <projectType>",
+  "the type of the project to clone ('app' or 'contract')",
+);
+program.option(
+  "-n, --project-name <projectName>",
+  "the name of the project to clone",
+);
+program.parse();
+
+// this is some bad code, but it's def fun
+// I'm matching all keys started with project and
+// then using using modulo to say "if one is defined, two must be defined"
+const optsKeys = Object.keys(program.opts()).filter((e) => /project*/g.test(e));
+if (optsKeys.length % 2) {
+  throw Error("You must define both the project type and the project name");
+}
+
 program.action(async (options) => {
+  const { projectType, projectName, skipSandbox } = options;
   // SETUP: Initialize global variables
   await init(options);
-
   // STEP 1: Choose the boilerplate
-  await chooseProject();
+  await chooseProject({ projectType, projectName });
 
+  if (skipSandbox) return;
   // STEP 2: Install the Sandbox
-  await sandboxInstallOrUpdate();
-
+  await sandboxInstallOrUpdate({ skipQuestion: skipSandbox });
   // STEP 3: Running the Sandbox
-  await sandboxRun();
+  await sandboxRun({ skipQuestion: skipSandbox });
 });
 program.parse();

boxes/boxes/react/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

boxes/boxes/vanilla/.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

boxes/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-aztec-app",
   "packageManager": "[email protected]",
-  "version": "0.2.15",
+  "version": "0.3.16",
   "type": "module",
   "scripts": {
     "compile": "yarn workspaces foreach -A -v run compile",

boxes/scripts/steps/chooseBox.js

@@ -8,24 +8,31 @@ import {
 } from "../utils.js";
 import { getPlaceholders } from "../config.js";
 
-async function chooseAndCloneBox() {
+async function chooseAndCloneBox({ projectName }) {
   const availableBoxes = await getAvailableBoxes();
-  const appType = await select({
-    message: `Please choose your Aztec boilerplate:`,
-    choices: [
-      ...availableBoxes.map((box) => {
-        return { value: box.name, name: box.description };
-      }),
-      { value: "skip", name: "Skip this step" },
-    ],
-  });
+  if (!projectName) {
+    projectName = await select({
+      message: `Please choose your Aztec boilerplate:`,
+      choices: [
+        ...availableBoxes.map((box) => {
+          return { value: box.name, name: box.description };
+        }),
+        { value: "skip", name: "Skip this step" },
+      ],
+    });
+  } else {
+    if (!availableBoxes.find((box) => box.name === projectName)) {
+      throw new Error(`Box ${projectName} not found`);
+    }
+  }
 
   const rootDir = await clone({
     path: "boxes/boxes",
-    choice: appType,
+    choice: projectName,
     type: "box",
     tag,
     version,
+    name: projectName,
   });
 
   await replacePaths({
@@ -37,25 +44,33 @@ async function chooseAndCloneBox() {
   success("Your code is ready!");
 }
 
-async function chooseAndCloneContract() {
+async function chooseAndCloneContract({ projectName }) {
   const availableContracts = await getAvailableContracts();
   // let user choose one of the contracts in noir-projects
-  const contract = await select({
-    message: `Please choose your Aztec boilerplate:`,
-    choices: [
-      ...availableContracts.map((contract) => {
-        return { value: contract.name, name: contract.name };
-      }),
-      { value: "skip", name: "Skip this step" },
-    ],
-  });
+
+  if (!projectName) {
+    projectName = await select({
+      message: `Please choose your Aztec boilerplate:`,
+      choices: [
+        ...availableContracts.map((contract) => {
+          return { value: contract.name, name: contract.name };
+        }),
+        { value: "skip", name: "Skip this step" },
+      ],
+    });
+  } else {
+    if (!availableContracts.find((contract) => contract.name === projectName)) {
+      throw new Error(`Contract ${projectName} not found`);
+    }
+  }
 
   const rootDir = await clone({
     path: "noir-projects/noir-contracts/contracts",
-    choice: contract,
+    choice: projectName,
     type: "contract",
     tag,
     version,
+    name: projectName,
   });
 
   await replacePaths({
@@ -67,28 +82,30 @@ async function chooseAndCloneContract() {
 
   await processProject({
     rootDir,
-    placeholders: getPlaceholders(contract),
+    placeholders: getPlaceholders(projectName),
   });
   success("Your code is ready!");
 
   // get the e2e test for that contract from yarn-project/end-to-end
 }
 
-export async function chooseProject() {
-  const projectType = await select({
-    message: `Please choose your type of project:`,
-    choices: [
-      { value: "fs_app", name: "Boilerplate project with frontend" },
-      { value: "contract_only", name: "Just a contract example" },
-      { value: "skip", name: "Skip this step" },
-    ],
-  });
+export async function chooseProject({ projectType, projectName }) {
+  if (!projectType) {
+    projectType = await select({
+      message: `Please choose your type of project:`,
+      choices: [
+        { value: "app", name: "Boilerplate project with frontend" },
+        { value: "contract", name: "Just a contract example" },
+        { value: "skip", name: "Skip this step" },
+      ],
+    });
+  }
 
   if (projectType === "skip") {
     return;
-  } else if (projectType === "contract_only") {
-    await chooseAndCloneContract();
-  } else if (projectType === "fs_app") {
-    await chooseAndCloneBox();
+  } else if (projectType === "contract") {
+    await chooseAndCloneContract({ projectName: projectName });
+  } else if (projectType === "app") {
+    await chooseAndCloneBox({ projectName: projectName });
   }
 }