chore: some codespaces fixes, improved boxes, added badges

Author: signorecello

.devcontainer/assets/react_cta_badge.svg

@@ -10,9 +10,14 @@ 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
 

.devcontainer/assets/token_cta_badge.svg

@@ -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/assets/vanilla_cta_badge.svg

@@ -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.

.devcontainer/scripts/onCreateCommand.sh

@@ -2,13 +2,22 @@
 import { Command, Option } from "commander";
 const program = new Command();
 import { chooseProject } from "./scripts/steps/chooseBox.js";
-import { sandboxRun } from "./scripts/steps/sandbox/run.js";
-import { sandboxInstallOrUpdate } from "./scripts/steps/sandbox/install.js";
+import {
+  install,
+  update,
+  sandboxInstallOrUpdate,
+} from "./scripts/steps/sandbox/install.js";
 import axios from "axios";
 import pino from "pino";
 import pretty from "pino-pretty";
 import ora from "ora";
 import { AZTEC_REPO } from "./scripts/config.js";
+import {
+  start,
+  stop,
+  log,
+  sandboxRunStep,
+} from "./scripts/steps/sandbox/run.js";
 
 const getLatestStable = async () => {
   const { data } = await axios.get(
@@ -83,40 +92,52 @@ const init = async ({ debug, github_token, version }) => {
   global.spinner = ora({ color: "blue" });
 };
 
-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();
+const sandbox = program.command("sandbox");
+sandbox.description("Manage the Aztec Sandbox");
+sandbox.command("start").action(start);
+sandbox.command("logs").action(log);
+sandbox.command("stop").action(stop);
+sandbox.command("install").action(install);
+sandbox.command("update").action(update);
+
+program
+  .command("new", { isDefault: true })
+  .description("An Aztec project with a built-in development network")
+  .option("-d, --debug", "output extra debugging")
+  .option("-gh, --github_token <github_token>", "a github token")
+  .option("-v, --version <version>", "a version number or master tag")
+  .option(
+    "-s, --skip-sandbox",
+    "skip sandbox installation and run after cloning",
+  )
+  .option(
+    "-t, --project-type <projectType>",
+    "the type of the project to clone ('app' or 'contract')",
+  )
+  .option(
+    "-n, --project-name <projectName>",
+    "the name of the project to clone",
+  )
+  .action(async (options) => {
+    // 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(options).filter((e) => /project*/g.test(e));
+    if (optsKeys.length % 2) {
+      throw Error("You must define both the project type and the project name");
+    }
+
+    const { projectType, projectName, skipSandbox } = options;
+    // SETUP: Initialize global variables
+    await init(options);
+    // // STEP 1: Choose the boilerplate
+    await chooseProject({ projectType, projectName });
+
+    if (skipSandbox) return;
+    // // STEP 2: Install the Sandbox
+    await sandboxInstallOrUpdate({ skipQuestion: skipSandbox });
+    // STEP 3: Running the Sandbox
+    await sandboxRunStep({ skipQuestion: skipSandbox });
+  });
 
-// 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({ projectType, projectName });
-
-  if (skipSandbox) return;
-  // STEP 2: Install the Sandbox
-  await sandboxInstallOrUpdate({ skipQuestion: skipSandbox });
-  // STEP 3: Running the Sandbox
-  await sandboxRun({ skipQuestion: skipSandbox });
-});
 program.parse();

.devcontainer/scripts/postAttachCommand.sh

@@ -1,7 +1,7 @@
 {
   "name": "create-aztec-app",
   "packageManager": "yarn@4.1.0",
-  "version": "0.3.16",
+  "version": "0.4.2",
   "type": "module",
   "scripts": {
     "compile": "yarn workspaces foreach -A -v run compile",
@@ -31,7 +31,6 @@
     "@inquirer/select": "^2.0.0",
     "axios": "^1.6.7",
     "commander": "^12.0.0",
-    "node-pty": "^1.0.0",
     "ora": "^8.0.1",
     "pino": "^8.19.0",
     "pino-pretty": "^10.3.1",

README.md

@@ -6,9 +6,18 @@ import {
   replacePaths,
   clone,
 } from "../utils.js";
+import { execSync } from "child_process";
 import { getPlaceholders } from "../config.js";
 
+async function initGit({ dir }) {
+  execSync(`yes | git -C ${dir} init`);
+}
+
 async function chooseAndCloneBox({ projectName }) {
+  // if the user has already chosen a project name, we should skip the input
+  // and use the one they've chosen
+  const skipName = projectName || undefined;
+
   const availableBoxes = await getAvailableBoxes();
   if (!projectName) {
     projectName = await select({
@@ -32,9 +41,11 @@ async function chooseAndCloneBox({ projectName }) {
     type: "box",
     tag,
     version,
-    name: projectName,
+    name: skipName,
   });
 
+  await initGit({ dir: rootDir });
+
   await replacePaths({
     rootDir,
     tag,
@@ -46,7 +57,10 @@ async function chooseAndCloneBox({ projectName }) {
 
 async function chooseAndCloneContract({ projectName }) {
   const availableContracts = await getAvailableContracts();
-  // let user choose one of the contracts in noir-projects
+
+  // if the user has already chosen a project name, we should skip the input
+  // and use the one they've chosen
+  const skipName = projectName || undefined;
 
   if (!projectName) {
     projectName = await select({
@@ -70,9 +84,11 @@ async function chooseAndCloneContract({ projectName }) {
     type: "contract",
     tag,
     version,
-    name: projectName,
+    name: skipName,
   });
 
+  await initGit({ dir: rootDir });
+
   await replacePaths({
     rootDir,
     tag,

boxes/bin.js

@@ -1,48 +1,14 @@
 import confirm from "@inquirer/confirm";
 import { execSync } from "child_process";
-import pty from "node-pty";
-import { updatePathEnvVar } from "../../utils.js";
 
-const runPty = async (command, { success: exitSuccess, error }) => {
-  try {
-    const ptySession = new Promise((resolve, reject) => {
-      const ptyProcess = pty.spawn("bash", [], {
-        name: "xterm-color",
-        cols: 80,
-        rows: 30,
-        cwd: process.cwd(),
-        env: process.env,
-      });
-
-      ptyProcess.on("data", function (data) {
-        process.stdout.write(data);
-      });
-
-      ptyProcess.write(command);
-
-      ptyProcess.on("exit", async function (exitCode, signal) {
-        await updatePathEnvVar();
-        resolve();
-        if (exitCode === 0) {
-          success(exitSuccess);
-        } else {
-          error(e);
-        }
-      });
-    });
-
-    await ptySession;
-  } catch (e) {
-    error(e);
-  }
-};
+export async function install() {
+  execSync(
+    "curl -s install.aztec.network | NON_INTERACTIVE=1 BIN_PATH=$HOME/.aztec/bin bash -s",
+  );
+}
 
-async function installSandbox() {
-  await runPty("yes | bash -i <(curl -s install.aztec.network); exit\n", {
-    success: "The Sandbox is installed!",
-    error:
-      "Failed to install the Sandbox. Please visit the docs at https://docs.aztec.network",
-  });
+export async function update() {
+  execSync("$HOME/.aztec/bin/aztec-up", { stdio: "inherit" });
 }
 
 function findOutUserVersion() {
@@ -106,7 +72,7 @@ export async function sandboxInstallOrUpdate() {
       default: true,
     });
     if (answer) {
-      await installSandbox();
+      await install();
     }
   } else if (
     // Another situation is where the sandbox matches the stable version (i.e. 0.24.0) or master
@@ -141,7 +107,7 @@ export async function sandboxInstallOrUpdate() {
 
     if (answer) {
       // again abusing the fact that the user has VERSION in the path
-      execSync(`$HOME/.aztec/bin/aztec-up`, { stdio: "inherit" });
+      update();
     }
   }
 }