Rust Wasm Spa Starter

Awaddd
1

I created this simple app to explore how Rust, WebAssembly and JavaScript UI frameworks like Svelte or Preact can work together. Rust manages the business logic and application state while the JavaScript framework primarily renders the UI. This project provides examples for both Svelte 5 and Preact.

Download

Rust WebAssembly (Wasm) Starter

The goal of this project is to showcase how Rust, WebAssembly, and JavaScript can work together to build performant and interactive single page applications. Rust handles application state and business logic, while the JS framework renders the UI. While Svelte and Preact are used here, they could easily be swapped out for React or any other frontend UI library of your choice.

Features

Rust-Wasm Module: Written in Rust and compiled to WebAssembly for fast and safe execution in the browser.
Svelte/ Preact Frontend: Lightweight view layer with hooks for seamless interaction with the Rust backend.
Event-Driven Architecture: Custom Rust events fired into the JavaScript context for updating the UI.
Tailwind CSS: Used for minimal, utility-based styling.
Counter Example: Demonstrates event-driven state updates and two-way communication between Rust and the frontend.

Event-Driven Communication

This app uses an event-driven architecture where Rust events trigger UI updates in the frontend. Some of the events implemented include:

app_started: Fired when the Wasm module is successfully initialized.
counter_updated: Fired whenever the counter value is changed.
counter_limit_exceeded: Fired when the counter exceeds a specific threshold, triggering a confetti animation.

These events are handled in JavaScript using custom hooks (useRustCtx) that listen for the events and update the UI accordingly.

Getting Started

Prerequisites

Rust (with wasm32-unknown-unknown target installed)
Node.js (for bundling and serving the frontend)
wasm-pack (to compile Rust code into WebAssembly)
npm or yarn (for managing JavaScript dependencies)

Setup Instructions

Clone the Repository:

Open your terminal and run the following command to clone the project:
```
git clone https://github.com/Awaddd/rust-wasm-spa-starter
```
Change into the project directory:
```
cd rust-wasm-spa-starter
```
Install Frontend Dependencies:

Navigate to the app-svelte or app-preact directory:
```
cd app-svelte
```
Install the necessary dependencies:
```
npm install
```
Run the Frontend:

Start the development server:
```
npm run dev
```
Build the Rust-Wasm Module:

In a separate terminal, first install cargo-watch to enable automated rebuilds on file change:
```
cargo install cargo-watch
```
Navigate to the app-svelte or app-preact directory:
```
cd app-svelte
```
Manually build the Wasm module the first time only
```
wasm-pack build --target web
```
Then run the script to watch for changes and automatically build the Wasm module:
```
npm run watch:wasm
```
Open the App:

Access the app in your browser at http://localhost:5173.

Feedback and Contributions

If you have ideas for improvement or feedback, feel free to contribute, fork the project, or submit an issue. I'm happy to hear any suggestions to make this a better example.

Top categories