Skip to content

Commit

Permalink
chore(docs): Update web app page to use nargo v 0.31 (#5652)
Browse files Browse the repository at this point in the history 
# Description

Update the tiny web app tutorial to use noir v0.31.0.

## Problem\*

Resolves noir-lang/tiny-noirjs-app#6

## Summary\*



## Additional Context

[This PR](noir-lang/tiny-noirjs-app#7) should be
merged after merging this one.


## Documentation\*

Check one:
- [ ] No documentation needed.
- [x] Documentation included in this PR.
- [ ] **[For Experimental Features]** Documentation to be submitted in a
separate PR.

# PR Checklist\*

- [x] I have tested the changes locally.
- [ ] I have formatted the changes with [Prettier](https://prettier.io/)
and/or `cargo fmt` on default settings.

---------

Co-authored-by: Savio <72797635+Savio-Sou@users.noreply.github.com>
  • Loading branch information
@critesjosh @Savio-Sou
critesjosh and Savio-Sou authored Aug 1, 2024
1 parent 0503956 commit 0892eed
Show file tree
Hide file tree
Showing 3 changed files with 195 additions and 132 deletions.
109 changes: 65 additions & 44 deletions docs/docs/tutorials/noirjs_app.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ You can find the complete app code for this guide [here](https://github.com/noir

:::note

Feel free to use whatever versions, just keep in mind that Nargo and the NoirJS packages are meant to be in sync. For example, Nargo 0.27.x matches `noir_js@0.27.x`, etc.
Feel free to use whatever versions, just keep in mind that Nargo and the NoirJS packages are meant to be in sync. For example, Nargo 0.31.x matches `noir_js@0.31.x`, etc.

In this guide, we will be pinned to 0.27.0.
In this guide, we will be pinned to 0.31.0.

:::

Before we start, we want to make sure we have Node and Nargo installed.
Before we start, we want to make sure we have Node, Nargo and the Barretenberg proving system (`bb`) installed.

We start by opening a terminal and executing `node --version`. If we don't get an output like `v20.10.0`, that means node is not installed. Let's do that by following the handy [nvm guide](https://github.com/nvm-sh/nvm?tab=readme-ov-file#install--update-script).

Expand All @@ -30,6 +30,9 @@ As for `Nargo`, we can follow the [Nargo guide](../getting_started/installation/
curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash
```

Follow the instructions on [this page](https://github.com/AztecProtocol/aztec-packages/tree/master/barretenberg/cpp/src/barretenberg/bb#installation) to install `bb`.
Version 0.41.0 is compatible with `nargo` version 0.31.0, which you can install with `bbup -v 0.41.0` once `bbup` is installed.

Easy enough. Onwards!

## Our project
Expand All @@ -42,13 +45,17 @@ In fact, it's so simple that it comes nicely packaged in `nargo`. Let's do that!

Run:

`nargo new circuit`
```bash
nargo new circuit
```

And... That's about it. Your program is ready to be compiled and run.

To compile, let's `cd` into the `circuit` folder to enter our project, and call:

`nargo compile`
```bash
nargo compile
```

This compiles our circuit into `json` format and add it to a new `target` folder.

Expand Down Expand Up @@ -92,30 +99,53 @@ Before we proceed with any coding, let's get our environment tailored for Noir.
In your freshly minted `vite-project` folder, create a new file named `vite.config.js` and open it in your code editor. Paste the following to set the stage:

```javascript
import { defineConfig } from "vite";
import copy from "rollup-plugin-copy";

export default defineConfig({
esbuild: {
target: "esnext",
},
optimizeDeps: {
esbuildOptions: {
target: "esnext",
},
import { defineConfig } from 'vite';
import copy from 'rollup-plugin-copy';
import fs from 'fs';
import path from 'path';

const wasmContentTypePlugin = {
name: 'wasm-content-type-plugin',
configureServer(server) {
server.middlewares.use(async (req, res, next) => {
if (req.url.endsWith('.wasm')) {
res.setHeader('Content-Type', 'application/wasm');
const newPath = req.url.replace('deps', 'dist');
const targetPath = path.join(__dirname, newPath);
const wasmContent = fs.readFileSync(targetPath);
return res.end(wasmContent);
}
next();
});
},
plugins: [
copy({
targets: [
{ src: "node_modules/**/*.wasm", dest: "node_modules/.vite/dist" },
};

export default defineConfig(({ command }) => {
if (command === 'serve') {
return {
build: {
target: 'esnext',
rollupOptions: {
external: ['@aztec/bb.js']
}
},
optimizeDeps: {
esbuildOptions: {
target: 'esnext'
}
},
plugins: [
copy({
targets: [{ src: 'node_modules/**/*.wasm', dest: 'node_modules/.vite/dist' }],
copySync: true,
hook: 'buildStart',
}),
command === 'serve' ? wasmContentTypePlugin : [],
],
copySync: true,
hook: "buildStart",
}),
],
server: {
port: 3000,
},
};
}

return {};
});
```

Expand All @@ -124,7 +154,7 @@ export default defineConfig({
Now that our stage is set, install the necessary NoirJS packages along with our other dependencies:

```bash
npm install && npm install @noir-lang/backend_barretenberg@0.27.0 @noir-lang/noir_js@0.27.0
npm install && npm install @noir-lang/backend_barretenberg@0.31.0 @noir-lang/noir_js@0.31.0
npm install rollup-plugin-copy --save-dev
```

Expand Down Expand Up @@ -193,17 +223,6 @@ Our love for Noir needs undivided attention, so let's just open `main.js` and de
Start by pasting in this boilerplate code:

```js
const setup = async () => {
await Promise.all([
import('@noir-lang/noirc_abi').then((module) =>
module.default(new URL('@noir-lang/noirc_abi/web/noirc_abi_wasm_bg.wasm', import.meta.url).toString()),
),
import('@noir-lang/acvm_js').then((module) =>
module.default(new URL('@noir-lang/acvm_js/web/acvm_js_bg.wasm', import.meta.url).toString()),
),
]);
};

function display(container, msg) {
const c = document.getElementById(container);
const p = document.createElement('p');
Expand All @@ -222,8 +241,6 @@ document.getElementById('submitGuess').addEventListener('click', async () => {

The display function doesn't do much. We're simply manipulating our website to see stuff happening. For example, if the proof fails, it will simply log a broken heart 😢

As for the `setup` function, it's just a sad reminder that dealing with `wasm` on the browser is not as easy as it should. Just copy, paste, and forget.
:::info

At this point in the tutorial, your folder structure should look like this:
Expand Down Expand Up @@ -310,9 +327,13 @@ Time to celebrate, yes! But we shouldn't trust machines so blindly. Let's add th

```js
display('logs', 'Verifying proof... ⌛');
const verificationKey = await backend.getVerificationKey();
const verifier = new Verifier();
const isValid = await verifier.verifyProof(proof, verificationKey);
const isValid = await backend.verifyProof(proof);

// or to cache and use the verification key:
// const verificationKey = await backend.getVerificationKey();
// const verifier = new Verifier();
// const isValid = await verifier.verifyProof(proof, verificationKey);

if (isValid) display('logs', 'Verifying proof... ✅');
```

Expand Down
109 changes: 65 additions & 44 deletions docs/versioned_docs/version-v0.31.0/tutorials/noirjs_app.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ You can find the complete app code for this guide [here](https://github.com/noir

:::note

Feel free to use whatever versions, just keep in mind that Nargo and the NoirJS packages are meant to be in sync. For example, Nargo 0.27.x matches `noir_js@0.27.x`, etc.
Feel free to use whatever versions, just keep in mind that Nargo and the NoirJS packages are meant to be in sync. For example, Nargo 0.31.x matches `noir_js@0.31.x`, etc.

In this guide, we will be pinned to 0.27.0.
In this guide, we will be pinned to 0.31.0.

:::

Before we start, we want to make sure we have Node and Nargo installed.
Before we start, we want to make sure we have Node, Nargo and the Barretenberg proving system (`bb`) installed.

We start by opening a terminal and executing `node --version`. If we don't get an output like `v20.10.0`, that means node is not installed. Let's do that by following the handy [nvm guide](https://github.com/nvm-sh/nvm?tab=readme-ov-file#install--update-script).

Expand All @@ -30,6 +30,9 @@ As for `Nargo`, we can follow the [Nargo guide](../getting_started/installation/
curl -L https://raw.githubusercontent.com/noir-lang/noirup/main/install | bash
```

Follow the instructions on [this page](https://github.com/AztecProtocol/aztec-packages/tree/master/barretenberg/cpp/src/barretenberg/bb#installation) to install `bb`.
Version 0.41.0 is compatible with `nargo` version 0.31.0, which you can install with `bbup -v 0.41.0` once `bbup` is installed.

Easy enough. Onwards!

## Our project
Expand All @@ -42,13 +45,17 @@ In fact, it's so simple that it comes nicely packaged in `nargo`. Let's do that!

Run:

`nargo new circuit`
```bash
nargo new circuit
```

And... That's about it. Your program is ready to be compiled and run.

To compile, let's `cd` into the `circuit` folder to enter our project, and call:

`nargo compile`
```bash
nargo compile
```

This compiles our circuit into `json` format and add it to a new `target` folder.

Expand Down Expand Up @@ -92,30 +99,53 @@ Before we proceed with any coding, let's get our environment tailored for Noir.
In your freshly minted `vite-project` folder, create a new file named `vite.config.js` and open it in your code editor. Paste the following to set the stage:

```javascript
import { defineConfig } from "vite";
import copy from "rollup-plugin-copy";

export default defineConfig({
esbuild: {
target: "esnext",
},
optimizeDeps: {
esbuildOptions: {
target: "esnext",
},
import { defineConfig } from 'vite';
import copy from 'rollup-plugin-copy';
import fs from 'fs';
import path from 'path';

const wasmContentTypePlugin = {
name: 'wasm-content-type-plugin',
configureServer(server) {
server.middlewares.use(async (req, res, next) => {
if (req.url.endsWith('.wasm')) {
res.setHeader('Content-Type', 'application/wasm');
const newPath = req.url.replace('deps', 'dist');
const targetPath = path.join(__dirname, newPath);
const wasmContent = fs.readFileSync(targetPath);
return res.end(wasmContent);
}
next();
});
},
plugins: [
copy({
targets: [
{ src: "node_modules/**/*.wasm", dest: "node_modules/.vite/dist" },
};

export default defineConfig(({ command }) => {
if (command === 'serve') {
return {
build: {
target: 'esnext',
rollupOptions: {
external: ['@aztec/bb.js']
}
},
optimizeDeps: {
esbuildOptions: {
target: 'esnext'
}
},
plugins: [
copy({
targets: [{ src: 'node_modules/**/*.wasm', dest: 'node_modules/.vite/dist' }],
copySync: true,
hook: 'buildStart',
}),
command === 'serve' ? wasmContentTypePlugin : [],
],
copySync: true,
hook: "buildStart",
}),
],
server: {
port: 3000,
},
};
}

return {};
});
```

Expand All @@ -124,7 +154,7 @@ export default defineConfig({
Now that our stage is set, install the necessary NoirJS packages along with our other dependencies:

```bash
npm install && npm install @noir-lang/backend_barretenberg@0.27.0 @noir-lang/noir_js@0.27.0
npm install && npm install @noir-lang/backend_barretenberg@0.31.0 @noir-lang/noir_js@0.31.0
npm install rollup-plugin-copy --save-dev
```

Expand Down Expand Up @@ -193,17 +223,6 @@ Our love for Noir needs undivided attention, so let's just open `main.js` and de
Start by pasting in this boilerplate code:

```js
const setup = async () => {
await Promise.all([
import('@noir-lang/noirc_abi').then((module) =>
module.default(new URL('@noir-lang/noirc_abi/web/noirc_abi_wasm_bg.wasm', import.meta.url).toString()),
),
import('@noir-lang/acvm_js').then((module) =>
module.default(new URL('@noir-lang/acvm_js/web/acvm_js_bg.wasm', import.meta.url).toString()),
),
]);
};

function display(container, msg) {
const c = document.getElementById(container);
const p = document.createElement('p');
Expand All @@ -222,8 +241,6 @@ document.getElementById('submitGuess').addEventListener('click', async () => {

The display function doesn't do much. We're simply manipulating our website to see stuff happening. For example, if the proof fails, it will simply log a broken heart 😢

As for the `setup` function, it's just a sad reminder that dealing with `wasm` on the browser is not as easy as it should. Just copy, paste, and forget.
:::info

At this point in the tutorial, your folder structure should look like this:
Expand Down Expand Up @@ -310,9 +327,13 @@ Time to celebrate, yes! But we shouldn't trust machines so blindly. Let's add th

```js
display('logs', 'Verifying proof... ⌛');
const verificationKey = await backend.getVerificationKey();
const verifier = new Verifier();
const isValid = await verifier.verifyProof(proof, verificationKey);
const isValid = await backend.verifyProof(proof);

// or to cache and use the verification key:
// const verificationKey = await backend.getVerificationKey();
// const verifier = new Verifier();
// const isValid = await verifier.verifyProof(proof, verificationKey);

if (isValid) display('logs', 'Verifying proof... ✅');
```

Expand Down
Loading

0 comments on commit 0892eed

Please sign in to comment.