chore(docs): patch web app tutorial in 1.0.0-beta3 versioned docs (#8158)

Author: saleel

docs/versioned_docs/version-v1.0.0-beta.3/tutorials/noirjs_app.md

@@ -14,23 +14,20 @@ You can find the complete app code for this guide [here](https://github.com/noir
 
 ## Dependencies
 
-Before we start, we want to make sure we have Node installed. For convenience (and speed), we can just install [Bun](https://bun.sh) as our package manager, and Node will work out-of-the-box:
+Before we start, we want to make sure we have Node installed. If you don't have it already you can install it [here](https://nodejs.org/en/download), we recommend using [Yarn](https://yarnpkg.com/getting-started/install) as our package manager for this tutorial.
 
-```bash
-curl -fsSL https://bun.sh/install | bash
-```
+We'll also need version 1.0.0-beta.2 nargo installed, see the Noir [installation guide](../getting_started/noir_installation.md) for details.
 
 Let's go barebones. Doing the bare minimum is not only simple, but also allows you to easily adapt it to almost any frontend framework.
 
 Barebones means we can immediately start with the dependencies even on an empty folder 😈:
 
 ```bash
-bun i @noir-lang/noir_wasm@1.0.0-beta.2 @noir-lang/noir_js@1.0.0-beta.2 @aztec/bb.js@0.72.1
+yarn add @noir-lang/noir_js@1.0.0-beta.2 @aztec/bb.js@0.72.1
 ```
 
 Wait, what are these dependencies?
 
-- `noir_wasm` is the `wasm` version of the Noir compiler. Although most developers prefer to use `nargo` for compiling, there's nothing wrong with `noir_wasm`. We like `noir_wasm`.
 - `noir_js` is the main Noir package. It will execute our program, and generate the witness that will be sent to the backend.
 - `bb.js` is the Typescript interface for Aztec's Barretenberg proving backend. It also uses the `wasm` version in order to run on the browser.
 
@@ -77,6 +74,20 @@ This is all that we need to get started with Noir.
 
 ![my heart is ready for you, noir.js](@site/static/img/memes/titanic.jpeg)
 
+## Compile compile compile
+
+Finally we're up for something cool. But before we can execute a Noir program, we need to compile it into ACIR: an abstract representation.
+
+This can be done by cd-ing into our circuit directory and running the `nargo compile` command.
+
+```bash
+cd circuits
+
+nargo compile
+```
+
+This will write the compiled circuit into the `target` directory, which we'll then load into our JS later on.
+
 ## Setting up our app
 
 Remember when apps only had one `html` and one `js` file? Well, that's enough for Noir webapps. Let's create them:
@@ -158,72 +169,25 @@ At this point in the tutorial, your folder structure should look like this:
 
 :::
 
-## Compile compile compile
-
-Finally we're up for something cool. But before we can execute a Noir program, we need to compile it into ACIR: an abstract representation. Here's where `noir_wasm` comes in.
-
-`noir_wasm` expects a filesystem so it can resolve dependencies. While we could use the `public` folder, let's just import those using the nice `?url` syntax provided by vite. At the top of the file:
-
-```js
-import { compile, createFileManager } from "@noir-lang/noir_wasm"
-
-import main from "./circuit/src/main.nr?url";
-import nargoToml from "./circuit/Nargo.toml?url";
-```
-
-Compiling on the browser is common enough that `createFileManager` already gives us a nice in-memory filesystem we can use. So all we need to compile is fetching these files, writing them to our filesystem, and compile. Add this function:
-
-```js
-export async function getCircuit() {
- const fm = createFileManager("/");
- const { body } = await fetch(main);
- const { body: nargoTomlBody } = await fetch(nargoToml);
-
- fm.writeFile("./src/main.nr", body);
- fm.writeFile("./Nargo.toml", nargoTomlBody);
- return await compile(fm);
-}
-```
-
-:::tip
-
-As you can imagine, with `node` it's all conveniently easier since you get native access to `fs`...
-
-:::
-
 ## Some more JS
 
 We're starting with the good stuff now. We want to execute our circuit to get the witness, and then feed that witness to Barretenberg. Luckily, both packages are quite easy to work with. Let's import them at the top of the file:
 
 ```js
 import { UltraHonkBackend } from '@aztec/bb.js';
 import { Noir } from '@noir-lang/noir_js';
+import circuit from "./circuit/target/circuit.json";
 ```
 
 And instantiate them inside our try-catch block:
 
 ```ts
 // try {
-const { program } = await getCircuit();
-const noir = new Noir(program);
-const backend = new UltraHonkBackend(program.bytecode);
+const noir = new Noir(circuit);
+const backend = new UltraHonkBackend(circuit.bytecode);
 // }
 ```
 
-:::warning
-
-WASMs are not always easy to work with. In our case, `vite` likes serving them with the wrong MIME type. There are different fixes but we found the easiest one is just YOLO instantiating the WASMs manually. Paste this at the top of the file, just below the other imports, and it will work just fine:
-
-```js
-import initNoirC from "@noir-lang/noirc_abi";
-import initACVM from "@noir-lang/acvm_js";
-import acvm from "@noir-lang/acvm_js/web/acvm_js_bg.wasm?url";
-import noirc from "@noir-lang/noirc_abi/web/noirc_abi_wasm_bg.wasm?url";
-await Promise.all([initACVM(fetch(acvm)), initNoirC(fetch(noirc))]);
-```
-
-:::
-
 ## Executing and proving
 
 Now for the app itself. We're capturing whatever is in the input when people press the submit button. Inside our `try` block, let's just grab that input and get its value. Noir will gladly execute it, and give us a witness:
@@ -257,16 +221,22 @@ Our program is technically **done** . You're probably eager to see stuff happeni
 touch vite.config.js
 ```
 
-`vite` helps us with a little catch: `bb.js` in particular uses top-level awaits which aren't supported everywhere. So we can add this to the `vite.config.js` to make the bundler optimize them:
+Noir needs to load two WASM modules, but Vite doesn't include them by default in the bundle. We need to add the configuration below to `vite.config.js` to make it work.
+We also need to target ESNext since `bb.js` uses top-level await, which isn't supported in some browsers.
 
 ```js
-export default { optimizeDeps: { esbuildOptions: { target: "esnext" } } };
+export default {
+  optimizeDeps: {
+    esbuildOptions: { target: "esnext" },
+    exclude: ['@noir-lang/noirc_abi', '@noir-lang/acvm_js']
+  }
+};
 ```
 
 This should be enough for vite. We don't even need to install it, just run:
 
 ```bash
-bunx vite
+yarn dlx vite
 ```
 
 If it doesn't open a browser for you, just visit `localhost:5173`. You should now see the worst UI ever, with an ugly input.