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

package/templates/quasar-ssr/src-ssr/server.ts

@@ -0,0 +1,42 @@
+// @quasar/app-vite v2 SSR lifecycle: serveStaticContent configures the Express app.
+// This runtime is independent of the development-only Vite Feathers plugin.
+import express from 'express'
+import {
+  ssrCreate, ssrListen, ssrClose, ssrServeStaticContent, ssrRenderPreloadTag,
+} from 'quasar/wrappers'
+
+export const create = ssrCreate(() => {
+  const app = express()
+  app.disable('x-powered-by')
+  return app
+})
+
+// Quasar CLI v2 does not pass `isReady` to ssrListen.
+// The CLI provides an optional HTTPS development app; bind only to loopback.
+export const listen = ssrListen(({ app, devHttpsApp, port }) => {
+  const server = devHttpsApp || app
+  return server.listen(port, '127.0.0.1')
+})
+
+export const close = ssrClose(({ listenResult }) => new Promise<void>((resolve, reject) => {
+  listenResult.close((error: Error | undefined) => error ? reject(error) : resolve())
+}))
+
+const maxAge = process.env.DEV ? 0 : 86_400_000
+// Quasar v2 calls this once with { app, resolve }; return a function to mount
+// public assets. The old `(path, opts) => express.static(path)` signature was
+// removed in app-vite 2 and raised `root path must be a string` at runtime.
+export const serveStaticContent = ssrServeStaticContent(({ app, resolve }) => {
+  return ({ urlPath = '/', pathToServe = '.', opts = {} }) => {
+    const publicFolder = resolve.public(pathToServe)
+    const url = resolve.urlPath(urlPath)
+    app.use(url, express.static(publicFolder, { maxAge, ...opts }))
+  }
+})
+
+export const renderPreloadTag = ssrRenderPreloadTag((file) => {
+  if (/\.js$/.test(file)) return `<link rel="modulepreload" href="${file}" crossorigin>`
+  if (/\.css$/.test(file)) return `<link rel="stylesheet" href="${file}">`
+  if (/\.woff2?$/.test(file)) return `<link rel="preload" href="${file}" as="font" crossorigin>`
+  return ''
+})

package/templates/quasar-ssr/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./.quasar/tsconfig.json",
+  "compilerOptions": { "strict": true, "skipLibCheck": true }
+}

package/templates/spa/common/.env.example

@@ -0,0 +1,8 @@
+# Local demonstration only. No secrets or private addresses.
+FEATHERS_ADAPTER=koa
+FEATHERS_API_PORT=3030
+FEATHERS_SOCKET_PORT=3031
+FEATHERS_SOCKETIO=0
+VITE_FEATHERS_REALTIME=0
+FEATHERS_PUBLIC_ORIGIN=http://127.0.0.1:5173
+FEATHERS_PREVIEW_ORIGIN=http://127.0.0.1:4173

package/templates/spa/common/api/server.mjs

@@ -0,0 +1,46 @@
+import { createServer } from 'node:http'
+import { createFeathersRuntime } from '@vevedh/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:5173'
+const previewOrigin = process.env.FEATHERS_PREVIEW_ORIGIN || 'http://127.0.0.1:4173'
+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: [...new Set([origin, previewOrigin])], 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/spa/common/api/services/health/health.class.mjs

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

package/templates/spa/common/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/spa/common/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/spa/common/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/spa/common/gitignore.template

@@ -0,0 +1,39 @@
+node_modules/
+dist/
+.env*
+!.env.example
+*.log
+coverage/
+test-results/
+playwright-report/
+.agents/
+AGENTS.md
+SKILLS.md
+*.prompt.md
+.ai/
+.codex/
+.cursor/
+.claude/
+.mcp.json
+.vscode/mcp.json
+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/spa/common/index.html

@@ -0,0 +1,3 @@
+<!doctype html>
+<html lang="fr"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>R17 Feathers Console</title><meta name="r17-example" content="__R17_CASE__"><link rel="icon" href="data:,"></head>
+<body><div id="app"></div><script type="module" src="/src/main.ts"></script></body></html>

package/templates/spa/common/src/components/NotesPanel.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useNotesStore } from '../stores/notes'
+const store = useNotesStore()
+const title = ref('')
+onMounted(() => { void store.load(); store.connectRealtime() })
+onUnmounted(() => store.disconnectRealtime())
+async function submit() {
+  await store.create(title.value)
+  if (!store.error) title.value = ''
+}
+</script>
+<template>
+  <section aria-labelledby="notes-heading" class="notes-panel">
+    <h2 id="notes-heading">Service Feathers : notes</h2>
+    <p data-testid="realtime-status">{{ store.realtimeConnected ? 'Temps réel connecté' : 'REST actif' }}</p>
+    <p v-if="store.error" role="alert">{{ store.error }}</p>
+    <form @submit.prevent="submit"><label for="note-title">Nouvelle note</label>
+      <input id="note-title" v-model="title" aria-label="Titre de la nouvelle note" maxlength="120" required />
+      <button type="submit" :disabled="store.loading || !title.trim()">Créer une note</button>
+    </form>
+    <p data-testid="notes-count">{{ store.notes.length }} note(s)</p>
+    <ul data-testid="notes"><li v-for="note in store.notes" :key="note.id">{{ note.title }}</li></ul>
+  </section>
+</template>

package/templates/spa/common/src/stores/notes.ts

@@ -0,0 +1,105 @@
+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'
+
+function isNote(value: unknown): value is Note {
+  if (typeof value !== 'object' || value === null || Array.isArray(value)) return false
+  const record = value as Record<string, unknown>
+  return typeof record.id === 'number' && Number.isSafeInteger(record.id) && record.id > 0
+    && typeof record.title === 'string' && record.title.length <= 120
+}
+
+export const useNotesStore = defineStore('notes', () => {
+  const notes = ref<Note[]>([])
+  const loading = ref(false)
+  const error = ref('')
+  const apiAvailable = ref(false)
+  const apiChecked = ref(false)
+  const online = ref(typeof navigator === 'undefined' ? true : navigator.onLine)
+  const realtimeConnected = ref(false)
+  let socket: Socket | undefined
+
+  function explainError(cause: unknown): string {
+    if (!online.value) return 'Hors ligne : l’interface reste disponible, mais les notes nécessitent la connexion à l’API.'
+    if (cause instanceof Error && /^HTTP (404|502|503)$/.test(cause.message)) {
+      return 'API Feathers indisponible. En prévisualisation, lancer aussi le serveur API local (pnpm run dev:api).'
+    }
+    return 'Connexion à l’API impossible. Vérifier le serveur Feathers et le proxy /api.'
+  }
+
+  async function load(): Promise<void> {
+    if (!online.value) {
+      apiAvailable.value = false
+      apiChecked.value = true
+      error.value = explainError(new Error('offline'))
+      return
+    }
+    try {
+      const response = await fetch('/api/notes', {
+        headers: { Accept: 'application/json' }, cache: 'no-store',
+      })
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+      const payload: unknown = await response.json()
+      if (!Array.isArray(payload) || !payload.every(isNote)) throw new Error('Invalid notes response')
+      notes.value = payload
+      apiAvailable.value = true
+      error.value = ''
+    } catch (cause: unknown) {
+      apiAvailable.value = false
+      error.value = explainError(cause)
+    } finally {
+      apiChecked.value = true
+    }
+  }
+
+  async function create(title: string): Promise<void> {
+    const value = title.trim()
+    if (loading.value || !apiAvailable.value || !online.value || value.length < 1 || value.length > 120) return
+    loading.value = true
+    try {
+      const response = await fetch('/api/notes', {
+        method: 'POST', headers: { 'content-type': 'application/json', Accept: 'application/json' },
+        cache: 'no-store', body: JSON.stringify({ title: value }),
+      })
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+      await load()
+    } catch (cause: unknown) {
+      apiAvailable.value = false
+      error.value = explainError(cause)
+      // Never retry POST automatically: the server may have created the note.
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function setConnectivity(connected: boolean): void {
+    online.value = connected
+    if (!connected) {
+      apiAvailable.value = false
+      error.value = explainError(new Error('offline'))
+      socket?.disconnect()
+      realtimeConnected.value = false
+    } else {
+      void load()
+      socket?.connect()
+    }
+  }
+
+  function connectRealtime(): void {
+    if (!realtime || typeof window === 'undefined' || socket || !online.value) 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, apiAvailable, apiChecked, online,
+    realtimeConnected, load, create, setConnectivity, connectRealtime, disconnectRealtime }
+})

package/templates/spa/common/src/vite-env.d.ts

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

package/templates/spa/common/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/spa/daisyui/src/App.vue

@@ -0,0 +1,2 @@
+<script setup lang="ts">import NotesPanel from './components/NotesPanel.vue'</script>
+<template><main class="min-h-screen bg-base-200 p-6"><div class="max-w-4xl mx-auto space-y-6"><header class="navbar bg-base-100 rounded-box px-6"><div class="text-xl font-bold">Feathers Console — daisyUI SPA</div></header><h1 class="text-3xl font-semibold">Vue 3, daisyUI et FeathersJS v5</h1><p>Le service Feathers est exécuté dans un processus séparé.</p><NotesPanel /></div></main></template>

package/templates/spa/daisyui/src/components/NotesPanel.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useNotesStore } from '../stores/notes'
+const store = useNotesStore()
+const title = ref('')
+const onOnline = (): void => { store.setConnectivity(true) }
+const onOffline = (): void => { store.setConnectivity(false) }
+onMounted(() => {
+  void store.load()
+  store.connectRealtime()
+  window.addEventListener('online', onOnline)
+  window.addEventListener('offline', onOffline)
+})
+onUnmounted(() => {
+  store.disconnectRealtime()
+  window.removeEventListener('online', onOnline)
+  window.removeEventListener('offline', onOffline)
+})
+async function submit(): Promise<void> {
+  await store.create(title.value)
+  if (!store.error) title.value = ''
+}
+</script>
+<template>
+  <section class="card bg-base-100 border border-base-300 shadow-lg"><div class="card-body">
+    <h2 class="card-title">Notes FeathersJS</h2>
+    <span class="badge badge-outline" data-testid="realtime-status" role="status" aria-live="polite">{{ !store.online ? 'Hors ligne' : !store.apiChecked ? 'Connexion à l’API…' : !store.apiAvailable ? 'API indisponible' : store.realtimeConnected ? 'Temps réel connecté' : 'REST disponible' }}</span>
+    <div v-if="store.error" class="alert alert-warning" role="alert">{{ store.error }}</div>
+    <form class="flex gap-3 flex-wrap" @submit.prevent="submit">
+      <label class="input flex-1"><span class="label">Titre</span><input v-model="title" aria-label="Titre de la nouvelle note" maxlength="120" required /></label>
+      <button class="btn btn-primary" type="submit" :disabled="store.loading || !store.online || !store.apiAvailable || !title.trim()">Créer une note</button>
+    </form>
+    <button v-if="store.online && !store.apiAvailable" class="btn btn-outline btn-sm" type="button" @click="store.load()">Réessayer la connexion</button>
+    <p v-if="store.apiAvailable" data-testid="notes-count">{{ store.notes.length }} note(s)</p>
+    <p v-else-if="store.notes.length">Les notes déjà affichées peuvent être périmées.</p>
+    <p v-else>Les notes seront visibles lorsque l’API sera disponible.</p>
+    <ul data-testid="notes" class="list bg-base-200 rounded-box"><li v-for="note in store.notes" :key="note.id" class="list-row">{{ note.title }}</li></ul>
+  </div></section>
+</template>

package/templates/spa/daisyui/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import './style.css'
+import App from './App.vue'
+createApp(App).use(createPinia()).mount('#app')

package/templates/spa/daisyui/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/spa/daisyui/vite.config.ts

@@ -0,0 +1,8 @@
+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', '/socket.io': { target: 'ws://127.0.0.1:3031', ws: true } } },
+})

package/templates/spa/quasar2/src/App.vue

@@ -0,0 +1,3 @@
+<script setup lang="ts">import NotesPanel from './components/NotesPanel.vue'</script>
+<template><q-layout view="hHh lpR fFf"><q-header class="bg-primary text-white"><q-toolbar><q-toolbar-title>Feathers Console — Quasar 2 SPA</q-toolbar-title></q-toolbar></q-header>
+<q-page-container><q-page padding><main class="q-mx-auto" style="max-width: 920px"><h1 class="text-h4">Vue 3, Quasar 2 et FeathersJS v5</h1><p>Le service Feathers est exécuté dans un processus séparé.</p><NotesPanel /></main></q-page></q-page-container></q-layout></template>

package/templates/spa/quasar2/src/components/NotesPanel.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useNotesStore } from '../stores/notes'
+const store = useNotesStore()
+const title = ref('')
+const onOnline = (): void => { store.setConnectivity(true) }
+const onOffline = (): void => { store.setConnectivity(false) }
+onMounted(() => {
+  void store.load()
+  store.connectRealtime()
+  window.addEventListener('online', onOnline)
+  window.addEventListener('offline', onOffline)
+})
+onUnmounted(() => {
+  store.disconnectRealtime()
+  window.removeEventListener('online', onOnline)
+  window.removeEventListener('offline', onOffline)
+})
+async function submit(): Promise<void> {
+  await store.create(title.value)
+  if (!store.error) title.value = ''
+}
+</script>
+<template>
+  <q-card flat bordered class="q-pa-lg">
+    <q-card-section><div class="text-h6">Notes FeathersJS</div>
+      <div data-testid="realtime-status" role="status" aria-live="polite">{{ !store.online ? 'Hors ligne' : !store.apiChecked ? 'Connexion à l’API…' : !store.apiAvailable ? 'API indisponible' : store.realtimeConnected ? 'Temps réel connecté' : 'REST disponible' }}</div></q-card-section>
+    <q-banner v-if="store.error" role="alert">{{ store.error }}</q-banner>
+    <q-card-section>
+      <form class="row items-center q-gutter-sm" @submit.prevent="submit">
+        <q-input v-model="title" label="Titre de la nouvelle note" data-testid="note-title-input" maxlength="120" outlined dense class="col" />
+        <q-btn label="Créer une note" type="submit" color="primary" :disable="store.loading || !store.online || !store.apiAvailable || !title.trim()"/>
+      </form>
+      <q-btn v-if="store.online && !store.apiAvailable" flat label="Réessayer la connexion" @click="store.load()" />
+      <p v-if="store.apiAvailable" data-testid="notes-count" class="q-mt-md">{{ store.notes.length }} note(s)</p>
+      <p v-else-if="store.notes.length">Les notes déjà affichées peuvent être périmées.</p>
+      <p v-else>Les notes seront visibles lorsque l’API sera disponible.</p>
+      <q-list bordered separator data-testid="notes"><q-item v-for="note in store.notes" :key="note.id"><q-item-section>{{ note.title }}</q-item-section></q-item></q-list>
+    </q-card-section>
+  </q-card>
+</template>

package/templates/spa/quasar2/src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { Quasar } from 'quasar'
+import 'quasar/dist/quasar.css'
+import './style.css'
+import App from './App.vue'
+createApp(App).use(createPinia()).use(Quasar).mount('#app')

package/templates/spa/quasar2/src/style.css

@@ -0,0 +1 @@
+body { background: #f7f8fc; }

package/templates/spa/quasar2/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { quasar } from '@quasar/vite-plugin'
+export default defineConfig({
+  plugins: [vue(), quasar()],
+  server: { host: '127.0.0.1', port: 5173, strictPort: true,
+    proxy: { '/api': 'http://127.0.0.1:3030', '/socket.io': { target: 'ws://127.0.0.1:3031', ws: true } } },
+})