@vevedh/create-feathers-app 0.0.0-stage → 0.1.0-rc.4

package/templates/daisyui-ssr/src/stores/notes.ts

@@ -0,0 +1,46 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { io, type Socket } from 'socket.io-client'
+export interface Note { id: number; title: string }
+const realtime = import.meta.env.VITE_FEATHERS_REALTIME === '1'
+export const useNotesStore = defineStore('notes', () => {
+  const notes = ref<Note[]>([])
+  const loading = ref(false)
+  const error = ref('')
+  const realtimeConnected = ref(false)
+  let socket: Socket | undefined
+  async function load(): Promise<void> {
+    try {
+      const response = await fetch('/api/notes', { headers: { Accept: 'application/json' } })
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+      const payload: unknown = await response.json()
+      if (!Array.isArray(payload)) throw new Error('Unexpected notes response')
+      notes.value = payload as Note[]
+      error.value = ''
+    }
+    catch (cause) { error.value = cause instanceof Error ? cause.message : 'API unavailable' }
+  }
+  async function create(title: string): Promise<void> {
+    if (loading.value || !title.trim()) return
+    loading.value = true
+    try {
+      const response = await fetch('/api/notes', {
+        method: 'POST', headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ title: title.trim() }),
+      })
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+      await load()
+    }
+    catch (cause) { error.value = cause instanceof Error ? cause.message : 'Create failed' }
+    finally { loading.value = false }
+  }
+  function connectRealtime(): void {
+    if (!realtime || typeof window === 'undefined' || socket) return
+    socket = io(window.location.origin, { path: '/socket.io', transports: ['websocket'] })
+    socket.on('connect', () => { realtimeConnected.value = true })
+    socket.on('disconnect', () => { realtimeConnected.value = false })
+    socket.on('notes created', () => { void load() })
+  }
+  function disconnectRealtime(): void { socket?.disconnect(); socket = undefined; realtimeConnected.value = false }
+  return { notes, loading, error, realtimeConnected, load, create, connectRealtime, disconnectRealtime }
+})

package/templates/daisyui-ssr/src/style.css

@@ -0,0 +1,5 @@
+@import "tailwindcss" source(none);
+@source "./";
+@source "../index.html";
+@plugin "daisyui";
+:root { font-family: ui-sans-serif, system-ui, sans-serif }

package/templates/daisyui-ssr/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/daisyui-ssr/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "compilerOptions": { "target": "ES2022", "lib": ["ES2022", "DOM", "DOM.Iterable"], "module": "ESNext", "moduleResolution": "Bundler", "types": ["vite/client"], "strict": true, "exactOptionalPropertyTypes": true, "noUncheckedIndexedAccess": true, "isolatedModules": true, "skipLibCheck": true, "noEmit": true, "jsx": "preserve" },
+  "include": ["src/**/*.ts", "src/**/*.vue", "vite.config.ts"]
+}

package/templates/daisyui-ssr/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
+export default defineConfig({ plugins: [vue(), tailwindcss()],
+  server: { host: '127.0.0.1', port: 5173, strictPort: true, proxy: { '/api': 'http://127.0.0.1:3030' } },
+  appType: 'custom',
+})

package/templates/quasar-ssr/.env.example

@@ -0,0 +1,11 @@
+# Do not copy production secrets here. HTTP API and edge listen on loopback.
+# WARNING: the unmodified plugin 0.2.6 Socket.IO app.listen(port) may bind all interfaces.
+# Use Socket.IO only on an isolated/firewalled lab until host binding is added.
+FEATHERS_ADAPTER=koa
+FEATHERS_SOCKETIO=0
+FEATHERS_API_PORT=3030
+FEATHERS_SOCKET_PORT=3031
+FEATHERS_EDGE_PORT=8080
+QUASAR_SSR_PORT=9100
+FEATHERS_PUBLIC_ORIGIN=http://127.0.0.1:8080
+VITE_FEATHERS_REALTIME=0

package/templates/quasar-ssr/api/server.mjs

@@ -0,0 +1,45 @@
+import { createServer } from 'node:http'
+import { createFeathersRuntime } from 'vite-plugin-feathersjs'
+const adapter = process.env.FEATHERS_ADAPTER === 'express' ? 'express' : 'koa'
+const port = Number(process.env.FEATHERS_API_PORT || 3030)
+const wsPort = Number(process.env.FEATHERS_SOCKET_PORT || 3031)
+const realtime = process.env.FEATHERS_SOCKETIO === '1'
+const origin = process.env.FEATHERS_PUBLIC_ORIGIN || 'http://127.0.0.1:8080'
+if (!Number.isInteger(port) || port < 1024 || port > 65535 || !Number.isInteger(wsPort) || wsPort === port) throw new Error('Invalid port configuration')
+const modules = [
+  new URL('./services/health/health.service.mjs', import.meta.url),
+  new URL('./services/notes/notes.service.mjs', import.meta.url),
+]
+const runtime = await createFeathersRuntime(modules.map(String), file => import(file), {
+  serviceFiles: [], adapter, prefix: '/api', cors: false,
+  socketio: realtime ? { port: wsPort, origins: [origin], host: '127.0.0.1' } : false,
+})
+await runtime.start()
+const httpServer = createServer((req, res) => {
+  const pathname = new URL(req.url || '/', 'http://localhost').pathname
+  if (pathname !== '/api' && !pathname.startsWith('/api/')) {
+    res.writeHead(404, { 'content-type': 'application/json' }); res.end('{"error":"Not found"}'); return
+  }
+  // The Feathers transport is mounted at /api, while its services register as health/notes.
+  req.url = (req.url || '/').slice(4) || '/'
+  runtime.handler(req, res, error => {
+    if (res.headersSent) { res.end(); return }
+    res.writeHead(500, { 'content-type': 'application/json' })
+    res.end(JSON.stringify({ error: 'Internal server error' }))
+    if (error) console.error('[feathers] request failed')
+  })
+})
+await new Promise((resolve, reject) => {
+  httpServer.once('error', reject)
+  httpServer.listen(port, '127.0.0.1', resolve)
+})
+console.log(`Feathers ${adapter} API listening on http://127.0.0.1:${port}/api (socketio=${realtime})`)
+let stopping = false
+async function close() {
+  if (stopping) return
+  stopping = true
+  await new Promise(resolve => httpServer.close(resolve))
+  await runtime.close()
+}
+process.on('SIGINT', () => { void close().then(() => process.exit(0)) })
+process.on('SIGTERM', () => { void close().then(() => process.exit(0)) })

package/templates/quasar-ssr/api/services/health/health.class.mjs

@@ -0,0 +1,3 @@
+export class HealthService {
+  async find() { return { status: 'ok', transport: 'feathers-v5' } }
+}

package/templates/quasar-ssr/api/services/health/health.service.mjs

@@ -0,0 +1,4 @@
+import { HealthService } from './health.class.mjs'
+export default function register(app) {
+  app.use('health', new HealthService(), { methods: ['find'] })
+}

package/templates/quasar-ssr/api/services/notes/notes.class.mjs

@@ -0,0 +1,25 @@
+import { NotFound, BadRequest } from '@feathersjs/errors'
+export class NotesService {
+  // Feathers v5 exposes service methods through its own service wrapper. The
+  // wrapper is not necessarily this class instance, so native #private slots
+  // cannot be read through an unbound method call. Bind to the owning instance.
+  // Keep this per-service-instance: never hoist records or IDs to module scope.
+  constructor() {
+    for (const name of ['find', 'get', 'create', 'patch', 'remove']) {
+      this[name] = this[name].bind(this)
+    }
+  }
+  #records = new Map([[1, { id: 1, title: 'Hello from FeathersJS v5' }]])
+  #nextId = 2
+  #id(value) { const n = Number(value); if (!Number.isSafeInteger(n) || n < 1) throw new BadRequest('Invalid note ID'); return n }
+  #title(value) {
+    const title = value?.title
+    if (typeof title !== 'string' || title.trim().length < 1 || title.length > 120) throw new BadRequest('Invalid note title')
+    return title.trim()
+  }
+  async find() { return [...this.#records.values()].map(note => ({ ...note })) }
+  async get(id) { const note = this.#records.get(this.#id(id)); if (!note) throw new NotFound('Note not found'); return { ...note } }
+  async create(data) { const note = { id: this.#nextId++, title: this.#title(data) }; this.#records.set(note.id, note); return { ...note } }
+  async patch(id, data) { const key = this.#id(id); if (!this.#records.has(key)) throw new NotFound('Note not found'); const note = { id: key, title: this.#title(data) }; this.#records.set(key, note); return { ...note } }
+  async remove(id) { const key = this.#id(id); const note = this.#records.get(key); if (!note) throw new NotFound('Note not found'); this.#records.delete(key); return { ...note } }
+}

package/templates/quasar-ssr/api/services/notes/notes.service.mjs

@@ -0,0 +1,10 @@
+import { NotesService } from './notes.class.mjs'
+export default function register(app) {
+  app.use('notes', new NotesService(), { methods: ['find', 'get', 'create', 'patch', 'remove'] })
+  const service = app.service('notes')
+  // Demo-only channel: keep the entire stack loopback-only.
+  if (typeof service.publish === 'function') {
+    app.on('connection', connection => app.channel('local-demo').join(connection))
+    service.publish(() => app.channel('local-demo'))
+  }
+}

package/templates/quasar-ssr/gitignore.template

@@ -0,0 +1,36 @@
+node_modules/
+.quasar/
+dist/
+.env
+.env.local
+*.log
+.DS_Store
+
+# Editor MCP configuration; local tooling, never committed
+.vscode/mcp.json
+.cursor/
+
+# Playwright Edge reports, traces, recordings and local screenshots
+playwright-report/
+test-results/
+docs-private/
+
+# Development-only configuration and internal artifacts
+.agents/
+.agent/
+.ai/
+.codex/
+.claude/
+.cursor/
+.gemini/
+.windsurf/
+.ecc/
+.mcp.json
+.vscode/mcp.json
+AGENTS.md
+SKILLS.md
+CLAUDE.md
+GEMINI.md
+*.prompt.md
+docs-private/
+.npmrc

package/templates/quasar-ssr/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="Console de certification Quasar SSR, FeathersJS v5 et Pinia">
+    <title>Quasar SSR / FeathersJS v5</title>
+  </head>
+  <body>
+    <!-- quasar:entry-point -->
+  </body>
+</html>

package/templates/quasar-ssr/quasar.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from '#q-app/wrappers'
+
+// Quasar CLI v2 (Vite): SSR owns its HTTP rendering process.
+// Feathers is a separate Node runtime using createFeathersRuntime from the plugin.
+export default defineConfig(() => ({
+  css: ['app.css'],
+  extras: [],
+  boot: [],
+  build: {
+    target: { browser: ['es2022', 'chrome115', 'firefox115'], node: 'node22' },
+    vueRouterMode: 'history',
+    typescript: { strict: true, vueShim: true },
+  },
+  devServer: { host: '127.0.0.1', port: 9100, open: false },
+  framework: { config: {}, plugins: [] },
+  ssr: {
+    prodPort: 9100,
+    middlewares: ['render'],
+    pwa: false,
+    extendPackageJson(pkg) {
+      // The Quasar-compiled dist/ssr/index.js imports serialize-javascript.
+      // pnpm does not hoist this transitive CLI dependency into this runtime.
+      pkg.dependencies ||= {}
+      pkg.dependencies['serialize-javascript'] ||= '^6.0.2'
+    },
+  },
+}))

package/templates/quasar-ssr/scripts/edge-proxy.mjs

@@ -0,0 +1,30 @@
+import { createServer, request } from 'node:http'
+import { connect } from 'node:net'
+import { selectTarget, targetConfig } from './edge-routing.mjs'
+const edgePort = Number(process.env.FEATHERS_EDGE_PORT || 8080)
+if (!Number.isInteger(edgePort) || edgePort < 1024 || edgePort > 65535) throw new Error('Invalid edge port')
+const proxy = createServer((req, res) => {
+  const path = new URL(req.url || '/', 'http://localhost').pathname
+  const upstream = targetConfig(selectTarget(path))
+  const forwarded = request({ ...upstream, method: req.method, path: req.url, headers: { ...req.headers, host: `127.0.0.1:${upstream.port}` } }, response => {
+    res.writeHead(response.statusCode || 502, response.headers)
+    response.pipe(res)
+  })
+  forwarded.on('error', () => { if (!res.headersSent) res.writeHead(502); res.end('Upstream unavailable') })
+  req.pipe(forwarded)
+})
+proxy.on('upgrade', (req, socket, head) => {
+  const path = new URL(req.url || '/', 'http://localhost').pathname
+  const upstream = targetConfig(selectTarget(path))
+  const peer = connect(upstream.port, upstream.hostname)
+  peer.on('connect', () => {
+    const requestLine = `${req.method || 'GET'} ${req.url} HTTP/1.1\r\n`
+    const headers = Object.entries(req.headers).map(([name, value]) => `${name}: ${Array.isArray(value) ? value.join(', ') : value}\r\n`).join('')
+    peer.write(requestLine + headers + '\r\n')
+    if (head.length) peer.write(head)
+    peer.pipe(socket).pipe(peer)
+  })
+  peer.on('error', () => socket.destroy())
+  socket.on('error', () => peer.destroy())
+})
+proxy.listen(edgePort, '127.0.0.1', () => console.log(`Local edge http://127.0.0.1:${edgePort} -> /api (3030), /socket.io (3031), SSR (9100)`))

package/templates/quasar-ssr/scripts/edge-routing.mjs

@@ -0,0 +1,14 @@
+// Small pure router, separately unit-tested; no client-controlled proxy target.
+export function selectTarget(pathname) {
+  if (pathname === '/api' || pathname.startsWith('/api/')) return 'api'
+  if (pathname === '/socket.io' || pathname.startsWith('/socket.io/')) return 'socket'
+  return 'ssr'
+}
+export function targetConfig(kind, env = process.env) {
+  if (!['api', 'socket', 'ssr'].includes(kind)) throw new TypeError('unknown target')
+  const port = Number(kind === 'api' ? (env.FEATHERS_API_PORT || 3030)
+    : kind === 'socket' ? (env.FEATHERS_SOCKET_PORT || 3031)
+    : (env.QUASAR_SSR_PORT || 9100))
+  if (!Number.isInteger(port) || port < 1024 || port > 65535) throw new Error('invalid target port')
+  return { hostname: '127.0.0.1', port }
+}

package/templates/quasar-ssr/src/App.vue

@@ -0,0 +1 @@
+<template><router-view /></template>

package/templates/quasar-ssr/src/css/app.css

@@ -0,0 +1,20 @@
+:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#18233a;background:#f5f7fc;font-synthesis:none}
+*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px}a{color:inherit;text-decoration:none}button,input{font:inherit}
+:focus-visible{outline:3px solid #8179f5;outline-offset:3px}
+.console-shell{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr)}
+.console-sidebar{background:#111c31;color:#e9eefc;display:flex;flex-direction:column;padding:27px 16px;min-width:0}
+.console-brand{display:flex;gap:11px;align-items:center;padding:3px 12px 30px}.brand-mark{height:38px;width:38px;display:grid;place-items:center;border-radius:12px;background:#7469e8;color:#fff;font-size:21px;font-weight:800;box-shadow:0 7px 22px #7469e855}.console-brand strong,.console-brand small{display:block}.console-brand strong{font-size:14px;letter-spacing:-.02em}.console-brand small{font-size:11px;color:#96a5c1;margin-top:3px}
+.sidebar-label{text-transform:uppercase;letter-spacing:.13em;font-size:10px;font-weight:800;color:#8090af;margin:9px 13px 14px}.sidebar-nav{display:grid;gap:4px}.sidebar-link{display:flex;align-items:center;gap:11px;border-radius:10px;padding:11px 13px;color:#b5c2d9;font-size:13px;font-weight:600;transition:background .15s,color .15s}.sidebar-link>span{font-size:18px;line-height:1;width:22px;text-align:center}.sidebar-link:hover,.sidebar-link:focus-visible{background:#233149;color:#fff}.sidebar-link.active{background:#303b66;color:#fff}.sidebar-foot{display:flex;gap:10px;align-items:flex-start;border-top:1px solid #2a354a;margin-top:auto;padding:24px 10px 4px}.sidebar-foot-icon{font-size:11px;color:#4bd9bd;padding-top:2px}.sidebar-foot strong,.sidebar-foot small{display:block}.sidebar-foot strong{font-size:11px;font-weight:700}.sidebar-foot small{font-size:10px;color:#9caac2;line-height:1.5;margin-top:4px}
+.console-workspace{min-width:0}.console-topbar{background:#fff;border-bottom:1px solid #e8ecf3;height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,4vw,54px);gap:14px}.breadcrumbs{color:#8b94a7;font-size:12px}.breadcrumbs span{padding:0 10px;color:#cbd1dc}.breadcrumbs strong{color:#26344e}.topbar-end{display:flex;align-items:center;gap:16px}.topbar-technology{color:#8793a9;font-size:12px}.environment-tag{background:#eaf9f2;border:1px solid #d5f2e5;color:#187b5c;font-size:11px;font-weight:800;padding:7px 11px;border-radius:99px}.environment-tag span{font-size:9px;margin-right:4px}
+.console-main{max-width:1440px;margin:auto;padding:43px clamp(22px,4vw,54px) 22px}.console-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:32px}.eyebrow{text-transform:uppercase;letter-spacing:.11em;color:#776dd1;font-weight:800;font-size:10px;margin:0 0 12px}.console-hero h1{font-size:clamp(26px,2.5vw,39px);max-width:830px;letter-spacing:-.045em;line-height:1.18;margin:0;color:#18233a;font-weight:790}.hero-intro{font-size:13px;line-height:1.75;max-width:740px;color:#718098;margin:13px 0 0}.hero-link{flex:none;background:#6259d9;color:#fff;border-radius:10px;padding:12px 17px;font-size:12px;font-weight:750;box-shadow:0 9px 22px #6259d921}.hero-link:hover{background:#5148c7}.hero-link span{margin-left:8px}
+.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:22px}.metric-card,.console-panel{border:1px solid #e4e9f3;box-shadow:0 3px 16px #18233a06;background:#fff;border-radius:16px}.metric-card{padding:21px 23px;min-height:156px}.metric-top{display:flex;align-items:center;justify-content:space-between;color:#748197;font-size:12px;font-weight:650}.metric-symbol{color:#736bcd;background:#f0eefc;border-radius:9px;width:31px;height:31px;display:grid;place-items:center;font-size:18px}.metric-value{display:block;font-size:32px;letter-spacing:-.04em;line-height:1.2;margin-top:15px;color:#162239}.metric-state{font-size:22px;margin-top:21px}.state-ok{color:#19805b}.state-error{color:#be3744}.state-checking{color:#756fb0}.metric-card p{font-size:11px;color:#8793a4;margin:7px 0 0}
+.console-content-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(285px,.85fr);gap:20px;align-items:start}.console-panel{padding:25px;min-width:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:23px}.panel-head .eyebrow{margin-bottom:8px}.panel-head h2{font-size:20px;letter-spacing:-.027em;margin:0;color:#1d2b43}.panel-head p:not(.eyebrow){color:#8190a6;font-size:11px;line-height:1.6;margin:7px 0 0}.panel-count{background:#eeecff!important;color:#5c52cd!important;padding:6px 9px;border-radius:7px;white-space:nowrap;font-weight:700}
+.note-form{display:flex;align-items:center;gap:12px;margin:18px 0 20px}.note-input-shell{flex:1;min-width:0}.note-input{width:100%;min-width:0}.note-input-placeholder{min-height:40px;display:flex;align-items:center;padding:0 12px;border:1px solid #d6dcea;border-radius:9px;color:#7d8aa0;background:#fff;font-size:12px}.note-input .q-field__control{border-radius:9px}.console-create{background:#6259d9!important;color:#fff!important;border-radius:9px!important;min-height:40px;padding:0 17px}.console-create:hover{background:#5148c7!important}.notes-list{border:1px solid #e7ebf3;border-radius:12px;overflow:hidden}.notes-item{min-height:66px}.notes-item:hover{background:#f8f9fc}.note-avatar{width:33px;height:33px;display:grid;place-items:center;background:#f2f0ff;border-radius:9px;color:#655dd1;font-size:21px;font-weight:800}.notes-feedback{padding:29px 16px;text-align:center;border:1px dashed #d4dbea;border-radius:12px;color:#78849a;font-size:12px}.console-error{margin-bottom:14px;background:#fff0f1;color:#9d2335;border:1px solid #ffd4da;border-radius:10px}
+.architecture-panel{padding-bottom:22px}.architecture-steps{list-style:none;padding:0;margin:0;display:grid;gap:0}.architecture-steps li{position:relative;display:flex;gap:15px;padding:14px 0;align-items:flex-start}.architecture-steps li+li{border-top:1px solid #eef1f6}.architecture-steps li>span{font-size:10px;font-weight:850;color:#675ed6;background:#f0eefe;border-radius:8px;padding:8px}.architecture-steps strong,.architecture-steps small{display:block}.architecture-steps strong{font-size:12px;color:#293751}.architecture-steps small{font-size:11px;color:#8793a5;margin-top:4px;line-height:1.5}.architecture-note{background:#f6f7fd;border:1px solid #eaedf6;border-radius:11px;display:flex;gap:10px;padding:12px 13px;margin-top:13px;color:#726ac9}.architecture-note p{color:#6c7991;font-size:10px;line-height:1.65;margin:0}.console-bottom{font-size:11px;color:#a1aabc;padding:24px 0;text-align:center}
+@media(max-width:1050px){.console-shell{grid-template-columns:205px minmax(0,1fr)}.console-content-grid{grid-template-columns:1fr}.console-sidebar{padding-left:10px;padding-right:10px}.console-main{padding-top:29px}}@media(max-width:700px){.console-shell{display:block}.console-sidebar{padding:10px 14px}.console-brand{padding:3px 4px 9px}.sidebar-label,.sidebar-foot{display:none}.sidebar-nav{display:flex;gap:6px;overflow:auto;padding-bottom:3px}.sidebar-link{font-size:11px;padding:8px 10px;white-space:nowrap}.sidebar-link>span{width:auto;font-size:14px}.console-topbar{height:58px;padding:0 20px}.topbar-technology{display:none}.console-main{padding:25px 18px}.console-hero{display:block}.hero-link{display:inline-flex;margin-top:19px}.metric-grid{grid-template-columns:1fr 1fr}.metric-card{padding:17px;min-height:137px}.metric-card:last-child{grid-column:1/-1}.note-form{flex-direction:column;align-items:stretch}.note-input-shell{width:100%}.console-create{width:100%}.console-panel{padding:19px}.panel-head{align-items:start;flex-wrap:wrap}}
+@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
+.not-found-page{min-height:100vh;display:grid;place-items:center;padding:25px}.not-found-card{background:#fff;border:1px solid #e5e9f3;border-radius:20px;box-shadow:0 20px 80px #24315012;padding:clamp(30px,5vw,65px);max-width:570px}.not-found-code{font-size:94px;font-weight:900;letter-spacing:-.09em;color:#e3dfff}.not-found-card h1{font-size:30px;letter-spacing:-.04em;margin:12px 0}.not-found-card p:not(.eyebrow){font-size:13px;color:#78869b;line-height:1.7;margin-bottom:29px}
+
+/* Certification feedback uses the underlying Socket.IO connection state. */
+.notes-panel-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
+.realtime-indicator { display: inline-flex; font-size: .75rem; line-height: 1.35; color: var(--q-secondary, #516070); }

package/templates/quasar-ssr/src/pages/IndexPage.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { onMounted, onServerPrefetch, onUnmounted, ref } from 'vue'
+import { useNotesStore } from '../stores/notes'
+
+const store = useNotesStore()
+const newTitle = ref('')
+const health = ref<'checking' | 'ok' | 'error'>('checking')
+const realtimeEnabled = import.meta.env.VITE_FEATHERS_REALTIME === '1'
+
+async function submit(): Promise<void> {
+  if (!newTitle.value.trim() || store.loading) return
+  try {
+    await store.create(newTitle.value)
+    newTitle.value = ''
+  }
+  catch { /* The store exposes the service error in its reactive state. */ }
+}
+
+async function checkHealth(): Promise<void> {
+  try {
+    const response = await fetch('/api/health', { headers: { Accept: 'application/json' } })
+    if (!response.ok) throw new Error(`HTTP ${response.status}`)
+    const body: unknown = await response.json()
+    health.value = typeof body === 'object' && body !== null && 'status' in body && body.status === 'ok' ? 'ok' : 'error'
+  }
+  catch { health.value = 'error' }
+}
+
+// Prefetch only into this request's Pinia instance. Never open a socket during SSR.
+onServerPrefetch(async () => { await store.load().catch(() => {}) })
+onMounted(() => {
+  if (!store.notes.length) void store.load().catch(() => {})
+  void checkHealth()
+  store.connectRealtime()
+})
+onUnmounted(() => store.disconnectRealtime())
+</script>
+
+<template>
+  <div class="console-shell">
+    <aside class="console-sidebar" aria-label="Navigation de la console">
+      <a class="console-brand" href="/" aria-label="Feathers Console — accueil">
+        <span class="brand-mark" aria-hidden="true">F</span>
+        <span><strong>Feathers Console</strong><small>Quasar SSR workspace</small></span>
+      </a>
+      <p class="sidebar-label">Espace de travail</p>
+      <nav class="sidebar-nav" aria-label="Navigation principale">
+        <a class="sidebar-link active" href="/" aria-current="page"><span aria-hidden="true">▦</span> Vue d'ensemble</a>
+        <a class="sidebar-link" href="#notes"><span aria-hidden="true">≡</span> Service notes</a>
+        <a class="sidebar-link" href="#architecture"><span aria-hidden="true">◇</span> Architecture</a>
+      </nav>
+      <div class="sidebar-foot">
+        <span class="sidebar-foot-icon" aria-hidden="true">●</span>
+        <div><strong>Environnement de certification</strong><small>API locale · données de démonstration</small></div>
+      </div>
+    </aside>
+
+    <div class="console-workspace">
+      <header class="console-topbar">
+        <div class="breadcrumbs">Laboratoire <span aria-hidden="true">/</span> <strong>Vue d'ensemble</strong></div>
+        <div class="topbar-end">
+          <span class="topbar-technology">Vite · Vue 3 · Pinia</span>
+          <span class="environment-tag"><span aria-hidden="true">●</span> SSR</span>
+        </div>
+      </header>
+
+      <main class="console-main">
+        <section class="console-hero" aria-labelledby="page-heading">
+          <div>
+            <p class="eyebrow">Vue d'ensemble / Intégration full stack</p>
+            <h1 id="page-heading">Quasar 2 SSR + FeathersJS v5 + Pinia</h1>
+            <p id="ssr-proof" class="hero-intro">Vue SSR : liste issue du service Feathers notes. Gérez des données via les services FeathersJS, avec une interface rendue côté serveur et hydratée côté navigateur.</p>
+          </div>
+          <a class="hero-link" href="#notes">Explorer le service <span aria-hidden="true">↗</span></a>
+        </section>
+
+        <section class="metric-grid" aria-label="État des services">
+          <article class="metric-card">
+            <div class="metric-top"><span>Enregistrements</span><span class="metric-symbol" aria-hidden="true">≡</span></div>
+            <strong class="metric-value" data-testid="notes-count">{{ store.notes.length }}</strong>
+            <p>Notes du service Feathers</p>
+          </article>
+          <article class="metric-card">
+            <div class="metric-top"><span>API REST</span><span class="metric-symbol" aria-hidden="true">⌁</span></div>
+            <strong class="metric-value metric-state" :class="`state-${health}`" data-testid="health-status">{{ health === 'ok' ? 'Disponible' : health === 'error' ? 'Indisponible' : 'Vérification…' }}</strong>
+            <p>Contrôle réel de /api/health</p>
+          </article>
+          <article class="metric-card">
+            <div class="metric-top"><span>Rendu</span><span class="metric-symbol" aria-hidden="true">◇</span></div>
+            <strong class="metric-value metric-state">SSR</strong>
+            <p>Quasar CLI avec Vite</p>
+          </article>
+        </section>
+
+        <div class="console-content-grid">
+          <section id="notes" class="console-panel" aria-labelledby="notes-heading">
+            <div class="panel-head">
+              <div><p class="eyebrow">Service Feathers / notes</p><h2 id="notes-heading">Registre des notes</h2><p>CRUD depuis le store Pinia, sans accès direct au transport dans cette page.</p></div>
+              <div class="notes-panel-badges">
+                <q-badge class="panel-count" :label="`${store.notes.length} élément(s)`" />
+                <span class="realtime-indicator" data-testid="realtime-status" role="status">
+                  {{ !realtimeEnabled ? 'Temps réel désactivé' : store.realtimeConnected ? 'Temps réel connecté' : 'Temps réel en attente' }}
+                </span>
+              </div>
+            </div>
+            <q-banner v-if="store.error" class="console-error" role="alert">{{ store.error }}</q-banner>
+            <form class="note-form" aria-label="Créer une note" @submit.prevent="submit">
+              <div class="note-input-shell">
+                <!-- Quasar QInput can generate a different inline caret style on the SSR server.
+                     Render only this interactive field after hydration; keep the notes and
+                     surrounding form server-rendered. Never silence hydration diagnostics. -->
+                <q-no-ssr>
+                  <q-input v-model="newTitle" data-testid="note-title-input" class="note-input" label="Titre de la nouvelle note" outlined dense maxlength="120" :disable="store.loading" />
+                  <template #placeholder>
+                    <div class="note-input-placeholder" aria-hidden="true">Titre de la nouvelle note</div>
+                  </template>
+                </q-no-ssr>
+              </div>
+              <q-btn class="console-create" label="Créer une note" type="submit" unelevated no-caps :loading="store.loading" :disable="!newTitle.trim() || store.loading" />
+            </form>
+            <div v-if="store.loading && store.notes.length === 0" class="notes-feedback" role="status">Chargement des notes…</div>
+            <div v-else-if="store.notes.length === 0" class="notes-feedback" role="status">Aucune note pour l'instant. Créez-en une pour vérifier le service.</div>
+            <q-list v-else class="notes-list" separator data-testid="notes">
+              <q-item v-for="note in store.notes" :key="note.id" class="notes-item">
+                <q-item-section avatar><span class="note-avatar" aria-hidden="true">≡</span></q-item-section>
+                <q-item-section><q-item-label>{{ note.title }}</q-item-label><q-item-label caption>Note #{{ note.id }}</q-item-label></q-item-section>
+                <q-item-section side><q-badge outline color="grey-7" label="Feathers" /></q-item-section>
+              </q-item>
+            </q-list>
+          </section>
+
+          <aside id="architecture" class="console-panel architecture-panel" aria-labelledby="architecture-heading">
+            <div class="panel-head"><div><p class="eyebrow">Architecture</p><h2 id="architecture-heading">Chaîne de données</h2><p>Responsabilités séparées et testables.</p></div></div>
+            <ol class="architecture-steps">
+              <li><span>01</span><div><strong>Vue 3 + Quasar</strong><small>Rendu HTML SSR / hydratation</small></div></li>
+              <li><span>02</span><div><strong>Store Pinia</strong><small>État réactif par requête SSR</small></div></li>
+              <li><span>03</span><div><strong>FeathersJS v5</strong><small>REST, services et Socket.IO optionnel</small></div></li>
+            </ol>
+            <div class="architecture-note"><span aria-hidden="true">ⓘ</span><p>Les données affichées proviennent du service actif. Les connexions temps réel ne démarrent qu'après hydratation.</p></div>
+          </aside>
+        </div>
+        <footer class="console-bottom">Feathers Console <span aria-hidden="true">·</span> Exemple de certification Quasar SSR</footer>
+      </main>
+    </div>
+  </div>
+</template>

package/templates/quasar-ssr/src/pages/NotFoundPage.vue

@@ -0,0 +1,11 @@
+<template>
+  <main class="not-found-page">
+    <div class="not-found-card">
+      <span class="not-found-code">404</span>
+      <p class="eyebrow">Navigation</p>
+      <h1>Cette page n'existe pas.</h1>
+      <p>Le laboratoire Quasar SSR reste accessible depuis son tableau de bord.</p>
+      <router-link class="hero-link" to="/">Retour à la console <span aria-hidden="true">↗</span></router-link>
+    </div>
+  </main>
+</template>

package/templates/quasar-ssr/src/router/index.ts

@@ -0,0 +1,8 @@
+import { route } from 'quasar/wrappers'
+import { createMemoryHistory, createRouter, createWebHistory } from 'vue-router'
+import routes from './routes'
+export default route(() => createRouter({
+  history: process.env.SERVER ? createMemoryHistory() : createWebHistory(),
+  routes,
+  scrollBehavior: () => ({ top: 0, left: 0 }),
+}))

package/templates/quasar-ssr/src/router/routes.ts

@@ -0,0 +1,6 @@
+import type { RouteRecordRaw } from 'vue-router'
+const routes: RouteRecordRaw[] = [
+  { path: '/', component: () => import('../pages/IndexPage.vue') },
+  { path: '/:catchAll(.*)*', component: () => import('../pages/NotFoundPage.vue') },
+]
+export default routes

package/templates/quasar-ssr/src/stores/index.ts

@@ -0,0 +1,4 @@
+import { store } from 'quasar/wrappers'
+import { createPinia } from 'pinia'
+// A new Pinia instance for each SSR render (no authenticated state global).
+export default store(() => createPinia())

package/templates/quasar-ssr/src/stores/notes.ts

@@ -0,0 +1,73 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { feathers } from '@feathersjs/feathers'
+import rest from '@feathersjs/rest-client'
+import socketioClient from '@feathersjs/socketio-client'
+import { io, type Socket } from 'socket.io-client'
+
+export interface Note { id: number; title: string }
+function baseUrl() {
+  return typeof window === 'undefined'
+    ? (process.env.FEATHERS_INTERNAL_URL || 'http://127.0.0.1:3030/api')
+    : `${window.location.origin}/api`
+}
+function createClient() {
+  const client = feathers()
+  client.configure(rest(baseUrl()).fetch(globalThis.fetch.bind(globalThis)))
+  return client
+}
+export const useNotesStore = defineStore('quasar-ssr-notes', () => {
+  const notes = ref<Note[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  const realtimeConnected = ref(false)
+  // Store instance is created in each Quasar SSR request.
+  // Socket connection is always browser-only and never persisted in Pinia state.
+  let socket: Socket | undefined
+  let removeListeners: (() => void) | undefined
+  async function load() {
+    loading.value = true
+    error.value = null
+    try {
+      const service = createClient().service('notes')
+      const result = await service.find() as Note[]
+      notes.value = result
+    } catch (cause) {
+      error.value = cause instanceof Error ? cause.message : 'API indisponible'
+      throw cause
+    } finally { loading.value = false }
+  }
+  async function create(title: string) {
+    if (!title.trim()) throw new Error('Le titre est obligatoire')
+    await createClient().service('notes').create({ title: title.trim() })
+    await load()
+  }
+  function connectRealtime() {
+    if (typeof window === 'undefined' || socket) return
+    if (import.meta.env.VITE_FEATHERS_REALTIME !== '1') return
+    const ws = io(window.location.origin, { path: '/socket.io', transports: ['websocket', 'polling'], autoConnect: false })
+    // Browser-only, per-store connection state. Neither socket nor listeners are serialized by SSR.
+    ws.on('connect', () => { realtimeConnected.value = true })
+    ws.on('disconnect', () => { realtimeConnected.value = false })
+    ws.on('connect_error', () => { realtimeConnected.value = false })
+    const realtimeClient = feathers()
+    realtimeClient.configure(socketioClient(ws))
+    const service = realtimeClient.service('notes')
+    const refresh = () => { void load().catch(() => {}) }
+    for (const event of ['created', 'patched', 'removed', 'updated']) service.on(event, refresh)
+    removeListeners = () => { for (const event of ['created', 'patched', 'removed', 'updated']) service.off(event, refresh) }
+    socket = ws
+    ws.connect()
+  }
+  function disconnectRealtime() {
+    removeListeners?.()
+    removeListeners = undefined
+    socket?.removeAllListeners('connect')
+    socket?.removeAllListeners('disconnect')
+    socket?.removeAllListeners('connect_error')
+    socket?.disconnect()
+    socket = undefined
+    realtimeConnected.value = false
+  }
+  return { notes, loading, error, realtimeConnected, load, create, connectRealtime, disconnectRealtime }
+})

package/templates/quasar-ssr/src-ssr/middlewares/render.ts

@@ -0,0 +1,15 @@
+import { ssrMiddleware } from 'quasar/wrappers'
+// Must remain the LAST middleware: all /api and Socket.IO are served by the edge proxy.
+export default ssrMiddleware(({ app, resolve, render, serve }) => {
+  app.get(resolve.urlPath('*'), (req, res) => {
+    res.setHeader('Content-Type', 'text/html; charset=utf-8')
+    void render({ req, res }).then(html => res.send(html)).catch((error: unknown) => {
+      const err = error as { code?: number; url?: string }
+      if (err.url) { res.redirect(err.code || 302, err.url); return }
+      if (err.code === 404) { res.status(404).send('Not found'); return }
+      // Avoid Quasar v2's verbose development error page (it can expose secrets).
+      // The CLI is pinned to v2 for Vite 7; never forward process.env or cookies.
+      res.status(500).send('Internal server error')
+    })
+  })
+})