Full-Stack Web App

wendy init web-app --target wendyos --language node --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>
      {/* ...sidebar layout... */}
      <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>
    </BrowserRouter>
  )
}

cd frontend
npm install
npm run build
cd ..

{
    "name": "web-app",
    "version": "0.1.0",
    "type": "module",
    "scripts": {
        "build": "tsc",
        "start": "node dist/index.js",
        "dev": "tsx watch src/index.ts"
    },
    "dependencies": {
        "express": "^4",
        "ws": "^8",
        "better-sqlite3": "^11"
    },
    "devDependencies": {
        "@types/express": "^5",
        "@types/ws": "^8",
        "@types/better-sqlite3": "^7",
        "@types/node": "^22",
        "typescript": "^5.7",
        "tsx": "^4"
    },
    "engines": {
        "node": ">=22"
    }
}

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "NodeNext",
        "moduleResolution": "NodeNext",
        "outDir": "./dist",
        "rootDir": "./src",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "declaration": true
    },
    "include": ["src"]
}

import express, { Request, Response } from "express";
import { createServer } from "http";
import Database from "better-sqlite3";

const PORT = 8000;
const WENDY_HOSTNAME = process.env.WENDY_HOSTNAME ?? "localhost";
const DB_PATH = "/data/cars.db";

const db = new Database(DB_PATH);
db.pragma("journal_mode = WAL");
db.exec(`
    CREATE TABLE IF NOT EXISTS cars (
        id         INTEGER PRIMARY KEY AUTOINCREMENT,
        make       TEXT    NOT NULL,
        model      TEXT    NOT NULL,
        color      TEXT    NOT NULL,
        year       INTEGER NOT NULL,
        created_at TEXT    NOT NULL DEFAULT (datetime('now')),
        updated_at TEXT
    )
`);

const app = express();
app.use(express.json());

app.get("/api/cars", (_req: Request, res: Response) => {
    res.json(listCars.all());
});

app.post("/api/cars", (req: Request, res: Response) => {
    const { make, model, color, year } = req.body;
    const info = insertCar.run({ make, model, color, year });
    res.status(201).json(getCar.get(info.lastInsertRowid));
});

// ...more routes, plus static serving + SPA fallback...

// Wrap the Express app in an HTTP server so the camera/audio
// WebSocket streams can share the same port.
const server = createServer(app);

server.listen(PORT, () => {
    console.log(`Server running on http://${WENDY_HOSTNAME}:${PORT}`);
});

npm install
npm run build

# Stage 1 — Build React 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 backend TypeScript
FROM node:22-slim AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY tsconfig.json ./
COPY src/ ./src/
RUN npm run build

# Stage 3 — Production runtime
FROM node:22-slim
WORKDIR /app

# Install GStreamer, ALSA, v4l-utils, and native build tools for better-sqlite3
RUN apt-get update && apt-get install -y --no-install-recommends \
    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 \
    alsa-utils \
    v4l-utils \
    python3 \
    make \
    g++ \
    && rm -rf /var/lib/apt/lists/*

# Install production dependencies (rebuilds better-sqlite3 native addon)
COPY package*.json ./
RUN npm install --omit=dev

# Copy compiled backend and frontend assets
COPY --from=builder /app/dist ./dist
COPY --from=frontend /frontend/dist ./static

EXPOSE 8000
CMD ["node", "dist/index.js"]

{
    "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"
        }
    }
}