Skip to content

Split up vite and webpack in the web example, more browser testing #57

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

Merged
critesjosh merged 5 commits into from
Jun 13, 2025
Merged

Split up vite and webpack in the web example, more browser testing #57

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0309c33
Split up vite and webpack in the web example, more browser testing
critesjosh Jun 13, 2025
781d319
Refactor GitHub Actions workflow for Playwright tests
critesjosh Jun 13, 2025
e92c166
increase timeout, add debug logs
critesjosh Jun 13, 2025
6c6a8ba
Enhance proof verification test with increased timeout and debug logging
critesjosh Jun 13, 2025
7378a8a
rm yarn.lock
critesjosh Jun 13, 2025
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
20 changes: 10 additions & 10 deletions web-starter/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
11 changes: 8 additions & 3 deletions web-starter/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
```
20 changes: 20 additions & 0 deletions web-starter/web/vite/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
```
6 changes: 3 additions & 3 deletions web-starter/web/index.html → web-starter/web/vite/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
2 changes: 1 addition & 1 deletion web-starter/web/main.ts → web-starter/web/vite/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down
23 changes: 23 additions & 0 deletions web-starter/web/vite/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
22 changes: 22 additions & 0 deletions web-starter/web/vite/playwright.config.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
1 change: 1 addition & 0 deletions ...rter/web/tests/proof-verification.spec.ts → ...web/vite/tests/proof-verification.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
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');
Expand Down
0 web-starter/web/tsconfig.json → web-starter/web/vite/tsconfig.json
View file
Open in desktop
File renamed without changes.
0 web-starter/web/vite.config.js → web-starter/web/vite/vite.config.js
View file
Open in desktop
File renamed without changes.
Loading
Loading