Scaffold pinned Svelte frontend toolchain

Add a strict TypeScript and Vite workspace with reproducible Node, npm, and dependency versions plus Make targets for checking and building it.

Makefile

@@ -1,4 +1,4 @@
-.PHONY: check-dependencies check-fixture-lib mvp-up mvp-down mvp-build mvp-logs mvp-ps
+.PHONY: check-dependencies check-fixture-lib check-frontend build-frontend mvp-up mvp-down mvp-build mvp-logs mvp-ps
 
 COMPOSE := nerdctl compose -f deploy/docker-compose.yml
 
@@ -8,6 +8,12 @@ check-dependencies:
 check-fixture-lib:
 	./tests/kind/lib-test.sh
 
+check-frontend:
+	npm --prefix web run check
+
+build-frontend:
+	npm --prefix web run build
+
 mvp-build:
 	$(COMPOSE) build nuthatch
 

web/.gitignore

@@ -0,0 +1,4 @@
+dist/
+node_modules/
+.svelte-kit/
+*.log

web/.node-version

@@ -0,0 +1 @@
+24.18.0

web/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nuthatch</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

web/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "nuthatch-web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "packageManager": "[email protected]",
+  "engines": {
+    "node": "24.18.0",
+    "npm": "11.16.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "dev": "vite"
+  },
+  "dependencies": {
+    "svelte": "5.56.6"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "7.2.0",
+    "svelte-check": "4.7.3",
+    "typescript": "6.0.3",
+    "vite": "8.1.5"
+  }
+}

web/src/App.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  const stack: readonly string[] = ['Svelte 5', 'TypeScript', 'Vite'];
+</script>
+
+<svelte:head>
+  <meta
+    name="description"
+    content="Nuthatch provides browser access to personal and shared object storage."
+  />
+</svelte:head>
+
+<main>
+  <h1>Nuthatch</h1>
+  <p>Frontend scaffold ready.</p>
+  <ul aria-label="Frontend stack">
+    {#each stack as component}
+      <li>{component}</li>
+    {/each}
+  </ul>
+</main>
+
+<style>
+  :global(*) {
+    box-sizing: border-box;
+  }
+
+  :global(body) {
+    margin: 0;
+    min-width: 20rem;
+    background: #f4f1e8;
+    color: #252b24;
+    font-family:
+      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  }
+
+  main {
+    width: min(42rem, calc(100% - 2rem));
+    margin: 15vh auto 0;
+    padding: 2rem;
+    border: 1px solid #ced4c7;
+    border-radius: 1rem;
+    background: #fffef9;
+    box-shadow: 0 1rem 3rem rgb(61 72 55 / 10%);
+  }
+
+  h1 {
+    margin: 0;
+    font-size: clamp(2rem, 8vw, 4rem);
+    letter-spacing: -0.05em;
+  }
+
+  p {
+    font-size: 1.125rem;
+  }
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    padding: 0;
+    list-style: none;
+  }
+
+  li {
+    padding: 0.35rem 0.7rem;
+    border-radius: 999px;
+    background: #e4eadc;
+  }
+</style>

web/src/main.ts

@@ -0,0 +1,10 @@
+import { mount } from 'svelte';
+import App from './App.svelte';
+
+const target = document.getElementById('app');
+
+if (target === null) {
+  throw new Error('Missing application mount point');
+}
+
+mount(App, { target });

web/svelte.config.js

@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+export default {
+  preprocess: vitePreprocess()
+};

web/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.svelte", "vite.config.ts"]
+}

web/vite.config.ts

@@ -0,0 +1,15 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [svelte()],
+  build: {
+    manifest: true,
+    sourcemap: true
+  },
+  server: {
+    proxy: {
+      '/api': 'http://127.0.0.1:8080'
+    }
+  }
+});