Skip to content

Commit

Permalink
chore(docs): update box readme, remove duplicated features, added box…
Browse files Browse the repository at this point in the history
… install to the docs (#8254)

### TL;DR (AI generated)

Simplified the Aztec app creation process by removing sandbox-related
functionality and updating documentation.

### What changed?

- Removed sandbox installation, update, and run steps from the
`aztec-app` command.
- Updated README files and documentation to reflect the removal of
sandbox-related features.
- Changed the command from `npx create-aztec-app` to `npx aztec-app`
throughout the project.
- Removed sandbox-related scripts and dependencies.
- Updated the onCreateCommand script in the devcontainer configuration.

### How to test?

1. Run `npx aztec-app` and verify that it only prompts for project
options without mentioning sandbox installation.
2. Check that the README files in various boxes (react, vanilla,
contract-only) no longer mention sandbox installation or management.
3. Verify that the devcontainer script uses the new `npx aztec-app`
command.

### Why make this change?

This change simplifies the Aztec app creation process by focusing solely
on project setup and removing the complexity of sandbox management. It
allows users to handle sandbox installation and management separately,
providing a more streamlined experience for creating Aztec projects.
  • Loading branch information
signorecello authored Sep 9, 2024
1 parent c4dbcab commit b747ac1
Show file tree
Hide file tree
Showing 18 changed files with 1,688 additions and 980 deletions.
4 changes: 2 additions & 2 deletions .devcontainer/scripts/onCreateCommand.sh
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@ corepack enable

if [ "$TYPE" != "sandbox_only" ]; then
source ~/.bashrc
yes | npx create-aztec-app -t $TYPE -n $NAME -s
yes | npx aztec-app -t $TYPE -n $NAME -s
mv $NAME/* $NAME/.* .
rm -rf $NAME

yarn

npx -y playwright install --with-deps
Expand Down
8 changes: 8 additions & 0 deletions boxes/Earthfile
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,14 @@ boxes:
RUN yarn install-browsers
ENTRYPOINT ["/bin/sh", "-c"]

npx:
FROM ../build-images/+base-slim-node
COPY --dir +build/usr/src /usr
WORKDIR /usr/src/boxes

RUN yarn
RUN yarn test:ci

BOX_TEST_LOCAL:
FUNCTION
ARG box
Expand Down
11 changes: 5 additions & 6 deletions boxes/README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
# Aztec-App

Aztec-App is a set of tools to ease development on Aztec. It consists of two main components:

1. `npx` script
2. boxes (starter kits)

## npx script

NPX is a tool bundled with `npm` and other package managers. It allows you to run a binary from a cache without installing it globally.
Expand All @@ -13,9 +15,9 @@ To ease the development process, Aztec has developed this binary. To run it, ins
npx aztec-app
```

This will prompt you with some options to clone `Aztec Boxes` and install the sandbox. As the `npx` script evolves, other commands will be added or removed. You can run it with the `-h` flag to know what other commands and flags you can pass to it.
This will prompt you with some options to clone `Aztec Boxes`. As the `npx` script evolves, other commands will be added or removed. You can run it with the `-h` flag to know what other commands and flags you can pass to it.

> [!NOTE]
> [!NOTE]
> As a tool that doesn't (yet) have automated testing, it versioning and release process is decoupled from `aztec`, and its deployment is entirely manual by running `yarn npm publish --access public`.
## Aztec Boxes
Expand All @@ -26,7 +28,7 @@ Aztec Boxes are the one-stop-shop for developing on Aztec. They often include a
- Frontend boilerplates
- General tests

Boxes include the sandbox installation script and its start command. By choosing the appropriate box, you can get started working on Aztec in a minimal amount of time.
By choosing the appropriate box, you can get started working on Aztec in a minimal amount of time.

## Contributing

Expand All @@ -37,9 +39,6 @@ Most of the logic is in the `bin.js` file, where `commander` commands stuff. The
- Prompts the user for options and commands
- Inits some global variables such as a logger, a getter for the github repositories, the latest stable versions and tags, etc
- Prompts the user to choose the project and clone it. It then rewrites the `Nargo.toml` and `package.json` files to point to the repos instead of the local dependencies.
- Queries the local docker daemon for any existing sandbox images, prompting the user to install or update it if needed
- Asks the user if they want to run the sandbox right away


## Templates

Expand Down
22 changes: 5 additions & 17 deletions boxes/bin.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,16 @@
import { Command } from "commander";
const program = new Command();
import { chooseProject } from "./scripts/steps/chooseBox.js";
import { 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 { sandboxRunStep } from "./scripts/steps/sandbox/run.js";
import { init } from "./scripts/init.js";

const getLatestStable = async () => {
const { data } = await axios.get(
`https://api.github.com/repos/AztecProtocol/aztec-packages/releases`,
`https://api.github.com/repos/AztecProtocol/aztec-packages/releases`
);
return data[0].tag_name.split("-v")[1];
};
Expand Down Expand Up @@ -45,7 +43,7 @@ program
},
level: debug ? "debug" : "info",
},
prettyStream,
prettyStream
);

global.debug = (msg) => logger.debug(msg);
Expand Down Expand Up @@ -100,17 +98,13 @@ program
program
.command("new", { isDefault: true })
.description("An Aztec project with a built-in development network")
.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')",
"the type of the project to clone ('app' or 'contract')"
)
.option(
"-n, --project-name <projectName>",
"the name of the project to clone",
"the name of the project to clone"
)
.action(async (options) => {
// this is some bad code, but it's def fun
Expand All @@ -121,16 +115,10 @@ program
throw Error("You must define both the project type and the project name");
}

const { projectType, projectName, skipSandbox } = options;
const { projectType, projectName } = 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 });
});

program.parse();
91 changes: 91 additions & 0 deletions boxes/bin.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import { parse } from "@iarna/toml";
import axios from "axios";
import { execSync } from "child_process";
import fs from "fs/promises";
import path from "path";
import { describe, test, expect, beforeAll } from "vitest";

const getLatestStable = async () => {
try {
const { data } = await axios.get(
`https://api.github.com/repos/AztecProtocol/aztec-packages/releases`,
);
return data[0].tag_name.split("-v")[1];
} catch (error) {
console.error("Error fetching latest stable version:", error);
return;
}
};

const version = await getLatestStable();
const tag = version.match(/^\d+\.\d+\.\d+$/)
? `aztec-packages-v${version}`
: version;

describe("Token contract", () => {
beforeAll(() => {
try {
execSync("npx . new -d -t contract -n token_contract", {
stdio: "inherit",
});
} catch (error) {
console.error("Error executing command:", error);
}
});

test("Paths were updated correctly", async () => {
const replaces = [];
const findAndReplace = async (dir, prefix) => {
const files = await fs.readdir(dir, {
withFileTypes: true,
});
files.forEach(async (file) => {
const filePath = path.join(dir, file.name);
if (file.isDirectory()) {
findAndReplace(filePath, prefix); // Recursively search subdirectories
} else if (file.name === "Nargo.toml") {
replaces.push(
new Promise(async (resolve, reject) => {
let content = parse(await fs.readFile(filePath, "utf8"));
if (!content.dependencies) return;
resolve(
Object.keys(content.dependencies)
.filter((dep) => dep.match("@aztec"))
.every(
(dep) =>
content.dependencies[dep] ===
JSON.stringify({
git: `https://github.com/${AZTEC_REPO}/`,
tag,
directory: `${prefix}${directory}`,
}),
),
);
}),
);
} else if (file.name === "package.json") {
replaces.push(
new Promise(async (resolve, reject) => {
let content = JSON.parse(await fs.readFile(filePath, "utf8"));
if (!content.dependencies) return;
resolve(
Object.keys(content.dependencies)
.filter((deps) => deps.match("@aztec"))
// "master" actually means "latest" for the npm release
.every(
(dep) =>
content.dependencies[dep] ===
`${version === "master" ? "latest" : `^${version}`}`,
),
);
}),
);
}
});
};

await findAndReplace(path.resolve("./token_contract"), "");
const res = await Promise.all(replaces);
expect(res).toEqual([true, true]);
});
});
8 changes: 1 addition & 7 deletions boxes/boxes/react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,7 @@ The above method just uses the `npx` command, AKA "unboxing the box". This is a
Just open a terminal and write:

```bash
npx create-aztec-app
```

It should ask you some questions about your project, install and run the Sandbox (local developer network). You can also start, stop, update, and do other things on the sandbox through this script. Just run:

```bash
npx create-aztec-app sandbox --help
npx aztec-app
```

## More information
Expand Down
3 changes: 2 additions & 1 deletion boxes/boxes/react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,14 @@
"yup": "^1.2.0"
},
"devDependencies": {
"@playwright/test": "1.42.0",
"@playwright/test": "1.46.1",
"@types/jest": "^29.5.0",
"@types/node": "^20.5.9",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"assert": "^2.1.0",
"autoprefixer": "^10.4.15",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.8.1",
Expand Down
1 change: 1 addition & 0 deletions boxes/boxes/react/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export default (_, argv) => ({
resolve: {
extensions: ['.tsx', '.ts', '.js'],
fallback: {
assert: require.resolve('assert/'),
crypto: false,
os: false,
fs: false,
Expand Down
9 changes: 1 addition & 8 deletions boxes/boxes/vanilla/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

This box is a one-stop-shop for Aztec that will deploy a minimal barebones HTML+JS page. You can use it as a boilerplate to start developing your own Aztec app in seconds!


## Getting Started

The easiest way to start is with a Github Codespaces, which has a generous free tier. Just click on this button:
Expand All @@ -23,13 +22,7 @@ The above method just uses the `npx` command, AKA "unboxing the box". This is a
Just open a terminal and write:

```bash
npx create-aztec-app
```

It should ask you some questions about your project, install and run the Sandbox (local developer network). You can also start, stop, update, and do other things on the sandbox through this script. Just run:

```bash
npx create-aztec-app sandbox --help
npx aztec-app
```

## More information
Expand Down
3 changes: 2 additions & 1 deletion boxes/boxes/vanilla/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,9 @@
"@aztec/builder": "latest"
},
"devDependencies": {
"@playwright/test": "1.42.0",
"@playwright/test": "1.46.1",
"@types/node": "^20.11.17",
"assert": "^2.1.0",
"copy-webpack-plugin": "^11.0.0",
"html-webpack-plugin": "^5.6.0",
"stream-browserify": "^3.0.0",
Expand Down
1 change: 1 addition & 0 deletions boxes/boxes/vanilla/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export default (_, argv) => ({
resolve: {
extensions: ['.tsx', '.ts', '.js'],
fallback: {
assert: require.resolve('assert/'),
crypto: false,
os: false,
fs: false,
Expand Down
1 change: 0 additions & 1 deletion boxes/init/.yarnrc.yml

This file was deleted.

9 changes: 0 additions & 9 deletions boxes/init/package.json

This file was deleted.

11 changes: 7 additions & 4 deletions boxes/package.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
{
"name": "aztec-app",
"packageManager": "yarn@4.0.2",
"version": "0.4.9",
"version": "0.5.0",
"type": "module",
"scripts": {
"compile": "yarn workspaces foreach -A -v run compile",
"build": "yarn workspaces foreach -A -v run build",
"install-browsers": "playwright install --with-deps",
"publish": "yarn npm publish"
"publish": "yarn npm publish",
"test": "vitest bin.test.js",
"test:ci": "vitest run bin.test.js"
},
"workspaces": [
"boxes/*"
Expand Down Expand Up @@ -35,9 +37,10 @@
"ora": "^8.0.1",
"pino": "^8.19.0",
"pino-pretty": "^10.3.1",
"tiged": "^2.12.6"
"tiged": "^2.12.6",
"vitest": "^2.0.5"
},
"devDependencies": {
"@playwright/test": "1.42.0"
"@playwright/test": "1.46.1"
}
}
Loading

0 comments on commit b747ac1

Please sign in to comment.