Vanilla JS x Rust

A vanilla-JS frontend (no framework) talking to a Rust/axum backend that records audit events via sdk-rust and serves the bundle on the same port. Comes in single-tenant and multi-tenant variants.

Source: https://github.com/everscribe/examples/tree/main/vanilla-js-fe-with-rust-be

Stack

Layer What it is
Frontend Plain HTML + ES modules + CSS, Vite for bundling, @everscribe/components-element
Backend Rust (axum + tokio), everscribe
Domain In-memory secrets vault
Audit panel <audit-trail> custom element

Run it

git clone https://github.com/everscribe/examples
cd examples/vanilla-js-fe-with-rust-be/single-tenant   # or .../multi-tenant

cp .env.example .env   # EVERSCRIBE_PROJECT_ID + EVERSCRIBE_API_KEY
(cd frontend && npm install && npm run build)

cargo run

Server on :9000 serves the bundle and the API.

Backend integration

Identical to the other Rust variants:

let es = everscribe::new(project_id, api_key)?;
let rec = es.new_recorder(Default::default());
let minter = es.new_minter(Default::default());

let api = Router::new()
    /* routes */
    .layer(EverscribeLayer::new(rec, resolve_actor))
    .with_state(state);

Handlers enrich CurrentEvent; the layer records on response finish. See React + Rust → Backend integration for the full reveal + mint handlers.

Frontend integration

Plain HTML + a tiny module script:

<!doctype html>
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="https://unpkg.com/@everscribe/components-styles/default.css">

<main id="vault"></main>
<audit-trail token-endpoint="/api/embed-token"></audit-trail>

<script type="module">
    import "@everscribe/components-element";
    // ... vault UI code
</script>

For multi-tenant customer scoping, attach the demo auth header via onTokenExpired:

const el = document.querySelector("audit-trail");
el.onTokenExpired = async () => {
    const res = await fetch("/api/embed-token/customer", {
        method: "POST",
        credentials: "include",
        headers: { "X-Demo-Actor": currentUser.id },
    });
    return (await res.json()).token;
};

Single-Tenant vs Multi-Tenant

Single-tenant Multi-tenant
Token endpoint One. /api/embed-token Two. /api/embed-token/customer, /api/embed-token/admin
UI One vault view Tab strip: Customer view · Admin view
Seeded data One implicit tenant Acme, Initech
Audit-panel scope Whole project Customer: tenant-scoped · Admin: unscoped

What to take away

  • Smallest stack of the matrix. No framework on the frontend, a single axum process on the backend.
  • The audit-trail tag is the entire embed.
  • Same backend code as the React and Svelte variants.

What next