chore: adding devcontainer with create aztec app (#5960)

Let me just post a random Mr. Meeseks:

![image](https://github.com/AztecProtocol/aztec-packages/assets/20129824/a19a22dc-17d1-4b44-b7cf-9313abcc0a2c)

Cool, so this PR:
- Adds some badges Julian kindly made for us, to the main README so
people can click and get a codespace with a sandbox in less than 2mins
- Fixes a bug where the `onCreateCommand` was hardcoded to be a react
app
- Adds a `sandbox` subcommand to the `npx script` so it's easy to manage
the sandbox from there and see logs, this makes the codespace free up
the terminal also

.devcontainer/react/devcontainer.json

@@ -12,11 +12,6 @@
       "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

@@ -3,19 +3,24 @@
 TYPE=$1
 NAME=$2
 
-
 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
 
+if ! grep -q "alias sandbox" ~/.bashrc; then
+    echo "alias sandbox=\"npx create-aztec-app sandbox\"" >> ~/.bashrc
+fi
+
+source ~/.bashrc
 yes | npx create-aztec-app -t $TYPE -n $NAME -s
-mv react/* react/.* .
-rm -rf react
+mv $NAME/* $NAME/.* .
+rm -rf $NAME
 
 yarn
 
 npx -y playwright install --with-deps
+yarn add @aztec/builder
 yarn prep

.devcontainer/scripts/postAttachCommand.sh

@@ -5,7 +5,7 @@ NAME=$2
 apt install gh
 gh codespace ports visibility 8080:public -c $CODESPACE_NAME
 
-(nohup /usr/local/bin/aztec sandbox &)
+npx create-aztec-app sandbox start
 
 r=$(tput sgr0)       # Reset color
 bold=$(tput bold)    # Bold text
@@ -52,14 +52,16 @@ echo "${bold}${b}██╔══██║ ███╔╝     ██║   ██
 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"
+print_colored "You can now yarn dev or any other package.json script." "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"
+print_colored "Manage the running development network by running:" "magenta"
+print_colored "sandbox [start, stop, logs, etc]" "green"
+print_colored "example: \"sandbox logs\""
 echo
-print_colored "To do so, set the PXE_URL to this codespace's sandbox URL:" "magenta"
+print_colored "You can also connect your local environment to it." "magenta"
+print_colored "To do so, prepend your commands with this codespace's sandbox URL:" "magenta"
 print_colored "${PXE_URL}" "green" 
-print_colored "ex. PXE_URL=\"${PXE_URL}\" yarn dev"
+print_colored "example: PXE_URL=\"${PXE_URL}\" yarn dev"
 echo
 print_colored "${bold}Enjoy your sandbox! 🏖️" "orange"

.devcontainer/token/devcontainer.json

@@ -4,27 +4,15 @@
   "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",
+  "onCreateCommand": "cp -R /root/workspace /root/scripts && rm -rf /root/workspace/* && sh /root/scripts/onCreateCommand.sh contract token_contract",
+  "postAttachCommand": "sh /root/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",
+  "workspaceMount": "source=${localWorkspaceFolder}/.devcontainer/scripts,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

@@ -1,30 +1,18 @@
 {
-  "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]
+	"name": "Vanilla Typescript 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 vanilla",
+	"postAttachCommand": "sh /root/scripts/postAttachCommand.sh app vanilla",
+	"customizations": {
+		"vscode": {
+			"settings": {},
+			"extensions": ["noir-lang.vscode-noir"]
+		}
+	},
+	"workspaceMount": "source=${localWorkspaceFolder}/.devcontainer/scripts,target=/root/workspace,type=bind",
+	"workspaceFolder": "/root/workspace",
+	"forwardPorts": [8080]
 }

README.md

@@ -6,6 +6,12 @@ All the packages that make up [Aztec](https://docs.aztec.network).
 - [**`yarn-project`**](/yarn-project): Typescript code for client and backend
 - [**`docs`**](/docs): Documentation source for the docs site
 
+## Getting Started
+
+Want to start quickly? Get started in minutes with a free Github Codespace.
+
+[![One-Click React Starter](.devcontainer/assets/react_cta_badge.svg)](https://codespaces.new/AztecProtocol/aztec-packages?devcontainer_path=.devcontainer%2Freact%2Fdevcontainer.json) [![One-Click HTML/TS Starter](.devcontainer/assets/vanilla_cta_badge.svg)](https://codespaces.new/AztecProtocol/aztec-packages?devcontainer_path=.devcontainer%2Fvanilla%2Fdevcontainer.json) [![One-Click Token Starter](.devcontainer/assets/token_cta_badge.svg)](https://codespaces.new/AztecProtocol/aztec-packages?devcontainer_path=.devcontainer%2Ftoken%2Fdevcontainer.json)
+
 ## Popular packages
 
 - [Aztec.nr](./noir-projects/aztec-nr/): A [Noir](https://noir-lang.org) framework for smart contracts on Aztec.
@@ -70,17 +76,17 @@ Recovering if the sync is not happening with basic pull commands:
 - manually editing the parent variable in noir/noir-repo/.gitrepo: this is the parent of the last sync commit on aztec side. If you get errors with a commit not being found in the upstream repo, and the commit mentioned is not the commit variable above, it might indicate this is somehow incorrect. This can happen when commit content is ported without its history, e.g. squashes
 - use pull --force ONLY where you would use git reset. That is, if you really want to match some upstream noir for a purpose its fine, but you'll lose local changes (if any)
 
-
 ## Earthly
 
 Earthly is a reproducible build tool that aims to combine the functionality of Docker, Makefiles and BASH.
 Non-build earthly targets should start with 'test', 'run', or 'bench' as a general rule (but not hard rule) while builds can be nouns or start with build-.
 If something is a bundle of targets for CI, we can do e.g. build-ci, test-ci etc.
 See barretenberg/cpp/Earthfile for an example of a fairly involved Earthfile that can be used for inspiration.
-Earthly docs https://docs.earthly.dev/ are extensive and show the various build patterns. 
+[Earthly docs](https://docs.earthly.dev/) are extensive and show the various build patterns.
 
 In a nutshell:
+
 - Docker-like syntax defines all builds. We lean on docker heavily for when to rebuild and cache, and how to run in a reproducible manner.
 - It supports modularization of the build manifest into multiple directories that can be imported. Simple functions and conditional logic can be used.
 - We provide two modes, one for CI by passing --ci and one for local with incremental builds.
-- We do NOT provide a native execution story for anything but Linux and WASM currently. 
+- We do NOT provide a native execution story for anything but Linux and WASM currently.