From 330bb285b1a8678af4d2ce2ad231472ca38a3501 Mon Sep 17 00:00:00 2001 From: Omer Bektas Date: Mon, 10 Aug 2026 23:48:10 +0300 Subject: [PATCH] docs: consolidate WebClient setup steps (#106) --- .../web-client/counter_contract_tutorial.md | 34 ++---------------- docs/src/web-client/create_deploy_tutorial.md | 36 ++----------------- .../creating_multiple_notes_tutorial.md | 36 ++----------------- .../foreign_procedure_invocation_tutorial.md | 34 ++---------------- docs/src/web-client/setup_guide.md | 24 ++++++++++++- .../web-client/unauthenticated_note_how_to.md | 36 ++----------------- 6 files changed, 33 insertions(+), 167 deletions(-) diff --git a/docs/src/web-client/counter_contract_tutorial.md b/docs/src/web-client/counter_contract_tutorial.md index 024c4f5..0d25440 100644 --- a/docs/src/web-client/counter_contract_tutorial.md +++ b/docs/src/web-client/counter_contract_tutorial.md @@ -18,43 +18,13 @@ This tutorial provides a foundational understanding of building and interacting ## Prerequisites -- Node `v20` or greater -- Familiarity with TypeScript -- `yarn` +Complete the [Web Client Setup Guide](./setup_guide.md) before starting. It covers the Node.js version, package manager, SDK install, and Next.js configuration used by this tutorial. This tutorial assumes you have a basic understanding of Miden assembly. To quickly get up to speed with Miden assembly (MASM), please play around with running basic Miden assembly programs in the [Miden playground](https://0xmiden.github.io/examples/). ## Step 1: Initialize your Next.js project -1. Create a new Next.js app with TypeScript: - - ```bash - npx create-next-app@latest miden-web-app --typescript - ``` - - Hit enter for all terminal prompts. - -2. Change into the project directory: - - ```bash - cd miden-web-app - ``` - -3. Install the Miden SDK: - ```bash - yarn add @miden-sdk/miden-sdk@0.15.2 - ``` - -**NOTE!**: Be sure to add the `--webpack` command to your `package.json` when running the `dev script`. The dev script should look like this: - -`package.json` - -```json - "scripts": { - "dev": "next dev --webpack", - ... - } -``` +Follow the [setup guide](./setup_guide.md#create-a-tutorial-project) to create the Next.js app and install the SDK. Once the project is ready, keep your terminal in the `miden-web-app` directory for the remaining steps. ## Step 2: Edit the `app/page.tsx` file: diff --git a/docs/src/web-client/create_deploy_tutorial.md b/docs/src/web-client/create_deploy_tutorial.md index 8ef7241..5da5f0f 100644 --- a/docs/src/web-client/create_deploy_tutorial.md +++ b/docs/src/web-client/create_deploy_tutorial.md @@ -20,9 +20,7 @@ In this tutorial, we'll build a simple Next.js application that demonstrates the ## Prerequisites -- Node `v20` or greater -- Familiarity with TypeScript -- `yarn` +Complete the [Web Client Setup Guide](./setup_guide.md) before starting. It covers the Node.js version, package manager, SDK install, and Next.js configuration used by this tutorial. ## Public vs. private accounts & notes @@ -39,37 +37,7 @@ It is useful to think of notes on Miden as "cryptographic cashier's checks" that ## Step 1: Initialize your Next.js project -1. Create a new Next.js app with TypeScript: - - ```bash - npx create-next-app@latest miden-web-app --typescript - ``` - - Hit enter for all terminal prompts. - -2. Change into the project directory: - - ```bash - cd miden-web-app - ``` - -3. Install the Miden SDK: - - - -**NOTE!**: Be sure to add the `--webpack` command to your `package.json` when running the `dev script`. The dev script should look like this: - -`package.json` - -```json - "scripts": { - "dev": "next dev --webpack", - ... - } -``` +Follow the [setup guide](./setup_guide.md#create-a-tutorial-project) to create the Next.js app and install the SDK. Once the project is ready, keep your terminal in the `miden-web-app` directory for the remaining steps. ## Step 2: Set up the Miden client diff --git a/docs/src/web-client/creating_multiple_notes_tutorial.md b/docs/src/web-client/creating_multiple_notes_tutorial.md index bb6ba85..9207c58 100644 --- a/docs/src/web-client/creating_multiple_notes_tutorial.md +++ b/docs/src/web-client/creating_multiple_notes_tutorial.md @@ -25,9 +25,7 @@ The entire flow is wrapped in a helper called `multiSendWithDelegatedProver()` t ## Prerequisites -- Node `v20` or greater -- Familiarity with TypeScript -- `yarn` +Complete the [Web Client Setup Guide](./setup_guide.md) before starting. It covers the Node.js version, package manager, SDK install, and Next.js configuration used by this tutorial. ## What is Delegated Proving? @@ -44,37 +42,7 @@ proving service. This means your browser never has to generate the full ZK proof ## Step 1: Initialize your Next.js project -1. Create a new Next.js app with TypeScript: - - ```bash - npx create-next-app@latest miden-web-app --typescript - ``` - - Hit enter for all terminal prompts. - -2. Change into the project directory: - - ```bash - cd miden-web-app - ``` - -3. Install the Miden SDK: - - - -**NOTE!**: Be sure to add the `--webpack` command to your `package.json` when running the `dev script`. The dev script should look like this: - -`package.json` - -```json - "scripts": { - "dev": "next dev --webpack", - ... - } -``` +Follow the [setup guide](./setup_guide.md#create-a-tutorial-project) to create the Next.js app and install the SDK. Once the project is ready, keep your terminal in the `miden-web-app` directory for the remaining steps. ## Step 2: Edit the `app/page.tsx` file: diff --git a/docs/src/web-client/foreign_procedure_invocation_tutorial.md b/docs/src/web-client/foreign_procedure_invocation_tutorial.md index 641d1b1..177a6fe 100644 --- a/docs/src/web-client/foreign_procedure_invocation_tutorial.md +++ b/docs/src/web-client/foreign_procedure_invocation_tutorial.md @@ -33,43 +33,13 @@ The diagram above depicts the "count copy" smart contract using foreign procedur ## Prerequisites -- Node `v20` or greater -- Familiarity with TypeScript -- `yarn` +Complete the [Web Client Setup Guide](./setup_guide.md) before starting. It covers the Node.js version, package manager, SDK install, and Next.js configuration used by this tutorial. This tutorial assumes you have a basic understanding of Miden assembly and completed the previous tutorial on incrementing the counter contract. To quickly get up to speed with Miden assembly (MASM), please play around with running basic Miden assembly programs in the [Miden playground](https://0xmiden.github.io/examples/). ## Step 1: Initialize your Next.js project -1. Create a new Next.js app with TypeScript: - - ```bash - npx create-next-app@latest miden-fpi-app --typescript - ``` - - Hit enter for all terminal prompts. - -2. Change into the project directory: - - ```bash - cd miden-fpi-app - ``` - -3. Install the Miden SDK: - ```bash - yarn add @miden-sdk/miden-sdk@0.15.2 - ``` - -**NOTE!**: Be sure to add the `--webpack` command to your `package.json` when running the `dev script`. The dev script should look like this: - -`package.json` - -```json - "scripts": { - "dev": "next dev --webpack", - ... - } -``` +Follow the [setup guide](./setup_guide.md#create-a-tutorial-project) to create the Next.js app and install the SDK. You can use `miden-fpi-app` as the project name if you want to keep this tutorial separate from the earlier ones. ## Step 2: Edit the `app/page.tsx` file diff --git a/docs/src/web-client/setup_guide.md b/docs/src/web-client/setup_guide.md index bf5fc4d..23c3d7e 100644 --- a/docs/src/web-client/setup_guide.md +++ b/docs/src/web-client/setup_guide.md @@ -10,9 +10,19 @@ This guide covers the configuration required to use the Miden web SDK (`@miden-s ## Prerequisites - Node.js 20+ (Node 22+ requires an extra `localStorage` polyfill — see below) -- Next.js 14+ with App Router - yarn or npm +## Create a tutorial project + +Most Web Client tutorials use a Next.js application with TypeScript: + +```bash +npx create-next-app@latest miden-web-app --typescript +cd miden-web-app +``` + +Accept the default prompts unless the tutorial asks for a different project name or framework. + ## Install the SDK ```bash @@ -29,6 +39,8 @@ These tutorials use Next.js, so all code examples import from the SDK's `/lazy` ## Next.js Configuration +The Next.js tutorials assume Next.js 14+ with App Router. + Create or update `next.config.ts` with these required settings: ```ts @@ -65,6 +77,16 @@ const nextConfig: NextConfig = { export default nextConfig; ``` +Then update the development script in `package.json` to use webpack: + +```json +{ + "scripts": { + "dev": "next dev --webpack" + } +} +``` + ### Importing `.masm` files (for smart contract tutorials) If your tutorials use Miden assembly (`.masm`) files, add this webpack rule inside the `webpack` callback: diff --git a/docs/src/web-client/unauthenticated_note_how_to.md b/docs/src/web-client/unauthenticated_note_how_to.md index 73b7e92..fabf5da 100644 --- a/docs/src/web-client/unauthenticated_note_how_to.md +++ b/docs/src/web-client/unauthenticated_note_how_to.md @@ -30,9 +30,7 @@ Alice ➡ Wallet 1 ➡ Wallet 2 ➡ Wallet 3 ➡ Wallet 4 ➡ Wallet 5 ## Prerequisites -- Node `v20` or greater -- Familiarity with TypeScript -- `yarn` +Complete the [Web Client Setup Guide](./setup_guide.md) before starting. It covers the Node.js version, package manager, SDK install, and Next.js configuration used by this tutorial. This tutorial assumes you have a basic understanding of Miden assembly. To quickly get up to speed with Miden assembly (MASM), please play around with running basic Miden assembly programs in the [Miden playground](https://0xmiden.github.io/examples/). @@ -60,37 +58,7 @@ This tutorial assumes you have a basic understanding of Miden assembly. To quick ## Step 1: Initialize your Next.js project -1. Create a new Next.js app with TypeScript: - - ```bash - npx create-next-app@latest miden-web-app --typescript - ``` - - Hit enter for all terminal prompts. - -2. Change into the project directory: - - ```bash - cd miden-web-app - ``` - -3. Install the Miden SDK: - - - -**NOTE!**: Be sure to add the `--webpack` command to your `package.json` when running the `dev script`. The dev script should look like this: - -`package.json` - -```json - "scripts": { - "dev": "next dev --webpack", - ... - } -``` +Follow the [setup guide](./setup_guide.md#create-a-tutorial-project) to create the Next.js app and install the SDK. Once the project is ready, keep your terminal in the `miden-web-app` directory for the remaining steps. ## Step 2: Edit the `app/page.tsx` file