landfall 0.6.4 → 0.6.5

package/dist/index.html

@@ -389,6 +389,7 @@ const S = {
   tab: "sites",
   overview: {},          // name -> {data} | {error} | {loading}
   firewall: {},
+  det: {},               // project folder -> what /api/fs detected there (null while reading, false if it failed)
   system: {},            // name -> {data: lf system --json}
   history: {},
   updates: {},
@@ -865,7 +866,7 @@ function dialog({ title, text = "", fields = [], ok = "OK", danger = false, onOk
     if (f.type === "textarea") return `<label>${esc(f.label)}<textarea id="${id}" name="${f.name}" placeholder="${esc(f.placeholder)}">${esc(f.value)}</textarea>${hint}</label>`;
     return `<label>${esc(f.label)}<input id="${id}" name="${f.name}" type="${f.type || "text"}" value="${esc(f.value)}" placeholder="${esc(f.placeholder)}" autocomplete="off" spellcheck="false">${hint}</label>`;
   };
-  const group = (f) => (f.legend ? `<fieldset><legend>${esc(f.legend)}</legend>${f.fields.map(field).join("")}</fieldset>` : field(f));
+  const group = (f) => (f.legend ? `<fieldset${f.id ? ` id="fs-${f.id}"` : ""}><legend>${esc(f.legend)}</legend>${f.fields.map(field).join("")}</fieldset>` : field(f));
   dlg.innerHTML = `<form method="dialog" novalidate>
     <h2 id="dlg-title">${esc(title)}</h2>
     ${text ? `<div class="text">${esc(text)}</div>` : ""}
@@ -948,6 +949,8 @@ function setupFlow(args, base = args) {
     server: args[0],
     after: (j) => {
       if (j.info.code !== 0) return;
+      // Synology and other systems without a package manager: nothing for setup to apply.
+      if (rep(j).refuse) return [{ label: "Back to the server", run: () => ((S.job = null), go(args[0], "sites")) }];
       if (rep(j).needsKey) {
         return [{ label: "Enter the password to install a key", run: () => passwordFor(args, base) }];
       }
@@ -1116,17 +1119,17 @@ function autoDomain(n, name) {
 const slugify = (s) => s.toLowerCase().replace(/\.(zip|tgz|tar(\.gz)?)$/, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "site";
 const tilde = (p) => p.replace(/^\/(Users|home)\/[^/]+/, "~");
 
-function describe(d) {
+function describe(d, before = true) {
   const built = d.build ? ` · builds with <code>${esc(d.build)}</code> first` : "";
   const what =
     d.kind === "compose" ? `Compose project <code>${esc(d.compose ?? "compose.yaml")}</code>: built and started on the server; x-landfall picks the routed service`
     : d.kind === "image" ? `Docker image <code>${esc(d.project?.image ?? "")}</code> (from .landfall.json)`
+    : d.kind === "dockerfile" && d.start ? `Node.js app${d.tool ? ` (${esc(d.tool)})` : ""}: built on the server${d.build ? ` with <code>${esc(d.build)}</code>` : ""}, started with <code>${esc(d.start)}</code> on port ${esc(d.port)}`
     : d.kind === "dockerfile" ? `Dockerfile: built on the server, served on port ${esc(d.port)}`
     : d.dir ? `Static files from <code>${esc(d.dir === "." ? "./" : d.dir + "/")}</code>${d.tool ? ` (where ${esc(d.tool)} builds the site)` : ""}${d.spa ? " (single-page app)" : ""}${built}`
     : d.build ? `Static site, built with <code>${esc(d.build)}</code> first`
     : `<span style="color:var(--warn)">No compose.yaml, Dockerfile, index.html or build script here.</span>`;
-  const before = d.project?.server ? ` <span class="dim">· deployed before to ${esc(d.project.server)}</span>` : "";
-  return what + before;
+  return what + (before && d.project?.server ? ` <span class="dim">· deployed before to ${esc(d.project.server)}</span>` : "");
 }
 
 /**
@@ -1142,6 +1145,8 @@ function deployDialog(det, o = {}) {
   const main = mainDomain(target);
   // A redeploy keeps the site's domains unless .landfall.json or the field names others.
   const keeps = re && !p?.domains ? re.domains : null;
+  // Static files or a Node.js app: what to build and run is landfall's to decide, and editable here.
+  const modal = det.kind === "static" || !!det.start;
   dialog({
     title: re ? `Redeploy ${name}` : `Deploy ${name}`,
     text: (o.upload ? `Uploaded ${plural(o.files ?? 0, "file")}. Not remembered: drop it again to redeploy.` : `From ${tilde(det.path)}${p ? " (settings from .landfall.json)" : ""}`)
@@ -1160,15 +1165,35 @@ function deployDialog(det, o = {}) {
           : "Empty: a free <name>.<ip>.sslip.io address, no DNS needed. Own domains need an A record pointing at the server.",
       },
       { name: "noDomain", label: "No domain: reach it through a tunnel only", type: "check", value: p?.domains ? !p.domains.length : re ? false : !!tunnelOnly(target), hint: "Nothing is served on the internet. Give it a domain later with Domains… on the site." },
-      ...(det.kind === "static"
+      ...(modal
         ? [
-            { name: "build", label: "Build command (runs here, before upload)", value: det.build ?? "", placeholder: "none" },
+            ...(det.node || det.start
+              ? [{ name: "mode", label: "Deploy as", type: "select", value: det.start ? "node" : "static", options: [{ value: "node", label: "Node.js app (runs on the server)" }, { value: "static", label: "Static files" }] }]
+              : []),
+            { name: "build", label: "Build command", value: det.build ?? "", placeholder: "none", hint: "Static files: runs here, before the upload. A Node.js app: runs on the server, in its image." },
             {
-              name: "dir", label: "Folder to publish", value: det.dir ?? ".", placeholder: ".",
-              hint: det.tool ? `Detected: ${det.tool} writes the site to ${det.dir}/ (it need not exist before the build).` : "Relative to the project; it needs an index.html after the build.",
+              legend: "Static files", id: "static",
+              fields: [
+                {
+                  name: "dir", label: "Folder to publish", value: det.dir ?? ".", placeholder: ".",
+                  hint: det.tool && !det.start ? `Detected: ${det.tool} writes the site to ${det.dir}/ (it need not exist before the build).` : "Relative to the project; it needs an index.html after the build.",
+                },
+                { name: "spa", label: "Single-page app (unknown paths serve index.html)", type: "check", value: !!p?.spa },
+              ],
+            },
+            {
+              legend: "Node.js app", id: "node",
+              fields: [
+                {
+                  name: "start", label: "Start command", value: det.start ?? "", placeholder: "node server.js",
+                  hint: `${det.start && det.tool ? `Detected: ${det.tool}. ` : ""}landfall writes the Dockerfile (install, build, start); lf init puts it into the project to change it.`,
+                },
+                { name: "port", label: "Port it listens on", value: String(det.port ?? 3000), hint: "The app gets it as PORT, with HOST=0.0.0.0." },
+              ],
             },
-            { name: "spa", label: "Single-page app (unknown paths serve index.html)", type: "check", value: !!p?.spa },
           ]
+        : det.kind === "dockerfile" || det.kind === "image"
+        ? [{ name: "port", label: "Port it listens on", value: String(det.port ?? 3000) }]
         : []),
       {
         legend: "Login (optional)",
@@ -1187,11 +1212,26 @@ function deployDialog(det, o = {}) {
       // The server's default would leave it unrouted though the box is unticked.
       if (!v.noDomain && !domains.length && !p?.domains?.length && !(keeps && n === re.name && v.server === re.server) && tunnelOnly(v.server)) return invalid("domains", `${v.server} gives new sites no domain: name one, or tick No domain`);
       const argv = ["deploy", "-y", ...sv(v.server), "-n", n, ...(v.noDomain ? ["--no-domain"] : domains.flatMap((d) => ["-d", d]))];
-      if (v.build?.trim() && v.build.trim() !== p?.build) argv.push("--build", v.build.trim());
-      if (v.spa && !p?.spa) argv.push("--spa");
-      const dir = v.dir?.trim().replace(/\/+$/, "") || ".";
-      if (det.kind === "static" && (/^[/-]/.test(dir) || dir.split("/").includes(".."))) return invalid("dir", "A folder inside the project");
-      if (det.kind === "static" && dir !== (det.dir ?? ".")) argv.push(dir);
+      const asNode = modal && (v.mode ?? (det.start ? "node" : "static")) === "node";
+      const build = v.build?.trim() ?? "";
+      if (asNode) {
+        const start = v.start.trim();
+        if (!start) return invalid("start", "How does the app start? For example: node server.js");
+        if (start !== det.start) argv.push("--start", start);
+        if (build !== (det.build ?? "")) argv.push("--build", build);
+      } else if (modal) {
+        if (det.start) argv.push("--static");
+        if (build && build !== p?.build) argv.push("--build", build);
+        if (v.spa && !p?.spa) argv.push("--spa");
+        const dir = v.dir.trim().replace(/\/+$/, "") || ".";
+        if (/^[/-]/.test(dir) || dir.split("/").includes("..")) return invalid("dir", "A folder inside the project");
+        if (dir !== (det.dir ?? ".")) argv.push(dir);
+      }
+      if (v.port !== undefined && (asNode || !modal)) {
+        const port = Number(v.port.trim());
+        if (!Number.isInteger(port) || port < 1 || port > 65535) return invalid("port", "A port from 1 to 65535");
+        if (port !== (det.port ?? 3000)) argv.push("--port", String(port));
+      }
       // The login counts once there is a password; the user defaults to admin.
       if (v.authPassword) {
         const user = v.authUser.trim() || "admin";
@@ -1204,6 +1244,20 @@ function deployDialog(det, o = {}) {
     },
   });
   noDomainToggle();
+  modeToggle();
+}
+
+/** The open dialog's "deploy as" picks which settings show: the static folder's or the Node.js app's. */
+function modeToggle() {
+  const mode = $("#f-mode"), stat = $("#fs-static"), node = $("#fs-node");
+  if (!stat || !node) return;
+  const sync = () => {
+    const asNode = mode?.value === "node";
+    stat.hidden = asNode;
+    node.hidden = !asNode;
+  };
+  mode?.addEventListener("change", sync);
+  sync();
 }
 
 /** The open dialog's "no domain" box greys out its domains field: ticked, the site gets none. */
@@ -1226,6 +1280,17 @@ async function browse(path) {
   return http(`/api/fs${path ? `?path=${encodeURIComponent(path)}` : ""}`);
 }
 
+/** What a site's folder holds and how it builds: detected once per folder, for the site details. */
+const detected = (path) => {
+  if (!(path in S.det)) (S.det[path] = null), browse(path).then((x) => ((S.det[path] = x.detected), render()), () => (S.det[path] = false));
+  return S.det[path];
+};
+/** Edit how a site builds and starts (build, start, port, static or Node.js), then redeploy. */
+const buildSettings = (path, site) => {
+  delete S.det[path];
+  browse(path).then((x) => deployDialog(x.detected, { site }), (e) => toast(e.message));
+};
+
 function deployHere() {
   browse(S.state.cwd).then((b) => deployDialog(b.detected), (e) => toast(e.message));
 }
@@ -1751,6 +1816,10 @@ function othersCard(n, o) {
 
 function sitesView(n, o) {
   ensureDns(n, o);
+  if (!o.ready && can(n) && !can(n).setup) {
+    return `<div class="card"><div class="body empty"><h2>Not ready for sites</h2>
+      <p>${esc(S.facts[n]?.data?.why?.setup ?? "")}, so landfall cannot set it up: sites need ${esc("/opt/landfall")} and Traefik, which setup creates.</p></div></div>`;
+  }
   if (!o.ready) {
     return `<div class="card"><div class="body empty"><h2>Not set up for landfall yet</h2>
       <p>Setup installs Docker and Traefik, a deploy user and (if you want) a firewall. It shows what it would change first.</p>
@@ -1793,6 +1862,7 @@ function sitesView(n, o) {
             ? { label: "Stop…", hint: "lf stop", run: () => confirmDlg({ title: `Stop ${x.service} of ${name}?`, text: "It stays stopped until you start it again.", ok: "Stop it", danger: true, onOk: () => run(["stop", name, x.service, ...sv(n)]) }) }
             : { label: "Start", hint: "lf start", run: () => run(["start", name, x.service, ...sv(n)]) },
         ], `${x.service} of ${name}`, "sm ghost");
+      const editBuild = () => buildSettings(proj.path, { server: n, name, domains: m.domains ?? [], old });
       const acts = [
         proj && !m.adopted
           ? btn("Redeploy", () => confirmDlg({ title: `Redeploy ${name}?`, text: `From ${tilde(proj.path)}${proj.kind === "static" ? " (runs its build first, if it has one)" : ""}.`, ok: "Deploy", onOk: () => run(["deploy", "-y", ...sv(n)], { server: n, cwd: proj.path, after: openAfter }) }), "sm primary", `lf deploy in ${proj.path}`)
@@ -1812,6 +1882,7 @@ function sitesView(n, o) {
           main ? { label: "Domains…", hint: "lf domains", run: () => domainsDialog(n, m) } : null,
           managed ? { label: m.auth?.length ? "Login…" : "Password…", hint: "lf auth", title: "Protect the site with a user and password", run: () => authDialog(n, m) } : null,
           managed ? { label: "Environment…", hint: "lf env", run: () => envDialog(n, name) } : null,
+          proj && !m.adopted ? { label: "Build settings…", hint: "lf deploy --build --start", title: "What it builds and starts with, its port, static or Node.js", run: editBuild } : null,
           "-",
           { label: m.adopted ? `Forget ${name}…` : `Delete ${name}…`, cls: "danger", hint: "lf sites rm", run: deleteSite },
         ], `More for ${name}`),
@@ -1819,6 +1890,7 @@ function sitesView(n, o) {
       const toggle = () => (open ? S.open.delete(`${n}/${name}`) : S.open.add(`${n}/${name}`), render());
       const live = m.releases?.find((r) => r.id === m.current);
       const svcDomains = (svc) => (svc === main ? m.domains : (live?.services?.find((x) => x.name === svc)?.domains ?? []));
+      const det = open && proj && !m.adopted ? detected(proj.path) : undefined;
       const detail = open
         ? `<tr class="detail"><td colspan="5"><dl class="kv">
             ${old ? `<dt>Old site</dt><dd class="dim">Deployed before sites were Compose projects: ${proj ? "redeploy it" : `run <span class="mono">lf deploy</span> for it`} once to manage it again.</dd>` : ""}
@@ -1829,6 +1901,7 @@ function sitesView(n, o) {
             ${m.adopted ? "" : `<dt>Source</dt><dd>${proj
               ? `<span class="mono">${esc(tilde(proj.path))}</span> <span class="dim">· redeploy runs there</span>`
               : `<span class="dim">not deployed from this machine${m.kind === "image" ? "" : " (or the folder moved): Redeploy… picks the folder"}</span>`}</dd>`}
+            ${det !== undefined ? `<dt>Build</dt><dd>${det ? `${describe(det, false)} ${btn("Edit…", editBuild, "sm ghost", "Build settings: lf deploy --build --start")}` : `<span class="faint">${det === false ? "cannot read its folder" : "reading its folder…"}</span>`}</dd>` : ""}
             <dt>Kind</dt><dd>${esc(kind)}${main || !managed ? "" : ` <span class="dim">· domains set in compose.yaml</span>`}</dd>
             ${managed ? `<dt>Login</dt><dd>${m.auth?.length ? `${esc(m.auth.map((a) => a.split(":")[0]).join(", "))} (basic auth)` : `<span class="dim">public</span>`}</dd>` : ""}
             <dt>Created</dt><dd>${esc(ago(m.createdAt))} · updated ${esc(ago(m.updatedAt))}</dd>
@@ -1913,6 +1986,10 @@ function refreshUpdates(n) {
   );
 }
 
+/** "24.0.2 → 29.9.2 · how to get it", or "· newest" when it is (and the newest is known). */
+const engineLine = (have, latest, old, how) =>
+  `<span class="mono">${esc(have)}</span>${old ? ` <span class="dim">→</span> <span class="mono">${esc(latest)}</span>${how ? ` <span class="faint">· ${esc(how)}</span>` : ""}` : latest ? ` <span class="faint">· newest</span>` : ""}`;
+
 function updatesView(n) {
   const st = S.updates[n] ?? { loading: true };
   if (st.loading && !st.data) return `<div class="loading"><span class="spin"></span> ${st.refreshing ? "refreshing package lists…" : "checking packages and images…"}</div>`;
@@ -1974,9 +2051,12 @@ function updatesView(n) {
       ${pkgOk ? "" : `<p class="dim">${esc(S.facts[n]?.data?.why?.packages ?? "")}</p>`}
     </div>`}
     ${!e.docker && can(n) && !can(n).docker ? "" : `<div class="card">
-      <h2>Docker <span class="badge ${!e.docker || e.dockerNote || e.composeNote ? "warn" : "ok"}">${e.docker ? `${esc(e.docker)} · compose ${esc(e.compose || "missing")}` : "not installed"}</span>
+      <h2>Docker <span class="badge ${!e.docker || e.dockerNote || e.composeNote ? "warn" : "ok"}">${!e.docker ? "not installed" : e.dockerNote || e.composeNote ? "update available" : "up to date"}</span>
         <span class="actions">${e.composeUpdate ? btn("Update compose", () => run(["update", "--compose", ...s, "-y"], { server: n }), "sm primary") : ""}</span></h2>
-      ${[e.dockerNote, e.composeNote].filter(Boolean).map((t) => `<p class="dim">${esc(t)}</p>`).join("")}
+      ${e.docker ? `<div class="body"><dl class="kv">
+        <dt>Docker</dt><dd>${engineLine(e.docker, e.latestDocker, e.dockerNote, e.dockerHow)}</dd>
+        <dt>Compose</dt><dd>${e.compose ? engineLine(e.compose, e.latestCompose, e.composeNote, e.composeHow) : `<span class="badge warn">missing</span> <span class="faint">lf setup installs it</span>`}</dd>
+      </dl></div>` : ""}
     </div>
     <div class="card">
       <h2>Images <span class="dim" style="font-weight:400">Traefik and sites</span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "landfall",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "description": "Set up servers and deploy sites behind Traefik with automatic HTTPS",
   "author": "ph1p <me@ph1p.dev>",
   "license": "MIT",