noir-lang · critesjosh · Jun 13, 2025 · Jun 13, 2025 · Jun 13, 2025 · Jun 13, 2025
diff --git a/.github/workflows/web-starter-playwright.yml b/.github/workflows/web-starter-playwright.yml
@@ -6,10 +6,6 @@ on:
 
 jobs:
   test:
-    defaults:
-      run:
-        working-directory: web-starter
-
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -30,24 +26,39 @@ jobs:
 
       - name: Build circuits
         run: |
-          cd circuits && ./build.sh
+          cd web-starter/circuits && ./build.sh
 
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
           node-version: lts/*
 
-      - name: Install JS dependencies
-        working-directory: web-starter/web
+      - name: Install JS dependencies (vite)
+        working-directory: web-starter/web/vite
+        run: |
+          yarn install
+
+      - name: Install Playwright Browsers (vite)
+        working-directory: web-starter/web/vite
+        run: |
+          yarn playwright install --with-deps
+
+      - name: Run Playwright tests (vite)
+        working-directory: web-starter/web/vite
+        run: |
+          yarn test:e2e
+
+      - name: Install JS dependencies (webpack)
+        working-directory: web-starter/web/webpack
         run: |
           yarn install
 
-      - name: Install Playwright Browsers
-        working-directory: web-starter/web
+      - name: Install Playwright Browsers (webpack)
+        working-directory: web-starter/web/webpack
         run: |
           yarn playwright install --with-deps
 
-      - name: Run Playwright tests
-        working-directory: web-starter/web
+      - name: Run Playwright tests (webpack)
+        working-directory: web-starter/web/webpack
         run: |
           yarn test:e2e
diff --git a/web-starter/.gitignore b/web-starter/.gitignore
@@ -1,10 +1,10 @@
-cache
-out
-proofs
-broadcast
-.env
-plonk_vk.sol
-web/node_modules
-.DS_Store
-web/dist
-web/test-results
+**/dist/
+**/build/
+**/out/
+**/target/
+**/node_modules/
+**/.env*
+**/coverage/
+**/test-results/
+**/package-lock.json
+**/pnpm-lock.yaml
diff --git a/web-starter/README.md b/web-starter/README.md
@@ -9,15 +9,20 @@ Tested with Noir 1.0.0-beta.6 and bb 0.84.0
 
 ```bash
 (cd circuits && ./build.sh)
-(cd web && yarn)
+
+# vite
+(cd web/vite && yarn install)
+
+# webpack
+(cd web/webpack && yarn install)
 ```
 
 ## Run
 
 ```bash
 # vite
-(cd web && yarn vite:dev)
+(cd web/vite && yarn dev)
 
 # webpack
-(cd web && yarn webpack:dev)
+(cd web/webpack && yarn dev)
 ```
diff --git a/web-starter/web/tests/proof-verification.spec.ts b/web-starter/web/tests/proof-verification.spec.ts
diff --git a/web-starter/web/vite/README.md b/web-starter/web/vite/README.md
@@ -0,0 +1,20 @@
+# Introduction
+
+A simple Noir circuit with browser proving with bb.js
+Has both webpack and vite bundling.
+
+Tested with Noir 1.0.0-beta.6 and bb 0.84.0
+
+## Setup
+
+```bash
+(cd ../../circuits && ./build.sh)
+yarn
+```
+
+## Run
+
+```bash
+# vite
+yarn dev
+```
diff --git a/web-starter/web/index.html → web-starter/web/vite/index.html b/web-starter/web/index.html → web-starter/web/vite/index.html
@@ -3,15 +3,15 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Noir UH Starter</title>
+    <title>Noir UH Starter (Vite)</title>
   </head>
   <body>
     <div class="container">
-      <h1>Noir UH Starter</h1>
+      <h1>Noir UH Starter (Vite)</h1>
       <button id="generateProofBtn">Generate Proof</button>
       <div style="white-space: pre-wrap" id="result"></div>
     </div>
-    <!-- Needed for vite, but fails in webpack (ignore) -->
+    <!-- Vite version -->
     <script type="module" src="./main.ts"></script>
   </body>
 </html>
diff --git a/web-starter/web/main.ts → web-starter/web/vite/main.ts b/web-starter/web/main.ts → web-starter/web/vite/main.ts
@@ -1,5 +1,5 @@
 import { UltraHonkBackend } from "@aztec/bb.js";
-import circuit from "../circuits/target/noir_uh_starter.json" with { type: "json" };
+import circuit from "../../circuits/target/noir_uh_starter.json" with { type: "json" };
 import { Noir } from "@noir-lang/noir_js";
 
 function log(message: string) {

diff --git a/web-starter/web/vite/package.json b/web-starter/web/vite/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "js",
+  "type": "module",
+  "dependencies": {
+    "@aztec/bb.js": "0.84.0",
+    "@noir-lang/noir_js": "1.0.0-beta.6"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite serve",
+    "test:e2e": "playwright test"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.53.0",
+    "@types/node": "^22.10.1",
+    "playwright": "^1.53.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.3",
+    "vite": "^6.1.0"
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}
diff --git a/web-starter/web/vite/playwright.config.cjs b/web-starter/web/vite/playwright.config.cjs
@@ -0,0 +1,22 @@
+// playwright.config.js
+// @ts-check
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+    webServer: {
+        command: 'yarn dev',
+        port: 5173,
+        timeout: 120 * 1000,
+        reuseExistingServer: !process.env.CI,
+    },
+    use: {
+        baseURL: 'http://localhost:5173',
+        headless: true,
+    },
+    projects: [
+        { name: 'chromium', use: { browserName: 'chromium' } },
+        { name: 'firefox', use: { browserName: 'firefox' } },
+        { name: 'webkit', use: { browserName: 'webkit' } },
+    ],
+};
+
+module.exports = config; 
diff --git a/web-starter/web/vite/tests/proof-verification.spec.ts b/web-starter/web/vite/tests/proof-verification.spec.ts
@@ -0,0 +1,20 @@
+import { test, expect, Page } from '@playwright/test';
+
+// Vite version
+test('proof verification works in the browser', async ({ page }: { page: Page }) => {
+    await page.goto('/');
+    await page.click('#generateProofBtn');
+    // Wait for the result to contain 'Verified:' with increased timeout
+    let resultText = '';
+    try {
+        await expect(page.locator('#result')).toContainText('Verified:', { timeout: 30000 });
+        resultText = await page.locator('#result').innerText();
+    } catch (e) {
+        // Debug: print the current contents of #result if the check fails
+        resultText = await page.locator('#result').innerText();
+        console.log('DEBUG: #result contents at failure:', resultText);
+        throw e;
+    }
+    // Check that the result contains 'Verified: true' (or similar)
+    expect(resultText).toMatch(/Verified:\s*(true|1)/i);
+}); 
diff --git a/web-starter/web/tsconfig.json → web-starter/web/vite/tsconfig.json b/web-starter/web/tsconfig.json → web-starter/web/vite/tsconfig.json
diff --git a/web-starter/web/vite.config.js → web-starter/web/vite/vite.config.js b/web-starter/web/vite.config.js → web-starter/web/vite/vite.config.js