Rust WebAssembly Edge Stack: Deno Deploy + Cloudflare Workers

# Install Rust and cargo
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source $HOME/.cargo/env

# Add wasm32 target
rustup target add wasm32-unknown-unknown
rustup target add wasm32-wasi

# Install wasm-pack
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

# Install Deno
curl -fsSL https://deno.land/install.sh | sh

# Install Wrangler (Cloudflare Workers CLI)
npm install -g wrangler

# Verify installations
rustc --version
wasm-pack --version
deno --version
wrangler --version

rust-wasm-core/
├── Cargo.toml          # Rust dependencies and config
├── src/
│   └── lib.rs          # Main Rust code
└── pkg/                # Generated Wasm output (gitignore)

# Create new library project
cargo new --lib rust-wasm-core
cd rust-wasm-core

# Update Cargo.toml with wasm dependencies
cat > Cargo.toml << 'EOF'
[package]
name = "rust-wasm-core"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2"
serde = { version = "1.0", features = ["derive"] }
serde-wasm-bindgen = "0.6"
console_error_panic_hook = "0.1"
web-sys = { version = "0.3", features = ["console"] }

[profile.release]
opt-level = "z"        # Optimize for size
lto = true             # Link-time optimization
codegen-units = 1      # Single codegen unit for better optimization
strip = true           # Strip symbols
EOF

// src/lib.rs
use wasm_bindgen::prelude::*;
use serde::{Deserialize, Serialize};

#[wasm_bindgen]
pub fn init_panic_hook() {
    console_error_panic_hook::set_once();
}

#[derive(Serialize, Deserialize)]
pub struct DataPoint {
    pub id: u32,
    pub value: f64,
    pub label: String,
}

#[wasm_bindgen]
pub struct WasmProcessor {
    data: Vec<DataPoint>,
}

#[wasm_bindgen]
impl WasmProcessor {
    #[wasm_bindgen(constructor)]
    pub fn new() -> Self {
        Self { data: Vec::new() }
    }

    pub fn process_data(&mut self, json_data: &str) -> Result<String, JsValue> {
        let points: Vec<DataPoint> = serde_json::from_str(json_data)
            .map_err(|e| JsValue::from_str(&e.to_string()))?;
        
        // Perform heavy computation (example: statistical analysis)
        let sum: f64 = points.iter().map(|p| p.value).sum();
        let count = points.len() as f64;
        let mean = sum / count;
        
        let variance: f64 = points
            .iter()
            .map(|p| (p.value - mean).powi(2))
            .sum::<f64>() / count;
        
        let result = serde_json::json!({
            "mean": mean,
            "variance": variance,
            "count": count
        });
        
        Ok(result.to_string())
    }

    pub fn greet(name: &str) -> String {
        format!("Hello from Rust+Wasm, {}!", name)
    }
}

# Build for bundler (React/Vite)
wasm-pack build --target bundler --release

# Build for Deno Deploy
wasm-pack build --target deno --release --out-dir pkg-deno

# Build for Cloudflare Workers
wasm-pack build --target bundler --release --out-dir pkg-workers

# The pkg/ directory now contains:
# - rust_wasm_core_bg.wasm (WebAssembly binary)
# - rust_wasm_core.js (JS bindings)
# - rust_wasm_core.d.ts (TypeScript types)
# - package.json (NPM metadata)

# Link locally for development
cd pkg
npm link
cd ..

# Create React + TypeScript project with Vite
npm create vite@latest edge-app -- --template react-ts
cd edge-app

# Install React 19 (release candidate or latest)
npm install react@rc react-dom@rc

# Install Wasm package
npm link rust-wasm-core

# Install additional dependencies
npm install @tanstack/react-query workbox-precaching workbox-routing

# Update tsconfig.json for strict mode
cat > tsconfig.json << 'EOF'
{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["src"]
}
EOF

// src/hooks/useWasm.ts
import { useState, useEffect } from 'react';
import type { WasmProcessor } from 'rust-wasm-core';

let wasmModule: typeof import('rust-wasm-core') | null = null;
let initPromise: Promise<typeof import('rust-wasm-core')> | null = null;

export function useWasm() {
  const [wasm, setWasm] = useState<typeof import('rust-wasm-core') | null>(wasmModule);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    if (wasmModule) {
      setWasm(wasmModule);
      return;
    }

    if (!initPromise) {
      initPromise = import('rust-wasm-core').then((module) => {
        module.init_panic_hook();
        wasmModule = module;
        return module;
      });
    }

    initPromise
      .then((module) => setWasm(module))
      .catch((err) => setError(err));
  }, []);

  return { wasm, error, loading: !wasm && !error };
}

// src/components/WasmDemo.tsx
import { useWasm } from '../hooks/useWasm';
import { Suspense, useState, useTransition } from 'react';

export function WasmDemo() {
  const { wasm, error, loading } = useWasm();
  const [result, setResult] = useState<string>('');
  const [isPending, startTransition] = useTransition();

  const handleProcess = () => {
    if (!wasm) return;

    const testData = JSON.stringify([
      { id: 1, value: 10.5, label: 'A' },
      { id: 2, value: 20.3, label: 'B' },
      { id: 3, value: 15.7, label: 'C' },
    ]);

    const processor = new wasm.WasmProcessor();
    
    startTransition(() => {
      const output = processor.process_data(testData);
      setResult(output);
    });
  };

  if (loading) return <div>Loading Wasm module...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h2>Rust Wasm Processor</h2>
      <button onClick={handleProcess} disabled={isPending}>
        {isPending ? 'Processing...' : 'Run Analysis'}
      </button>
      {result && <pre>{JSON.stringify(JSON.parse(result), null, 2)}</pre>}
    </div>
  );
}

// deno-server.ts
import { serve } from "https://deno.land/std@0.224.0/http/server.ts";
import { serveDir } from "https://deno.land/std@0.224.0/http/file_server.ts";

// Import your Wasm module (built with --target deno)
import * as wasm from "./pkg-deno/rust_wasm_core.js";

wasm.init_panic_hook();

const STATIC_DIR = "./dist";

serve(async (req: Request) => {
  const url = new URL(req.url);
  
  // API endpoint using Wasm
  if (url.pathname === "/api/process") {
    try {
      const body = await req.json();
      const processor = new wasm.WasmProcessor();
      const result = processor.process_data(JSON.stringify(body.data));
      
      return new Response(result, {
        headers: {
          "content-type": "application/json",
          "cache-control": "public, max-age=60, s-maxage=3600",
        },
      });
    } catch (error) {
      return new Response(
        JSON.stringify({ error: (error as Error).message }),
        { status: 500 }
      );
    }
  }
  
  // Serve static files (React build)
  return serveDir(req, {
    fsRoot: STATIC_DIR,
    urlRoot: "",
    enableCors: true,
  });
}, { port: 8000 });

console.log("Server running on http://localhost:8000");

# Install deployctl
deno install -A --no-check -r -f https://deno.land/x/deploy/deployctl.ts

# Build React app
npm run build

# Copy Wasm pkg to dist
cp -r pkg-deno dist/

# Deploy to Deno Deploy
deployctl deploy --project=my-edge-app --prod deno-server.ts

# For GitHub integration:
# 1. Push code to GitHub
# 2. Go to https://dash.deno.com/projects
# 3. Link your repository
# 4. Set entry point to deno-server.ts
# 5. Auto-deploys on every push to main

# Create Workers project
npm create cloudflare@latest edge-worker
# Select: Hello World Worker template
# Select: TypeScript

cd edge-worker

# Copy Wasm build
cp ../rust-wasm-core/pkg-workers/* ./src/

# Update wrangler.toml
cat > wrangler.toml << 'EOF'
name = "edge-worker"
main = "src/index.ts"
compatibility_date = "2024-05-01"
compatibility_flags = ["nodejs_compat"]

# Wasm module binding
[[rules]]
type = "CompiledWasm"
globs = ["**/*.wasm"]

# KV namespace for caching
[[kv_namespaces]]
binding = "CACHE"
id = "your-kv-namespace-id"
preview_id = "preview-kv-namespace-id"
EOF

// src/index.ts
import wasmModule from './rust_wasm_core_bg.wasm';
import { WasmProcessor, init_panic_hook } from './rust_wasm_core';

interface Env {
  CACHE: KVNamespace;
}

// Initialize Wasm module
let wasmInstance: WebAssembly.Instance | null = null;

async function initWasm() {
  if (!wasmInstance) {
    wasmInstance = await WebAssembly.instantiate(wasmModule);
    init_panic_hook();
  }
  return wasmInstance;
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const url = new URL(request.url);
    
    // Initialize Wasm
    await initWasm();
    
    if (url.pathname === '/api/compute') {
      try {
        // Check KV cache first
        const cacheKey = await request.clone().text();
        const cached = await env.CACHE.get(cacheKey);
        
        if (cached) {
          return new Response(cached, {
            headers: {
              'content-type': 'application/json',
              'x-cache': 'HIT',
              'cache-control': 'public, max-age=3600',
            },
          });
        }
        
        // Process with Wasm
        const data = await request.json();
        const processor = new WasmProcessor();
        const result = processor.process_data(JSON.stringify(data));
        
        // Cache result
        await env.CACHE.put(cacheKey, result, { expirationTtl: 3600 });
        
        return new Response(result, {
          headers: {
            'content-type': 'application/json',
            'x-cache': 'MISS',
            'cache-control': 'public, max-age=3600',
          },
        });
      } catch (error) {
        return new Response(
          JSON.stringify({ error: (error as Error).message }),
          { status: 500 }
        );
      }
    }
    
    return new Response('Not Found', { status: 404 });
  },
};

// src/service-worker.ts
import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';

declare const self: ServiceWorkerGlobalScope;

// Precache build artifacts
precacheAndRoute(self.__WB_MANIFEST);

// Cache Wasm modules (they don't change often)
registerRoute(
  ({ request }) => request.destination === 'wasm',
  new CacheFirst({
    cacheName: 'wasm-cache',
    plugins: [
      new CacheableResponsePlugin({ statuses: [0, 200] }),
      new ExpirationPlugin({ maxEntries: 10, maxAgeSeconds: 30 * 24 * 60 * 60 }),
    ],
  })
);

// API calls: Network first with cache fallback
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst({
    cacheName: 'api-cache',
    plugins: [
      new CacheableResponsePlugin({ statuses: [0, 200] }),
      new ExpirationPlugin({ maxEntries: 50, maxAgeSeconds: 5 * 60 }),
    ],
  })
);

// Static assets: Stale while revalidate
registerRoute(
  ({ request }) =>
    request.destination === 'script' ||
    request.destination === 'style' ||
    request.destination === 'image',
  new StaleWhileRevalidate({
    cacheName: 'static-cache',
    plugins: [
      new CacheableResponsePlugin({ statuses: [0, 200] }),
    ],
  })
);

self.addEventListener('message', (event) => {
  if (event.data?.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

# Optimize Wasm size with wasm-opt
npm install -g wasm-opt

# After wasm-pack build:
wasm-opt -Oz pkg/rust_wasm_core_bg.wasm -o pkg/rust_wasm_core_bg.wasm

# Analyze bundle size
npx vite-bundle-visualizer

# Enable Brotli compression in Vite
# vite.config.ts additions:
import viteCompression from 'vite-plugin-compression';

export default {
  plugins: [
    viteCompression({ algorithm: 'brotliCompress' }),
  ],
  build: {
    target: 'esnext',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        passes: 2,
      },
    },
  },
};

# Performance testing
npx lighthouse https://your-edge-app.deno.dev --view

// Edge caching utility
type CacheConfig = {
  browserTTL: number;  // seconds
  edgeTTL: number;     // seconds
  cdnTTL: number;      // seconds
};

function buildCacheHeaders(config: CacheConfig): Headers {
  const headers = new Headers();
  
  // Browser cache
  headers.set(
    'Cache-Control',
    `public, max-age=${config.browserTTL}, s-maxage=${config.edgeTTL}, stale-while-revalidate=${config.edgeTTL * 2}`
  );
  
  // CDN cache
  headers.set('CDN-Cache-Control', `public, max-age=${config.cdnTTL}`);
  
  // Cloudflare-specific
  headers.set('CF-Cache-Status', 'DYNAMIC');
  
  return headers;
}

// Usage example
const CACHE_CONFIGS = {
  static: { browserTTL: 31536000, edgeTTL: 31536000, cdnTTL: 31536000 }, // 1 year
  api: { browserTTL: 60, edgeTTL: 300, cdnTTL: 3600 },                  // 1min/5min/1hr
  dynamic: { browserTTL: 0, edgeTTL: 30, cdnTTL: 60 },                  // 0/30s/1min
};

// In your Worker:
export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    // ... processing logic ...
    
    const headers = buildCacheHeaders(CACHE_CONFIGS.api);
    headers.set('Content-Type', 'application/json');
    
    return new Response(result, { headers });
  },
};

// Cost-aware caching wrapper
class EdgeCache {
  constructor(
    private kv: KVNamespace,
    private stats: { reads: number; writes: number } = { reads: 0, writes: 0 }
  ) {}

  async get(key: string): Promise<string | null> {
    this.stats.reads++;
    return await this.kv.get(key);
  }

  async put(key: string, value: string, ttl: number): Promise<void> {
    // Only write if value changed (saves KV writes)
    const existing = await this.get(key);
    if (existing === value) return;
    
    this.stats.writes++;
    await this.kv.put(key, value, { expirationTtl: ttl });
  }

  getStats() {
    return {
      ...this.stats,
      estimatedCost: (this.stats.reads * 0.0000005) + (this.stats.writes * 0.000005),
    };
  }
}

// Usage:
const cache = new EdgeCache(env.CACHE);
// Estimated cost in USD based on Cloudflare pricing

# Full production build script
#!/bin/bash
set -e

echo "Building Rust Wasm..."
cd rust-wasm-core
wasm-pack build --target bundler --release
wasm-opt -Oz pkg/rust_wasm_core_bg.wasm -o pkg/rust_wasm_core_bg.wasm
cd ..

echo "Building React app..."
cd edge-app
npm run build

echo "Bundle analysis..."
npx vite-bundle-visualizer

echo "Deploying to Deno Deploy..."
cp -r ../rust-wasm-core/pkg-deno dist/
deployctl deploy --project=prod-edge-app --prod ../deno-server.ts

echo "Deploying to Cloudflare Workers..."
cd ../edge-worker
wrangler deploy --env production

echo "Running post-deploy checks..."
npx lighthouse https://your-domain.com --view

echo "✅ Deployment complete!"

// Debug wrapper for Wasm loading
async function loadWasmWithDiagnostics() {
  console.time('wasm-load');
  
  try {
    const wasmModule = await import('rust-wasm-core');
    console.timeEnd('wasm-load');
    
    // Check module size
    const response = await fetch('/rust_wasm_core_bg.wasm');
    const blob = await response.blob();
    console.log(`Wasm size: ${(blob.size / 1024).toFixed(2)} KB`);
    
    // Initialize
    wasmModule.init_panic_hook();
    
    return wasmModule;
  } catch (error) {
    console.error('Wasm load failed:', error);
    
    // Provide fallback
    console.warn('Using JavaScript fallback');
    return getJavaScriptFallback();
  }
}

// CORS-enabled edge worker
export default {
  async fetch(request: Request): Promise<Response> {
    // Handle preflight
    if (request.method === 'OPTIONS') {
      return new Response(null, {
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
          'Access-Control-Allow-Headers': 'Content-Type',
        },
      });
    }
    
    // ... your logic ...
    
    const response = new Response(result);
    response.headers.set('Access-Control-Allow-Origin', '*');
    return response;
  },
};

// Streaming Wasm compilation example
async function loadWasmStreaming() {
  const response = await fetch('/rust_wasm_core_bg.wasm');
  const { instance } = await WebAssembly.instantiateStreaming(response);
  return instance.exports;
}

// SIMD example (in Rust)
// Cargo.toml: packed_simd = "0.3"
use packed_simd::f32x4;

#[wasm_bindgen]
pub fn simd_sum(data: &[f32]) -> f32 {
    let mut sum = f32x4::splat(0.0);
    
    for chunk in data.chunks_exact(4) {
        let vec = f32x4::from_slice_unaligned(chunk);
        sum += vec;
    }
    
    sum.sum()
}

// Deno KV example
const kv = await Deno.openKv();

await kv.set(["users", "123"], { name: "Alice", score: 100 });
const result = await kv.get(["users", "123"]);

// Watch for changes (reactive edge state)
for await (const entries of kv.watch([["users", "123"]])) {
  console.log("User updated:", entries[0].value);
}