robodev 0.1.0 → 0.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "robodev",
-  "version": "0.1.0",
-  "description": "CLI for Robodev Starbase — auth, link, and deploy file-based APIs",
+  "version": "0.2.0",
+  "description": "CLI for Robodev Starbase — create, auth, link, and deploy file-based APIs",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -14,7 +14,8 @@
   },
   "files": [
     "bin",
-    "src"
+    "src",
+    "template"
   ],
   "publishConfig": {
     "access": "public"

package/src/config.ts

@@ -10,6 +10,7 @@ export type Credentials = {
 export type ProjectLink = {
   projectId: string;
   apiUrl: string;
+  projectApiUrl?: string;
 };
 
 const PROD_URL = "https://robodev.povio.dev";
@@ -19,10 +20,7 @@ export function starbaseUrl(): string {
 }
 
 export function feUrl(): string {
-  return (process.env.STARBASE_FE_URL ?? process.env.STARBASE_URL ?? PROD_URL).replace(
-    /\/$/,
-    "",
-  );
+  return (process.env.STARBASE_FE_URL ?? process.env.STARBASE_URL ?? PROD_URL).replace(/\/$/, "");
 }
 
 export function credentialsPath(): string {
@@ -62,3 +60,19 @@ export async function readLink(cwd = process.cwd()): Promise<ProjectLink | null>
 export async function writeLink(link: ProjectLink, cwd = process.cwd()): Promise<void> {
   await writeFile(linkPath(cwd), `${JSON.stringify(link, null, 2)}\n`);
 }
+
+export async function writeViteApiUrl(projectApiUrl: string, cwd = process.cwd()): Promise<void> {
+  const envPath = join(cwd, ".env");
+  let content = "";
+  try {
+    content = await readFile(envPath, "utf8");
+  } catch {
+    content = "";
+  }
+  if (/^VITE_API_URL=/m.test(content)) {
+    content = content.replace(/^VITE_API_URL=.*$/m, `VITE_API_URL=${projectApiUrl}`);
+  } else {
+    content = `${content.replace(/\s*$/, "")}${content ? "\n" : ""}VITE_API_URL=${projectApiUrl}\n`;
+  }
+  await writeFile(envPath, content.endsWith("\n") ? content : `${content}\n`);
+}

package/src/index.ts

@@ -1,11 +1,12 @@
 import { createServer } from "node:http";
 import { randomBytes } from "node:crypto";
-import { readdir, readFile, stat } from "node:fs/promises";
+import { mkdir, readdir, readFile, stat, writeFile } from "node:fs/promises";
 import { createInterface } from "node:readline/promises";
 import { stdin, stdout } from "node:process";
-import { join, relative } from "node:path";
-import { execFile } from "node:child_process";
+import { basename, dirname, join, relative, resolve } from "node:path";
+import { execFile, spawn } from "node:child_process";
 import { promisify } from "node:util";
+import { fileURLToPath } from "node:url";
 import { ApiError, authed, publicRequest } from "./api.js";
 import {
   clearCredentials,
@@ -14,6 +15,7 @@ import {
   starbaseUrl,
   writeCredentials,
   writeLink,
+  writeViteApiUrl,
 } from "./config.js";
 
 const execFileAsync = promisify(execFile);
@@ -28,6 +30,7 @@ Commands:
   logout               Remove stored credentials
   whoami               Show the signed-in user
   projects             List your projects
+  create [path]        Create a project, scaffold the example app, and deploy
   link [projectId]     Write .robodev in the current folder
   deploy [--force]     Deploy database.ts and api/*.ts
 `);
@@ -171,8 +174,14 @@ async function runLink(projectId?: string): Promise<void> {
   if (!project) {
     throw new Error(`Project ${chosen} not found or not yours`);
   }
-  await writeLink({ projectId: project.id, apiUrl: starbaseUrl() });
+  await writeLink({
+    projectId: project.id,
+    apiUrl: starbaseUrl(),
+    projectApiUrl: project.apiUrl,
+  });
+  await writeViteApiUrl(project.apiUrl);
   console.log(`Linked ${process.cwd()} to ${project.id}`);
+  console.log(`Frontend API ${project.apiUrl}`);
 }
 
 async function collectFiles(root: string): Promise<{ path: string; content: string }[]> {
@@ -211,12 +220,12 @@ async function collectFiles(root: string): Promise<{ path: string; content: stri
   return files;
 }
 
-async function runDeploy(forceFlag: boolean): Promise<void> {
-  const link = await readLink();
+async function runDeploy(forceFlag: boolean, root = process.cwd()): Promise<void> {
+  const link = await readLink(root);
   if (!link) {
-    throw new Error("No .robodev file. Run `robodev link` first.");
+    throw new Error("No .robodev file. Run `robodev link` or `robodev create` first.");
   }
-  const files = await collectFiles(process.cwd());
+  const files = await collectFiles(root);
   let force = forceFlag;
 
   for (;;) {
@@ -287,6 +296,111 @@ async function runDeploy(forceFlag: boolean): Promise<void> {
   }
 }
 
+function templateRoot(): string {
+  return join(dirname(fileURLToPath(import.meta.url)), "..", "template");
+}
+
+function projectNameFromPath(root: string): string {
+  const base = basename(root).trim();
+  if (!base || base === "." || base === "/") return "my-project";
+  return base.slice(0, 80);
+}
+
+function packageNameFromPath(root: string): string {
+  const slug = projectNameFromPath(root)
+    .toLowerCase()
+    .replace(/[^a-z0-9._-]+/g, "-")
+    .replace(/^[-.]+|[-.]+$/g, "");
+  return slug || "robodev-app";
+}
+
+async function assertCreatable(root: string): Promise<void> {
+  for (const file of ["package.json", "database.ts", ".robodev"]) {
+    try {
+      await stat(join(root, file));
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code === "ENOENT") continue;
+      throw error;
+    }
+    throw new Error(`Refusing to overwrite ${join(root, file)}`);
+  }
+}
+
+async function copyTemplate(from: string, to: string, vars: Record<string, string>): Promise<void> {
+  await mkdir(to, { recursive: true });
+  const entries = await readdir(from, { withFileTypes: true });
+  for (const entry of entries) {
+    const src = join(from, entry.name);
+    const dest = join(to, entry.name);
+    if (entry.isDirectory()) {
+      await copyTemplate(src, dest, vars);
+      continue;
+    }
+    let content = await readFile(src, "utf8");
+    for (const [key, value] of Object.entries(vars)) {
+      content = content.replaceAll(`{{${key}}}`, value);
+    }
+    await writeFile(dest, content);
+  }
+}
+
+async function npmInstall(root: string): Promise<void> {
+  console.log("Installing npm packages…");
+  await new Promise<void>((resolve, reject) => {
+    const child = spawn("npm", ["install"], { cwd: root, stdio: "inherit" });
+    child.on("error", reject);
+    child.on("exit", (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`npm install failed (${code})`));
+    });
+  });
+}
+
+async function runCreate(pathArg?: string): Promise<void> {
+  const root = resolve(process.cwd(), pathArg ?? ".");
+  await mkdir(root, { recursive: true });
+  await assertCreatable(root);
+
+  const name = projectNameFromPath(root);
+  const project = await authed<Project>("/v1/projects", {
+    method: "POST",
+    body: JSON.stringify({ name }),
+  });
+
+  await copyTemplate(templateRoot(), root, {
+    NAME: name,
+    PACKAGE_NAME: packageNameFromPath(root),
+  });
+  await writeLink(
+    {
+      projectId: project.id,
+      apiUrl: starbaseUrl(),
+      projectApiUrl: project.apiUrl,
+    },
+    root,
+  );
+  await writeViteApiUrl(project.apiUrl, root);
+
+  console.log(`Created ${name} (${project.id}) in ${root}`);
+  await runDeploy(false, root);
+
+  try {
+    await npmInstall(root);
+  } catch (error) {
+    console.log(error instanceof Error ? error.message : error);
+    console.log("Run `npm install` in the project folder, then `npm run dev`.");
+    return;
+  }
+
+  const displayPath = relative(process.cwd(), root) || ".";
+  console.log("");
+  console.log("Next:");
+  if (displayPath !== ".") {
+    console.log(`  cd ${displayPath}`);
+  }
+  console.log("  npm run dev");
+}
+
 async function main(): Promise<void> {
   const [command, ...args] = process.argv.slice(2);
   switch (command) {
@@ -303,6 +417,9 @@ async function main(): Promise<void> {
     case "projects":
       await runProjects();
       break;
+    case "create":
+      await runCreate(args.find((arg) => !arg.startsWith("-")));
+      break;
     case "link":
       await runLink(args[0]);
       break;

package/template/README.md

@@ -0,0 +1,17 @@
+# {{NAME}}
+
+Example Robodev app: a `space` database (`planets`, `rockets`), APIs in `api/`, and a small React UI.
+
+The backend is already on Starbase. Run the frontend:
+
+```bash
+npm run dev
+```
+
+It reads `VITE_API_URL` from `.env` (written by `robodev create` / `robodev link`).
+
+Add tables in `database.ts` and routes as `api/<name>.ts`, then:
+
+```bash
+npx robodev deploy
+```

package/template/api/health.ts

@@ -0,0 +1,6 @@
+import { defineApi, z } from "robodev-lib";
+
+export const get = defineApi({
+  response: z.object({ ok: z.literal(true) }),
+  handler: async () => ({ ok: true as const }),
+});

package/template/api/launch.ts

@@ -0,0 +1,28 @@
+import { rockets } from "../database";
+import { defineApi, eq, z } from "robodev-lib";
+
+const Rocket = z.object({
+  id: z.string(),
+  name: z.string(),
+  destinationId: z.string(),
+  launched: z.boolean(),
+});
+
+export const post = defineApi({
+  body: z.object({
+    id: z.string().uuid(),
+  }),
+  response: Rocket,
+  handler: async ({ db, body }) => {
+    const rows = await db
+      .update(rockets)
+      .set({ launched: true })
+      .where(eq(rockets.id, body.id))
+      .returning();
+    const row = rows[0];
+    if (!row) {
+      throw new Error("Rocket not found");
+    }
+    return Rocket.parse(row);
+  },
+});

package/template/api/planets.ts

@@ -0,0 +1,59 @@
+import { planets, rockets } from "../database";
+import { defineApi, z } from "robodev-lib";
+
+const EARTH = "11111111-1111-1111-1111-111111111111";
+const MARS = "22222222-2222-2222-2222-222222222222";
+const KEPLER = "33333333-3333-3333-3333-333333333333";
+const VOYAGER = "44444444-4444-4444-4444-444444444444";
+const ODYSSEY = "55555555-5555-5555-5555-555555555555";
+
+const Planet = z.object({
+  id: z.string(),
+  name: z.string(),
+  climate: z.string(),
+  moons: z.coerce.number(),
+});
+
+export const get = defineApi({
+  response: z.array(Planet),
+  handler: async ({ db }) => {
+    const existing = await db.select().from(planets).limit(1);
+    if (existing.length === 0) {
+      try {
+        await db.insert(planets).values([
+          { id: EARTH, name: "Earth", climate: "temperate", moons: 1 },
+          { id: MARS, name: "Mars", climate: "arid", moons: 2 },
+          { id: KEPLER, name: "Kepler-452b", climate: "unknown", moons: 0 },
+        ]);
+        await db.insert(rockets).values([
+          { id: VOYAGER, name: "Voyager", destinationId: MARS, launched: false },
+          { id: ODYSSEY, name: "Odyssey", destinationId: KEPLER, launched: true },
+        ]);
+      } catch {
+        // First request won the seed race.
+      }
+    }
+    const rows = await db.select().from(planets);
+    return Planet.array().parse(rows);
+  },
+});
+
+export const post = defineApi({
+  body: z.object({
+    name: z.string().min(1),
+    climate: z.string().min(1),
+    moons: z.coerce.number().int().min(0).default(0),
+  }),
+  response: Planet,
+  handler: async ({ db, body }) => {
+    const [row] = await db
+      .insert(planets)
+      .values({
+        name: body.name,
+        climate: body.climate,
+        moons: body.moons,
+      })
+      .returning();
+    return Planet.parse(row);
+  },
+});

package/template/api/rockets.ts

@@ -0,0 +1,42 @@
+import { rockets } from "../database";
+import { defineApi, eq, z } from "robodev-lib";
+
+const Rocket = z.object({
+  id: z.string(),
+  name: z.string(),
+  destinationId: z.string(),
+  launched: z.boolean(),
+});
+
+export const get = defineApi({
+  query: z.object({
+    destinationId: z.string().optional(),
+  }),
+  response: z.array(Rocket),
+  handler: async ({ db, query }) => {
+    const rows = query.destinationId
+      ? await db.select().from(rockets).where(eq(rockets.destinationId, query.destinationId))
+      : await db.select().from(rockets);
+    return Rocket.array().parse(rows);
+  },
+});
+
+export const post = defineApi({
+  body: z.object({
+    name: z.string().min(1),
+    destinationId: z.string().uuid(),
+    launched: z.boolean().optional(),
+  }),
+  response: Rocket,
+  handler: async ({ db, body }) => {
+    const [row] = await db
+      .insert(rockets)
+      .values({
+        name: body.name,
+        destinationId: body.destinationId,
+        launched: body.launched ?? false,
+      })
+      .returning();
+    return Rocket.parse(row);
+  },
+});

package/template/database.ts

@@ -0,0 +1,23 @@
+import { boolean, defineDatabase, integer, pgTable, text, timestamp, uuid } from "robodev-lib";
+
+export const planets = pgTable("planets", {
+  id: uuid("id").primaryKey().defaultRandom(),
+  name: text("name").notNull(),
+  climate: text("climate").notNull(),
+  moons: integer("moons").default(0),
+});
+
+export const rockets = pgTable("rockets", {
+  id: uuid("id").primaryKey().defaultRandom(),
+  name: text("name").notNull(),
+  destinationId: uuid("destinationId")
+    .notNull()
+    .references(() => planets.id, { onDelete: "cascade" }),
+  launched: boolean("launched").default(false),
+  createdAt: timestamp("createdAt", { withTimezone: true }).defaultNow(),
+});
+
+export default defineDatabase({
+  name: "space",
+  tables: { planets, rockets },
+});

package/template/index.html

@@ -0,0 +1,138 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{NAME}}</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        --bg: #12141a;
+        --panel: #1b1e27;
+        --line: #2c3140;
+        --text: #ece8df;
+        --muted: #9a9488;
+        --accent: #d4a15a;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        margin: 0;
+        min-height: 100vh;
+        background: var(--bg);
+        color: var(--text);
+        font:
+          15px/1.5 ui-sans-serif,
+          system-ui,
+          sans-serif;
+      }
+      main {
+        max-width: 920px;
+        margin: 0 auto;
+        padding: 32px 20px 64px;
+      }
+      h1 {
+        font-size: 28px;
+        font-weight: 600;
+        letter-spacing: -0.03em;
+        margin: 0 0 6px;
+      }
+      .lede {
+        color: var(--muted);
+        margin: 0 0 28px;
+      }
+      .grid {
+        display: grid;
+        gap: 20px;
+        grid-template-columns: 1fr;
+      }
+      @media (min-width: 760px) {
+        .grid {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+      section {
+        background: var(--panel);
+        border: 1px solid var(--line);
+        border-radius: 10px;
+        padding: 18px;
+      }
+      h2 {
+        margin: 0 0 14px;
+        font-size: 16px;
+        font-weight: 600;
+      }
+      ul {
+        list-style: none;
+        margin: 0 0 16px;
+        padding: 0;
+      }
+      li {
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+        align-items: baseline;
+        padding: 10px 0;
+        border-top: 1px solid var(--line);
+      }
+      li:first-child {
+        border-top: 0;
+        padding-top: 0;
+      }
+      .meta {
+        color: var(--muted);
+        font-size: 13px;
+      }
+      form {
+        display: grid;
+        gap: 8px;
+      }
+      label {
+        display: grid;
+        gap: 4px;
+        font-size: 12px;
+        color: var(--muted);
+      }
+      input,
+      select,
+      button {
+        font: inherit;
+        color: var(--text);
+      }
+      input,
+      select {
+        background: var(--bg);
+        border: 1px solid var(--line);
+        border-radius: 6px;
+        padding: 8px 10px;
+      }
+      button {
+        background: var(--accent);
+        color: #1a140b;
+        border: 0;
+        border-radius: 6px;
+        padding: 8px 12px;
+        font-weight: 600;
+        cursor: pointer;
+      }
+      button.ghost {
+        background: transparent;
+        color: var(--accent);
+        border: 1px solid var(--accent);
+      }
+      button:disabled {
+        opacity: 0.5;
+        cursor: default;
+      }
+      .error {
+        color: #e08b8b;
+        margin: 0 0 16px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "{{PACKAGE_NAME}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "deploy": "robodev deploy"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "robodev-lib": "^0.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.24",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^4.7.0",
+    "robodev": "^0.2.0",
+    "typescript": "^5.9.2",
+    "vite": "^6.3.5"
+  }
+}

package/template/src/main.tsx

@@ -0,0 +1,227 @@
+import { StrictMode, useEffect, useState, type FormEvent } from "react";
+import { createRoot } from "react-dom/client";
+
+type Planet = { id: string; name: string; climate: string; moons: number };
+type Rocket = { id: string; name: string; destinationId: string; launched: boolean };
+
+const apiUrl = import.meta.env.VITE_API_URL as string | undefined;
+
+async function request<T>(path: string, init?: RequestInit): Promise<T> {
+  if (!apiUrl) {
+    throw new Error("Missing VITE_API_URL. Run `robodev create` or `robodev link`.");
+  }
+  const res = await fetch(`${apiUrl}${path}`, {
+    ...init,
+    headers: { "Content-Type": "application/json", ...init?.headers },
+  });
+  if (!res.ok) {
+    throw new Error((await res.text()) || `${res.status} ${path}`);
+  }
+  return res.json() as Promise<T>;
+}
+
+function App() {
+  const [planets, setPlanets] = useState<Planet[]>([]);
+  const [rockets, setRockets] = useState<Rocket[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+  const [planetForm, setPlanetForm] = useState({ name: "", climate: "", moons: "0" });
+  const [rocketForm, setRocketForm] = useState({ name: "", destinationId: "" });
+
+  async function refresh() {
+    const nextPlanets = await request<Planet[]>("/planets");
+    const nextRockets = await request<Rocket[]>("/rockets");
+    setPlanets(nextPlanets);
+    setRockets(nextRockets);
+    setRocketForm((form) => ({
+      ...form,
+      destinationId: form.destinationId || nextPlanets[0]?.id || "",
+    }));
+  }
+
+  useEffect(() => {
+    void refresh().catch((err: unknown) =>
+      setError(err instanceof Error ? err.message : "Failed to load"),
+    );
+  }, []);
+
+  async function onAddPlanet(event: FormEvent) {
+    event.preventDefault();
+    setPending(true);
+    setError(null);
+    try {
+      await request("/planets", {
+        method: "POST",
+        body: JSON.stringify({
+          name: planetForm.name,
+          climate: planetForm.climate,
+          moons: Number(planetForm.moons),
+        }),
+      });
+      setPlanetForm({ name: "", climate: "", moons: "0" });
+      await refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not add planet");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  async function onAddRocket(event: FormEvent) {
+    event.preventDefault();
+    setPending(true);
+    setError(null);
+    try {
+      await request("/rockets", {
+        method: "POST",
+        body: JSON.stringify({
+          name: rocketForm.name,
+          destinationId: rocketForm.destinationId,
+        }),
+      });
+      setRocketForm((form) => ({ ...form, name: "" }));
+      await refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not add rocket");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  async function onLaunch(id: string) {
+    setPending(true);
+    setError(null);
+    try {
+      await request("/launch", {
+        method: "POST",
+        body: JSON.stringify({ id }),
+      });
+      await refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not launch");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  const planetName = (id: string) => planets.find((planet) => planet.id === id)?.name ?? id;
+
+  return (
+    <main>
+      <h1>{"{{NAME}}"}</h1>
+      <p className="lede">
+        React frontend talking to your Starbase APIs at {apiUrl ?? "(not linked)"}.
+      </p>
+      {error ? <p className="error">{error}</p> : null}
+
+      <div className="grid">
+        <section>
+          <h2>Planets</h2>
+          <ul>
+            {planets.map((planet) => (
+              <li key={planet.id}>
+                <div>
+                  <strong>{planet.name}</strong>
+                  <div className="meta">
+                    {planet.climate} · {planet.moons} {planet.moons === 1 ? "moon" : "moons"}
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+          <form onSubmit={onAddPlanet}>
+            <label>
+              Name
+              <input
+                required
+                value={planetForm.name}
+                onChange={(event) => setPlanetForm({ ...planetForm, name: event.target.value })}
+              />
+            </label>
+            <label>
+              Climate
+              <input
+                required
+                value={planetForm.climate}
+                onChange={(event) => setPlanetForm({ ...planetForm, climate: event.target.value })}
+              />
+            </label>
+            <label>
+              Moons
+              <input
+                type="number"
+                min={0}
+                value={planetForm.moons}
+                onChange={(event) => setPlanetForm({ ...planetForm, moons: event.target.value })}
+              />
+            </label>
+            <button type="submit" disabled={pending}>
+              Add planet
+            </button>
+          </form>
+        </section>
+
+        <section>
+          <h2>Rockets</h2>
+          <ul>
+            {rockets.map((rocket) => (
+              <li key={rocket.id}>
+                <div>
+                  <strong>{rocket.name}</strong>
+                  <div className="meta">
+                    {planetName(rocket.destinationId)} · {rocket.launched ? "launched" : "on pad"}
+                  </div>
+                </div>
+                {rocket.launched ? null : (
+                  <button
+                    className="ghost"
+                    type="button"
+                    disabled={pending}
+                    onClick={() => onLaunch(rocket.id)}
+                  >
+                    Launch
+                  </button>
+                )}
+              </li>
+            ))}
+          </ul>
+          <form onSubmit={onAddRocket}>
+            <label>
+              Name
+              <input
+                required
+                value={rocketForm.name}
+                onChange={(event) => setRocketForm({ ...rocketForm, name: event.target.value })}
+              />
+            </label>
+            <label>
+              Destination
+              <select
+                required
+                value={rocketForm.destinationId}
+                onChange={(event) =>
+                  setRocketForm({ ...rocketForm, destinationId: event.target.value })
+                }
+              >
+                {planets.map((planet) => (
+                  <option key={planet.id} value={planet.id}>
+                    {planet.name}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <button type="submit" disabled={pending || planets.length === 0}>
+              Add rocket
+            </button>
+          </form>
+        </section>
+      </div>
+    </main>
+  );
+}
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/template/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["vite/client"]
+  },
+  "include": ["./**/*.ts", "./**/*.tsx"]
+}

package/template/vite.config.ts

@@ -0,0 +1,7 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+  server: { port: 5173 },
+});