create-volt 0.5.0 → 0.8.0

package/templates/default/server.js

@@ -1,64 +1,213 @@
-// server.js — minimal dev server for a Volt app. Express serves the static
-// client and the index view; Socket.io carries the hot-reload signal; a file
-// watcher on views/ and public/ broadcasts a (debounced) reload on any save.
+// server.js — dev server with a built-in first-run setup wizard.
 //
-// Cross-platform: paths are resolved relative to this file, and the watcher
-// falls back to a manual recursive walk where native recursive fs.watch is
-// unavailable (older Linux Node builds).
+// First run (no .env) or `node server.js --edit` (-e) opens a disposable, local
+// config page; click Apply and it writes .env, loads it, and starts the app
+// in-process — then the setup page is gone. Normal runs just start the app.
 //
-//   npm run dev            # start the dev server
-//   PORT=4000 npm run dev  # override the port
+// No build step, no env-file flag: .env is auto-loaded below.
 
 import http from "node:http";
 import fs from "node:fs";
 import path from "node:path";
-import { fileURLToPath } from "node:url";
+import { spawn } from "node:child_process";
+import { fileURLToPath, pathToFileURL } from "node:url";
 import express from "express";
 import { Server as SocketServer } from "socket.io";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const PORT = Number(process.env.PORT) || 26628;
+const ENV_PATH = path.join(__dirname, ".env");
+const DEFAULT_PORT = 26628; // create-volt stamps this with the project's date-port
 
-const app = express();
-app.use(express.static(path.join(__dirname, "public")));
-app.get("/", (_req, res) => res.sendFile(path.join(__dirname, "views", "index.html")));
-
-const server = http.createServer(app);
-const io = new SocketServer(server);
+// --- tiny .env loader (no dependency); never overrides an existing env var ---
+function readEnvFile() {
+  const out = {};
+  if (!fs.existsSync(ENV_PATH)) return out;
+  for (const line of fs.readFileSync(ENV_PATH, "utf8").split("\n")) {
+    const m = line.match(/^\s*([A-Za-z0-9_]+)\s*=\s*(.*?)\s*$/);
+    if (m) out[m[1]] = m[2];
+  }
+  return out;
+}
+function loadEnv() {
+  for (const [k, v] of Object.entries(readEnvFile())) if (!(k in process.env)) process.env[k] = v;
+}
 
-// --- Hot reload: watch views/ + public/, debounce bursts, broadcast a reload ---
-const watchDirs = ["views", "public"].map((d) => path.join(__dirname, d));
-let timer = null;
-function onChange(file) {
-  clearTimeout(timer);
-  timer = setTimeout(() => {
-    console.log(`[volt] change: ${file ?? "?"} → reload`);
-    io.emit("volt:reload");
-  }, 80);
+// Which add-ons are present? (detected by their files, so the wizard only asks
+// for settings that actually apply.)
+function presentAddons() {
+  const has = (f) => fs.existsSync(path.join(__dirname, f));
+  return { db: has("lib/store.js"), auth: has("lib/auth.js"), mailer: has("lib/mailer.js"), realtime: has("lib/realtime.js") };
 }
 
-// Watch a directory recursively. Tries native recursive fs.watch first; if the
-// platform/runtime doesn't support it, walks the tree and watches each dir.
-function watchRecursive(dir) {
+// Open the default browser at `url` — but only when there's a desktop to open
+// it on. Headless / remote (no DISPLAY) just keeps the printed link. Opt out
+// with VOLT_NO_OPEN=1 or --no-open.
+function openBrowser(url) {
+  if (process.env.VOLT_NO_OPEN || process.argv.includes("--no-open")) return false;
+  const plat = process.platform;
+  if (plat === "linux" && !process.env.DISPLAY && !process.env.WAYLAND_DISPLAY) return false;
+  const cmd = plat === "darwin" ? "open" : plat === "win32" ? "cmd" : "xdg-open";
+  const args = plat === "win32" ? ["/c", "start", "", url] : [url];
   try {
-    fs.watch(dir, { recursive: true }, (_event, file) => onChange(file));
-    return;
+    const child = spawn(cmd, args, { stdio: "ignore", detached: true });
+    child.on("error", () => {}); // launcher missing (e.g. no xdg-open) emits async — don't crash
+    child.unref();
+    return true;
   } catch {
-    // Native recursive watch unsupported — fall back to per-directory watchers.
+    return false;
   }
-  const watchDir = (d) => {
+}
+
+// --- the actual app ---
+function startApp() {
+  const PORT = Number(process.env.PORT) || DEFAULT_PORT;
+  const app = express();
+  app.use(express.static(path.join(__dirname, "public")));
+  app.get("/", (_req, res) => res.sendFile(path.join(__dirname, "views", "index.html")));
+
+  const server = http.createServer(app);
+  const io = new SocketServer(server);
+
+  // hot reload: watch views/ + public/, debounce, broadcast a reload
+  let timer = null;
+  const onChange = (file) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      console.log(`[volt] change: ${file ?? "?"} → reload`);
+      io.emit("volt:reload");
+    }, 80);
+  };
+  const watchRecursive = (dir) => {
     try {
-      fs.watch(d, (_event, file) => onChange(file));
+      fs.watch(dir, { recursive: true }, (_e, f) => onChange(f));
+      return;
     } catch {
-      /* directory vanished between walk and watch — ignore */
-    }
-    for (const entry of fs.readdirSync(d, { withFileTypes: true })) {
-      if (entry.isDirectory()) watchDir(path.join(d, entry.name));
+      /* fall back to per-directory watchers */
     }
+    const w = (d) => {
+      try {
+        fs.watch(d, (_e, f) => onChange(f));
+      } catch {
+        /* ignore */
+      }
+      for (const e of fs.readdirSync(d, { withFileTypes: true })) if (e.isDirectory()) w(path.join(d, e.name));
+    };
+    w(dir);
   };
-  watchDir(dir);
+  for (const d of ["views", "public"]) watchRecursive(path.join(__dirname, d));
+
+  server.listen(PORT, () => console.log(`⚡ Volt → http://localhost:${PORT}`));
 }
 
-for (const dir of watchDirs) watchRecursive(dir);
+// --- the disposable setup wizard (localhost only) ---
+function startSetup() {
+  const PORT = Number(process.env.PORT) || DEFAULT_PORT;
+  const assets = {
+    "/setup.js": ["text/javascript; charset=utf-8", fs.readFileSync(path.join(__dirname, "setup", "setup.js"))],
+    "/volt.js": ["text/javascript; charset=utf-8", fs.readFileSync(path.join(__dirname, "public", "volt.js"))],
+  };
+  const indexHtml = fs.readFileSync(path.join(__dirname, "setup", "index.html"));
 
-server.listen(PORT, () => console.log(`⚡ Volt dev server → http://localhost:${PORT}`));
+  const server = http.createServer((req, res) => {
+    const u = new URL(req.url, "http://localhost");
+    const p = u.pathname;
+    if (req.method === "GET" && p === "/") {
+      res.setHeader("Content-Type", "text/html; charset=utf-8");
+      return res.end(indexHtml);
+    }
+    if (req.method === "GET" && assets[p]) {
+      res.setHeader("Content-Type", assets[p][0]);
+      return res.end(assets[p][1]);
+    }
+    if (req.method === "GET" && p === "/setup/state") {
+      res.setHeader("Content-Type", "application/json");
+      return res.end(JSON.stringify({ present: presentAddons(), current: readEnvFile(), defaultPort: DEFAULT_PORT }));
+    }
+    if (req.method === "POST" && p === "/setup/test-db") {
+      let body = "";
+      req.on("data", (c) => (body += c));
+      req.on("end", async () => {
+        const keys = ["DB_DRIVER", "MONGODB_URI", "MONGODB_DATABASE", "DATABASE_URL"];
+        const saved = Object.fromEntries(keys.map((k) => [k, process.env[k]]));
+        try {
+          const { env = {} } = JSON.parse(body);
+          for (const k of keys) {
+            if (env[k]) process.env[k] = env[k];
+            else delete process.env[k];
+          }
+          const { createStore } = await import(pathToFileURL(path.join(__dirname, "lib", "store.js")).href);
+          const store = await createStore();
+          await store.collection("__voltcheck").all(); // actually touch the connection
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({ ok: true, driver: store.name }));
+        } catch (e) {
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({ ok: false, error: e.message }));
+        } finally {
+          for (const k of keys) {
+            if (saved[k] == null) delete process.env[k];
+            else process.env[k] = saved[k];
+          }
+        }
+      });
+      return;
+    }
+    if (req.method === "POST" && p === "/setup/apply") {
+      let body = "";
+      req.on("data", (c) => (body += c));
+      req.on("end", () => {
+        try {
+          const { env } = JSON.parse(body);
+          if (typeof env !== "string") throw new Error("missing env");
+          fs.writeFileSync(ENV_PATH, env);
+          // The app binds process.env.PORT if it's already set (loadEnv won't
+          // override it), else the .env PORT, else the default — redirect there.
+          const envPort = Number((env.match(/^\s*PORT\s*=\s*(\d+)/m) || [])[1]);
+          const newPort = process.env.PORT ? Number(process.env.PORT) : envPort || DEFAULT_PORT;
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({ ok: true, port: newPort }));
+          console.log("[volt] saved .env — starting the app…");
+          res.on("finish", () => {
+            server.close(() => {
+              loadEnv();
+              startApp();
+            });
+            server.closeIdleConnections?.(); // drop the keep-alive socket so close() fires now
+          });
+        } catch (e) {
+          res.statusCode = 400;
+          res.end(JSON.stringify({ ok: false, error: e.message }));
+        }
+      });
+      return;
+    }
+    res.statusCode = 404;
+    res.end("not found");
+  });
+
+  // localhost-only: an unauthenticated write endpoint shouldn't be on the network
+  server.listen(PORT, "127.0.0.1", () => {
+    const url = `http://localhost:${PORT}`;
+    console.log(`\n⚡ Volt setup → ${url}`);
+    console.log("  Configure your app; it starts automatically on Apply. (reopen later: npm run dev -- --edit)");
+    const ssh = process.env.SSH_CONNECTION; // "clientIP clientPort serverIP serverPort"
+    if (ssh) {
+      const host = ssh.split(" ")[2];
+      const user = process.env.USER || process.env.USERNAME || "you";
+      console.log("  Remote box — the server is up here; bridge it from your LOCAL machine:");
+      console.log(`    ssh -N -L 127.0.0.1:${PORT}:localhost:${PORT} ${user}@${host}`);
+      console.log(`  …then open ${url} on your machine (the tunnel points it here).`);
+    }
+    console.log("");
+    if (openBrowser(url)) console.log("  (opening your browser…)\n");
+  });
+}
+
+// --- gate: setup on first run / --edit, otherwise the app ---
+const editMode = process.argv.includes("--edit") || process.argv.includes("-e");
+if (editMode || !fs.existsSync(ENV_PATH)) {
+  startSetup();
+} else {
+  loadEnv();
+  startApp();
+}

package/templates/default/setup/index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Set up your Volt app</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <style>
+    body { background: #0f1115; color: #e7e9ee; }
+    .accent { color: #ffd24a; }
+    .card-x { background: #161a22; border: 1px solid #232a36; border-radius: 14px; }
+    .form-control, .form-select { background: #0f1115; color: #e7e9ee; border-color: #232a36; }
+    .form-control:focus, .form-select:focus { background: #0f1115; color: #e7e9ee; border-color: #ffd24a; box-shadow: none; }
+    code { color: #ffd24a; }
+  </style>
+</head>
+<body>
+  <main class="container py-5" style="max-width: 640px;">
+    <header class="mb-4">
+      <h1 class="h3"><span class="accent">⚡ Set up your Volt app</span></h1>
+      <p class="text-muted mb-0">Fill these in and the app starts. This page is disposable — it disappears once you click Apply. Re-open it anytime with <code>npm run dev -- --edit</code>.</p>
+    </header>
+    <div id="app"></div>
+  </main>
+  <script type="module" src="/setup.js"></script>
+</body>
+</html>

package/templates/default/setup/setup.js

@@ -0,0 +1,121 @@
+// setup.js — the first-run / --edit settings wizard, built with Volt. Asks only
+// for the settings the present add-ons need, writes .env, then the app starts.
+import { signal, computed, html, mount } from "/volt.js";
+
+const { present, current, defaultPort } = await (await fetch("/setup/state")).json();
+
+const state = signal({
+  port: current.PORT || String(defaultPort),
+  dbDriver: current.DB_DRIVER || "memory",
+  mongoUri: current.MONGODB_URI || "",
+  mongoDb: current.MONGODB_DATABASE || "",
+  dbUrl: current.DATABASE_URL || "",
+  smtpUrl: current.SMTP_URL || "",
+  mailFrom: current.MAIL_FROM || "",
+});
+const set = (patch) => state({ ...state(), ...patch });
+const status = signal("");
+
+function genEnv(s) {
+  const out = [`PORT=${s.port}`];
+  if (present.db) {
+    out.push(`DB_DRIVER=${s.dbDriver}`);
+    if (s.dbDriver === "mongodb") {
+      out.push(`MONGODB_URI=${s.mongoUri}`);
+      if (s.mongoDb) out.push(`MONGODB_DATABASE=${s.mongoDb}`);
+    } else if (s.dbDriver === "mysql" || s.dbDriver === "postgres") {
+      out.push(`DATABASE_URL=${s.dbUrl}`);
+    }
+  }
+  if (present.mailer) {
+    if (s.smtpUrl) out.push(`SMTP_URL=${s.smtpUrl}`);
+    else out.push("# SMTP_URL=        # unset → emails print to the console");
+    if (s.mailFrom) out.push(`MAIL_FROM=${s.mailFrom}`);
+  }
+  return out.join("\n") + "\n";
+}
+const env = computed(() => genEnv(state()));
+
+async function apply() {
+  status("Saving & starting…");
+  try {
+    const r = await fetch("/setup/apply", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ env: env() }) });
+    const d = await r.json();
+    if (!d.ok) return status("Error: " + d.error);
+    status("Starting the app…");
+    const target = `http://localhost:${d.port}/`;
+    const go = async (n) => {
+      try {
+        await fetch(target, { mode: "no-cors" }); // app is listening
+        location.href = target;
+      } catch {
+        if (n > 0) setTimeout(() => go(n - 1), 400);
+        else location.href = target;
+      }
+    };
+    setTimeout(() => go(20), 500);
+  } catch {
+    status("Network error — try again.");
+  }
+}
+
+async function testDb() {
+  const s = state();
+  const env = { DB_DRIVER: s.dbDriver };
+  if (s.dbDriver === "mongodb") {
+    env.MONGODB_URI = s.mongoUri;
+    env.MONGODB_DATABASE = s.mongoDb;
+  } else if (s.dbDriver === "mysql" || s.dbDriver === "postgres") {
+    env.DATABASE_URL = s.dbUrl;
+  }
+  status("Testing connection…");
+  try {
+    const r = await fetch("/setup/test-db", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ env }) });
+    const d = await r.json();
+    status(d.ok ? `✓ Connected (${d.driver}).` : `✗ ${d.error}`);
+  } catch {
+    status("Network error testing connection.");
+  }
+}
+
+const field = (label, key, placeholder = "") =>
+  html`<div class="mb-2">
+    <label class="form-label small mb-1">${label}</label>
+    <input class="form-control" placeholder=${placeholder} value=${() => state()[key]} oninput=${(e) => set({ [key]: e.target.value })} />
+  </div>`;
+
+const dbSettings = () =>
+  html`<div class="mb-2">
+      <label class="form-label small mb-1">Database (DB_DRIVER)</label>
+      <select class="form-select" value=${() => state().dbDriver} onchange=${(e) => set({ dbDriver: e.target.value })}>
+        <option value="memory">memory (no setup)</option>
+        <option value="mongodb">mongodb</option>
+        <option value="mysql">mysql</option>
+        <option value="postgres">postgres</option>
+      </select>
+    </div>
+    ${() =>
+      state().dbDriver === "mongodb"
+        ? html`${field("MONGODB_URI", "mongoUri", "mongodb://user:pass@host:27017/db")}${field("MONGODB_DATABASE", "mongoDb", "db")}`
+        : state().dbDriver === "mysql" || state().dbDriver === "postgres"
+          ? field("DATABASE_URL", "dbUrl", state().dbDriver + "://user:pass@host/db")
+          : null}
+    ${() => (state().dbDriver !== "memory" ? html`<button class="btn btn-sm btn-outline-secondary mb-2" onclick=${testDb}>Test connection</button>` : null)}`;
+
+mount(
+  "#app",
+  html`<div class="card-x p-4 mb-3">
+    <h2 class="h6 mb-3">Settings</h2>
+    ${field("PORT", "port", String(defaultPort))}
+    ${() => (present.db ? dbSettings() : null)}
+    ${() => (present.mailer ? html`${field("SMTP_URL (optional)", "smtpUrl", "smtp://user:pass@smtp.host:587")}${field("MAIL_FROM", "mailFrom", "App <no-reply@you.com>")}` : null)}
+  </div>`,
+  html`<div class="card-x p-4 mb-3">
+    <div class="d-flex justify-content-between align-items-center mb-2">
+      <h2 class="h6 mb-0">.env</h2>
+      <button class="btn btn-primary btn-sm" onclick=${apply}>Apply & start →</button>
+    </div>
+    <pre class="mb-0" style="background:#0b0d11;border:1px solid #232a36;border-radius:10px;padding:12px;color:#cfe3ff;white-space:pre-wrap">${env}</pre>
+  </div>`,
+  () => (status() ? html`<p class="small accent">${status}</p>` : null),
+);

package/templates/guestbook/server.js

@@ -8,6 +8,7 @@
 // Run under PM2 in production:  pm2 start server.js --name guestbook ; pm2 log
 
 import http from "node:http";
+import fs from "node:fs";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import express from "express";
@@ -17,6 +18,17 @@ import { createMailer } from "./lib/mailer.js";
 import { createRouter } from "./router.js";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// Auto-load .env (no --env-file flag needed; works the same on Windows). Never
+// overrides a variable already set in the environment.
+const ENV_PATH = path.join(__dirname, ".env");
+if (fs.existsSync(ENV_PATH)) {
+  for (const line of fs.readFileSync(ENV_PATH, "utf8").split("\n")) {
+    const m = line.match(/^\s*([A-Za-z0-9_]+)\s*=\s*(.*?)\s*$/);
+    if (m && !(m[1] in process.env)) process.env[m[1]] = m[2];
+  }
+}
+
 const PORT = Number(process.env.PORT) || 26629;
 
 const store = await createStore();