Full-Stack Web App

wendy init web-app --target wendyos --language rust --template fullstack --var APP_ID=web-app --var PORT=8000 --assistant skip --git-init no
cd web-app

wendy run

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"
import { AppSidebar } from "@/components/app-sidebar"
import { SiteHeader } from "@/components/site-header"
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"

import CameraPage from "@/pages/camera"
import AudioPage from "@/pages/audio"
import PersistencePage from "@/pages/persistence"
import GpuPage from "@/pages/gpu"
import SystemPage from "@/pages/system"

export default function App() {
  return (
    <BrowserRouter>
      <SidebarProvider
        style={
          {
            "--sidebar-width": "calc(var(--spacing) * 72)",
            "--header-height": "calc(var(--spacing) * 12)",
          } as React.CSSProperties
        }
      >
        <AppSidebar variant="inset" />
        <SidebarInset>
          <SiteHeader />
          <div className="flex flex-1 flex-col">
            <div className="@container/main flex flex-1 flex-col gap-2">
              <Routes>
                <Route path="/" element={<Navigate to="/camera" replace />} />
                <Route path="/camera" element={<CameraPage />} />
                <Route path="/audio" element={<AudioPage />} />
                <Route path="/persistence" element={<PersistencePage />} />
                <Route path="/gpu" element={<GpuPage />} />
                <Route path="/system" element={<SystemPage />} />
              </Routes>
            </div>
          </div>
        </SidebarInset>
      </SidebarProvider>
    </BrowserRouter>
  )
}

[package]
name = "web-app"
version = "0.1.0"
edition = "2021"

[dependencies]
axum = { version = "0.8.8", features = ["ws"] }
tokio = { version = "1", features = ["full"] }
serde = { version = "1", features = ["derive"] }
serde_json = "1"
rusqlite = { version = "0.32", features = ["bundled"] }
tower-http = { version = "0.6", features = ["fs", "trace"] }
gstreamer = "0.23"
gstreamer-app = "0.23"
futures-util = "0.3"

#[tokio::main]
async fn main() {
    gstreamer::init().expect("Failed to initialise GStreamer");

    let hostname = std::env::var("WENDY_HOSTNAME").unwrap_or_else(|_| "unknown".to_string());

    let (cam_tx, _) = broadcast::channel::<Vec<u8>>(16);
    let (aud_tx, _) = broadcast::channel::<Vec<u8>>(16);

    let state = AppState {
        db: Arc::new(Mutex::new(init_db())),
        camera: Arc::new(CameraSingleton(Mutex::new(GstCapture {
            pipeline: None,
            current_device: None,
            tx: cam_tx,
            client_count: 0,
        }))),
        audio: Arc::new(AudioSingleton(Mutex::new(GstCapture {
            pipeline: None,
            current_device: None,
            tx: aud_tx,
            client_count: 0,
        }))),
    };

    let api_routes = Router::new()
        .route("/api/cars", get(list_cars).post(create_car))
        .route(
            "/api/cars/{id}",
            get(get_car).put(update_car).delete(delete_car),
        )
        .route("/api/cameras", get(get_cameras))
        .route("/api/microphones", get(get_microphones))
        .route("/api/speakers", get(get_speakers))
        .route("/api/gpu", get(gpu_info))
        .route("/api/system", get(system_info))
        .route("/api/camera/stream", get(camera_ws_handler))
        .route("/api/audio/stream", get(audio_ws_handler))
        .with_state(state);

    let serve_dir = ServeDir::new("./static").fallback(ServeFile::new("./static/index.html"));

    let app = api_routes.fallback_service(serve_dir);

    let addr = "0.0.0.0:8000";
    eprintln!("Starting server on {addr} (hostname: {hostname})");

    let listener = tokio::net::TcpListener::bind(addr).await.unwrap();
    axum::serve(listener, app).await.unwrap();
}

# Stage 1: Build frontend
FROM node:22-slim AS frontend
WORKDIR /frontend
COPY frontend/package*.json ./
RUN npm install
COPY frontend/ .
RUN npm run build

# Stage 2: Build Rust backend
FROM rust:1.85-slim AS builder
RUN apt-get update && apt-get install -y --no-install-recommends \
    pkg-config \
    libgstreamer1.0-dev \
    libgstreamer-plugins-base1.0-dev \
    libgstreamer-plugins-bad1.0-dev \
    libsqlite3-dev \
    && rm -rf /var/lib/apt/lists/*
WORKDIR /app
COPY Cargo.toml ./
# Create a dummy main.rs so dependencies can be cached
RUN mkdir src && echo "fn main() {}" > src/main.rs
RUN cargo build --release || true
# Now copy the real source and build
COPY src ./src
RUN touch src/main.rs && cargo build --release

# Stage 3: Final image
FROM debian:bookworm-slim
RUN apt-get update && apt-get install -y --no-install-recommends \
    ca-certificates \
    gstreamer1.0-tools \
    gstreamer1.0-plugins-base \
    gstreamer1.0-plugins-good \
    gstreamer1.0-plugins-bad \
    gstreamer1.0-plugins-ugly \
    gstreamer1.0-libav \
    gstreamer1.0-alsa \
    libgstreamer1.0-0 \
    libgstreamer-plugins-base1.0-0 \
    alsa-utils \
    v4l-utils \
    sqlite3 \
    && rm -rf /var/lib/apt/lists/*
COPY --from=builder /app/target/release/web-app /usr/local/bin/web-app
COPY --from=frontend /frontend/dist ./static
EXPOSE 8000
CMD ["web-app"]

{
    "appId": "web-app",
    "platform": "linux",
    "version": "0.1.0",
    "entitlements": [
        {
            "type": "network",
            "mode": "host"
        },
        {
            "type": "camera"
        },
        {
            "type": "audio"
        },
        {
            "type": "gpu"
        },
        {
            "type": "persist",
            "name": "web-app-data",
            "path": "/data"
        }
    ],
    "readiness": {
        "tcpSocket": { "port": 8000 },
        "timeoutSeconds": 30
    },
    "hooks": {
        "postStart": {
            "cli": "wendy utils open-browser http://${WENDY_HOSTNAME}:8000"
        }
    }
}