Skip to main content

Domain Browser Example

Synced from the repository

This page mirrors core/domain/examples/browser/README.md in the posemesh repo (branch main). The repository is the source of truth.

This is a browser example for the domain package. It demonstrates how to use the domain package in a browser environment.

Prerequisites​

  • Node.js (v14 or later)
  • npm (v6 or later)

Setup​

  1. Build the WASM module:
  • Install Rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source $HOME/.cargo/env
  • Install wasm-pack
cargo install wasm-pack
cd core
  • (Optional) Installing Protocol Buffers Tools

install

  • protoc (Protocol Buffers Compiler)
  • protoc-gen-ts (Protocol Buffers TypeScript Plugin)
# macOS (using Homebrew)
brew install protobuf
npm install -g protoc-gen-ts

# Linux
sudo apt-get install protobuf-compiler
npm install -g protoc-gen-ts

# Windows (using chocolatey)
choco install protoc
npm install -g protoc-gen-ts
  • Build rust
make build-domain-wasm

For macos, if you are running into "No available targets are compatible with triple "wasm32-unknown-unknown", you need to use another clang compiler

brew install llvm
export PATH="/opt/homebrew/opt/llvm/bin:$PATH"
  • Link module Link once
cd core/domain/pkg
npm link

cd core/domain/examples/browser
npm link @aukilabs/posemesh-domain
  1. Install dependencies:
cd domain/examples/browser
npm install
  1. Start the development server: Update .env, you should copy webrtc address of domain manager and any string as app id
npm run dev
  1. Open your browser and navigate to http://localhost:5173

Development​

The project uses:

  • Vite for development and building
  • Tailwind CSS for styling
  • Protocol Buffers for data serialization
  • WebAssembly for core functionality

Building for Production​

npm run build

This will create a production build in the dist directory.

Features​

  • Scans upload with drag-and-drop support
  • Upload status tracking
  • WebRTC-based peer-to-peer communication
  • Trigger refinement on selected scans
  • Scans download capabilities

To modify the protobuf definitions, edit the .proto files in the protobuf directory and regenerate the JavaScript files using the commands above.