React + Rust WebAssembly Template

A modern template combining React 19, Rust, and WebAssembly with Vite and Bun for optimal development experience and hot reloading.

🚀 Features

• React 19 with modern hooks and concurrent features
• Rust WebAssembly with wasm-bindgen and wasm-pack
• Vite 7 with hot reloading and optimized builds
• Bun for fast package management and development
• TypeScript throughout with proper WASM type definitions
• Biome for formatting and linting
• Hot Reloading: Changes to Rust code automatically rebuild WASM and reload React
• Modular workspace architecture with separate core and bindings packages
• Comprehensive development workflow with parallel watch modes

📦 Project Structure

react-wasm-template/
├── packages/
│   ├── wasm-core/          # Core Rust logic (pure business logic)
│   │   ├── src/
│   │   │   ├── lib.rs      # Core functionality
│   │   │   ├── modules/    # (ready for expansion)
│   │   │   ├── types/      # (ready for expansion)
│   │   │   └── utils/      # (ready for expansion)
│   │   └── Cargo.toml
│   ├── wasm-bindings/      # WebAssembly bindings layer
│   │   ├── src/lib.rs      # WASM-bindgen exports
│   │   ├── pkg/            # Generated WASM output
│   │   └── Cargo.toml
│   └── web-app/            # React application
│       ├── src/
│       │   ├── components/ # React components
│       │   ├── hooks/      # Custom hooks
│       │   ├── types/      # TypeScript definitions
│       │   └── App.tsx     # Main application
│       ├── biome.json      # Biome configuration
│       ├── package.json
│       └── vite.config.ts  # Vite with WASM plugins
├── Cargo.toml              # Rust workspace
├── package.json            # npm workspace configuration
└── README.md

🛠️ Prerequisites

• Rust (latest stable) - rustup.rs
• wasm-pack - cargo install wasm-pack
• cargo-watch - cargo install cargo-watch (for development)
• Bun - bun.sh

🔧 Quick Start

1. Clone and install dependencies:

   git clone <your-repo>
   cd react-wasm-template
   bun install

2. Start development server with hot reloading:

   bun run dev

   This starts both the WASM file watcher and React dev server in parallel.

3. Open in browser: Navigate to http://localhost:5173

📝 Available Scripts

Development

• bun run dev - Start full development environment (WASM watch + React dev server)
• bun run build - Production build (Rust release + optimized React bundle)

Code Quality

• bun run format - Format all code (Cargo fmt + Biome format)
• bun run lint - Lint all code (Cargo clippy + Biome lint + fixes)
• bun run check - Type check (Cargo check + TypeScript check)
• bun run test - Run all tests (Cargo test + React tests)
• bun run ci - Full CI pipeline (lint → format → check → test)

🏗️ Architecture

Core Package (wasm-core)

Pure Rust business logic, isolated from WebAssembly:

• Contains the main application logic
• No WASM-specific dependencies
• Ready for expansion with modules, types, and utilities

Bindings Package (wasm-bindings)

WebAssembly interface layer:

• Exports wasm-core functions with #[wasm_bindgen]
• Handles JavaScript ↔ Rust type conversions
• Generates TypeScript definitions automatically
• Built with wasm-pack for web targets

Web App Package (web-app)

Modern React application:

• React 19 with concurrent features
• Vite 7 with specialized WASM plugins (vite-plugin-wasm, vite-plugin-top-level-await)
• TypeScript with strict configuration
• Biome for formatting and linting
• Proper async WASM module loading with error handling

🔥 Development Workflow

Hot Reloading Magic

The development setup provides seamless hot reloading:

1. Edit Rust code in packages/wasm-core/ or packages/wasm-bindings/
2. cargo-watch detects changes and rebuilds WASM automatically
3. React dev server reloads with the new WASM module
4. Browser updates without manual intervention

🏭 Production Build

bun run build

This creates an optimized production build:

• Rust: Compiled with --release flag for performance
• WASM: Built with wasm-pack for web targets
• React: Bundled and minified with Vite
• Assets: Optimized and properly handled

🧪 Testing

# Run all tests (Rust + React)
bun run test

# Test individual packages
cd packages/wasm-core && cargo test
cd packages/wasm-bindings && cargo test
cd packages/web-app && bun test

📚 Learn More

• React Documentation
• Rust WebAssembly Book
• wasm-bindgen Guide
• Vite Documentation
• Bun Documentation
• Biome Documentation

📄 License

MIT License - feel free to use this template for your projects!