Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: update NoirJS tutorial #4861

Merged
merged 4 commits into from
Apr 22, 2024
Merged

chore: update NoirJS tutorial #4861

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e3782c6
fix noir js tutorials
shak58 Apr 21, 2024
0a5816c
simplify vite config
shak58 Apr 21, 2024
6b22621
add vite.config.js to file structure
shak58 Apr 21, 2024
1f38b0f
Merge branch 'master' into issues_with_noir_js_tutorial
shak58 Apr 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 68 additions & 21 deletions docs/docs/tutorials/noirjs_app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ 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.19.x matches `noir_js@0.19.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.27.x matches `noir_js@0.27.x`, etc.

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

:::

Expand All @@ -34,21 +34,21 @@ Easy enough. Onwards!

## Our project

ZK is a powerful technology. An app that doesn't reveal one of the inputs to *anyone* is almost unbelievable, yet Noir makes it as easy as a single line of code.
ZK is a powerful technology. An app that doesn't reveal one of the inputs to _anyone_ is almost unbelievable, yet Noir makes it as easy as a single line of code.

In fact, it's so simple that it comes nicely packaged in `nargo`. Let's do that!

### Nargo

Run:

```nargo new circuit```
`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```
`nargo compile`

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

Expand Down Expand Up @@ -77,10 +77,55 @@ Vite is a powerful tool to generate static websites. While it provides all kinds

To do this this, go back to the previous folder (`cd ..`) and create a new vite project by running `npm create vite` and choosing "Vanilla" and "Javascript".

You should see `vite-project` appear in your root folder. This seems like a good time to `cd` into it and install our NoirJS packages:
A wild `vite-project` directory should now appear in your root folder! Let's not waste any time and dive right in:

```bash
npm i @noir-lang/backend_barretenberg@0.19.4 @noir-lang/noir_js@0.19.4
cd vite-project
```

### Setting Up Vite and Configuring the Project

Before we proceed with any coding, let's get our environment tailored for Noir. We'll start by laying down the foundations with a `vite.config.js` file. This little piece of configuration is our secret sauce for making sure everything meshes well with the NoirJS libraries and other special setups we might need, like handling WebAssembly modules. Here’s how you get that going:

#### Creating the vite.config.js

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",
},
},
plugins: [
copy({
targets: [
{ src: "node_modules/**/*.wasm", dest: "node_modules/.vite/dist" },
],
copySync: true,
hook: "buildStart",
}),
],
server: {
port: 3000,
},
});
```

#### Install Dependencies

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 rollup-plugin-copy --save-dev
```

:::info
Expand All @@ -99,7 +144,7 @@ At this point in the tutorial, your folder structure should look like this:

#### Some cleanup

`npx create vite` is amazing but it creates a bunch of files we don't really need for our simple example. Actually, let's just delete everything except for `index.html`, `main.js` and `package.json`. I feel lighter already.
`npx create vite` is amazing but it creates a bunch of files we don't really need for our simple example. Actually, let's just delete everything except for `vite.config.js`, `index.html`, `main.js` and `package.json`. I feel lighter already.

![my heart is ready for you, noir.js](@site/static/img/memes/titanic.jpeg)

Expand Down Expand Up @@ -139,7 +184,7 @@ Our app won't run like this, of course. We need some working HTML, at least. Let
</html>
```

It *could* be a beautiful UI... Depending on which universe you live in.
It _could_ be a beautiful UI... Depending on which universe you live in.

## Some good old vanilla Javascript

Expand All @@ -150,14 +195,14 @@ 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/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()),
),
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);
Expand All @@ -169,11 +214,10 @@ function display(container, msg) {
document.getElementById('submitGuess').addEventListener('click', async () => {
try {
// here's where love happens
} catch(err) {
display("logs", "Oh 💔 Wrong guess")
} catch (err) {
display('logs', 'Oh 💔 Wrong guess');
}
});

```

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 😢
Expand All @@ -189,6 +233,7 @@ At this point in the tutorial, your folder structure should look like this:
└── circuit
└── ...same as above
└── vite-project
├── vite.config.js
├── main.js
├── package.json
└── index.html
Expand All @@ -209,7 +254,7 @@ import circuit from '../circuit/target/circuit.json';
[Noir is backend-agnostic](../index.mdx#whats-new-about-noir). We write Noir, but we also need a proving backend. That's why we need to import and instantiate the two dependencies we installed above: `BarretenbergBackend` and `Noir`. Let's import them right below:

```js
import { BarretenbergBackend } from '@noir-lang/backend_barretenberg';
import { BarretenbergBackend, BarretenbergVerifier as Verifier } from '@noir-lang/backend_barretenberg';
import { Noir } from '@noir-lang/noir_js';
```

Expand Down Expand Up @@ -264,8 +309,10 @@ Time to celebrate, yes! But we shouldn't trust machines so blindly. Let's add th

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

You have successfully generated a client-side Noir web app!
Expand Down
81 changes: 63 additions & 18 deletions docs/versioned_docs/version-v0.25.0/tutorials/noirjs_app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ 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.19.x matches `noir_js@0.19.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.25.x matches `noir_js@0.25.x`, etc.

In this guide, we will be pinned to 0.19.4.
In this guide, we will be pinned to 0.25.0.

:::

Expand All @@ -34,21 +34,21 @@ Easy enough. Onwards!

## Our project

ZK is a powerful technology. An app that doesn't reveal one of the inputs to *anyone* is almost unbelievable, yet Noir makes it as easy as a single line of code.
ZK is a powerful technology. An app that doesn't reveal one of the inputs to _anyone_ is almost unbelievable, yet Noir makes it as easy as a single line of code.

In fact, it's so simple that it comes nicely packaged in `nargo`. Let's do that!

### Nargo

Run:

```nargo new circuit```
`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```
`nargo compile`

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

Expand Down Expand Up @@ -77,10 +77,55 @@ Vite is a powerful tool to generate static websites. While it provides all kinds

To do this this, go back to the previous folder (`cd ..`) and create a new vite project by running `npm create vite` and choosing "Vanilla" and "Javascript".

You should see `vite-project` appear in your root folder. This seems like a good time to `cd` into it and install our NoirJS packages:
A wild `vite-project` directory should now appear in your root folder! Let's not waste any time and dive right in:

```bash
npm i @noir-lang/backend_barretenberg@0.19.4 @noir-lang/noir_js@0.19.4
cd vite-project
```

### Setting Up Vite and Configuring the Project

Before we proceed with any coding, let's get our environment tailored for Noir. We'll start by laying down the foundations with a `vite.config.js` file. This little piece of configuration is our secret sauce for making sure everything meshes well with the NoirJS libraries and other special setups we might need, like handling WebAssembly modules. Here’s how you get that going:

#### Creating the vite.config.js

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",
},
},
plugins: [
copy({
targets: [
{ src: "node_modules/**/*.wasm", dest: "node_modules/.vite/dist" },
],
copySync: true,
hook: "buildStart",
}),
],
server: {
port: 3000,
},
});
```

#### Install Dependencies

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.25.0 @noir-lang/noir_js@0.25.0
npm install rollup-plugin-copy --save-dev
```

:::info
Expand All @@ -99,7 +144,7 @@ At this point in the tutorial, your folder structure should look like this:

#### Some cleanup

`npx create vite` is amazing but it creates a bunch of files we don't really need for our simple example. Actually, let's just delete everything except for `index.html`, `main.js` and `package.json`. I feel lighter already.
`npx create vite` is amazing but it creates a bunch of files we don't really need for our simple example. Actually, let's just delete everything except for `vite.config.js`, `index.html`, `main.js` and `package.json`. I feel lighter already.

![my heart is ready for you, noir.js](@site/static/img/memes/titanic.jpeg)

Expand Down Expand Up @@ -139,7 +184,7 @@ Our app won't run like this, of course. We need some working HTML, at least. Let
</html>
```

It *could* be a beautiful UI... Depending on which universe you live in.
It _could_ be a beautiful UI... Depending on which universe you live in.

## Some good old vanilla Javascript

Expand All @@ -150,14 +195,14 @@ 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/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()),
),
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);
Expand All @@ -169,11 +214,10 @@ function display(container, msg) {
document.getElementById('submitGuess').addEventListener('click', async () => {
try {
// here's where love happens
} catch(err) {
display("logs", "Oh 💔 Wrong guess")
} catch (err) {
display('logs', 'Oh 💔 Wrong guess');
}
});

```

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 😢
Expand All @@ -189,6 +233,7 @@ At this point in the tutorial, your folder structure should look like this:
└── circuit
└── ...same as above
└── vite-project
└── vite.config.js
├── main.js
├── package.json
└── index.html
Expand Down
Loading
Loading