update

docker-compose.yml

@@ -0,0 +1,18 @@
+version: "3.8"
+services:
+  web:
+    build:
+      context: ./web
+      dockerfile: Dockerfile
+    image: my-svelte-web:latest
+    container_name: web_static
+    ports:
+      - "10210:80"
+    volumes:
+      - caddy_data:/data
+      - caddy_config:/config
+    restart: unless-stopped
+
+volumes:
+  caddy_data:
+  caddy_config:

web/Caddyfile

@@ -0,0 +1,8 @@
+:80 {
+  root * /srv/web_build
+  try_files {path} /200.html
+  file_server
+
+  @health path /health
+  respond @health "ok" 200
+}

web/Dockerfile

@@ -0,0 +1,26 @@
+# Builder: build the SvelteKit static site (adapter-static -> /app/build)
+FROM node:20-alpine AS builder
+WORKDIR /app
+
+# cache package install
+COPY package.json package-lock.json* ./
+RUN npm ci --production=false
+
+# copy source and build
+COPY . .
+RUN npm run build
+
+# Final: lightweight Caddy image to serve the built static files
+FROM caddy:2-alpine AS runtime
+# copy built static output
+COPY --from=builder /app/build /srv/web_build
+# copy Caddyfile from build context (provide Caddyfile at ./web/Caddyfile)
+COPY Caddyfile /etc/caddy/Caddyfile
+# # ensure permissions (caddy runs as non-root)
+# RUN chown -R caddy:caddy /srv/web_build /etc/caddy/Caddyfile
+CMD ["caddy", "run", "--config", "/etc/caddy/Caddyfile"]
+
+# expose standard HTTP/HTTPS (optional in compose)
+EXPOSE 80
+
+# container runs Caddy by default (CMD provided by base image)

web/src/routes/+page.svelte

@@ -15,10 +15,9 @@
   onMount(async () => {
     setStatus('connecting');
     try {
-      const nc = await connect({ servers: 'wss://nats.yiem.cc' });
+      nc = await connect({ servers: 'wss://nats.yiem.cc' });
       setStatus('connected');
 
-      // closed() resolves when connection closes or errors
       nc.closed().then((err) => {
         if (err) {
           console.error('NATS closed with error:', err);
@@ -29,21 +28,37 @@
         }
       });
 
-      // optional: watch low-level disconnect/slow events via nc.transport
-      // (nats.js does not expose DOM events; rely on closed() and errors)
-
-      // create a subscription and responder
       const sc = StringCodec();
       const sub = nc.subscribe(SUBJECT);
+
       (async () => {
         for await (const m of sub) {
           try {
-            const raw = sc.decode(m.data);
-            const payload = JSON.parse(raw);
-            if (payload?.text) message = payload.text;
+            const raw = sc.decode(m.data || new Uint8Array());
+            // Defensive JSON parse
+            let payload;
+            try {
+              payload = JSON.parse(raw);
+            } catch (e) {
+              console.warn('received non-json payload', raw);
+              payload = null;
+            }
+
+            // If payload has text, update UI
+            if (payload && typeof payload.text === 'string') {
+              message = payload.text;
+            } else {
+              message = 'received invalid payload';
+            }
+
+            // Reply if requester supplied reply subject
             if (m.reply) {
-              await nc.publish(m.reply, sc.encode(JSON.stringify(payload)));
+              const replyPayload = { text: `displaying: ${payload && payload.text ? payload.text : 'invalid'}` };
+              await nc.publish(m.reply, sc.encode(JSON.stringify(replyPayload)));
               await nc.flush();
+              console.log('replied', replyPayload);
+            } else {
+              console.log('no reply subject, not replying');
             }
           } catch (e) {
             console.error('message handler error', e);
@@ -51,15 +66,6 @@
         }
       })();
 
-      // quick verify: publish a ping and see if there is no error
-      try {
-        await nc.publish(SUBJECT, sc.encode(JSON.stringify({ text: 'ping-from-client' })));
-        await nc.flush();
-        console.log('published ping');
-      } catch (e) {
-        console.error('publish error', e);
-      }
-
     } catch (err) {
       console.error('connect failed', err);
       setStatus('error');
@@ -79,7 +85,3 @@
   <div><strong>Message:</strong> {message}</div>
   <button on:click={disconnect} disabled={status !== 'connected'}>Disconnect</button>
 </main>
-
-
-
-

web/svelte.config.js

@@ -1,6 +1,12 @@
 import adapter from '@sveltejs/adapter-static';
-
 /** @type {import('@sveltejs/kit').Config} */
-const config = { kit: { adapter: adapter() } };
-
+const config = {
+  kit: {
+    adapter: adapter({
+      pages: 'build',
+      assets: 'build',
+      fallback: '200.html' // SPA fallback for all unknown paths
+    })
+  }
+};
 export default config;