@kevinmarrec/create-app 0.8.0 → 0.10.0

package/template/api/src/env.ts

@@ -0,0 +1,67 @@
+import * as v from 'valibot'
+
+const schema = v.object({
+  auth: v.object({
+    secret: v.string(),
+  }),
+  cors: v.object({
+    allowedOrigins: v.pipe(
+      v.optional(v.string(), ''),
+      v.transform(input => input.split(',').filter(Boolean)),
+    ),
+  }),
+  database: v.object({
+    url: v.string(),
+  }),
+  log: v.object({
+    level: v.optional(v.union([
+      v.literal('fatal'),
+      v.literal('error'),
+      v.literal('warn'),
+      v.literal('info'),
+      v.literal('debug'),
+      v.literal('trace'),
+      v.literal('silent'),
+    ]), 'info'),
+  }),
+  server: v.object({
+    host: v.optional(v.string(), '0.0.0.0'),
+    port: v.pipe(
+      v.optional(v.string(), '4000'),
+      v.decimal(),
+      v.transform(input => Number(input)),
+    ),
+  }),
+})
+
+const parsed = v.safeParse(schema, {
+  auth: {
+    secret: import.meta.env.AUTH_SECRET,
+  },
+  cors: {
+    allowedOrigins: import.meta.env.ALLOWED_ORIGINS,
+  },
+  database: {
+    url: import.meta.env.DATABASE_URL,
+  },
+  log: {
+    level: import.meta.env.LOG_LEVEL,
+  },
+  server: {
+    host: import.meta.env.HOST,
+    port: import.meta.env.PORT,
+  },
+})
+
+if (!parsed.success) {
+  throw new Error([
+    '🚨 Environment Validation Error!',
+    ...parsed.issues.map(issue =>
+      issue.path
+        ? `[${issue.path.map(p => p.key).join('.')}] ${issue.message}`
+        : issue.message,
+    ),
+  ].join('\n'))
+}
+
+export const env = parsed.output

package/template/api/src/main.ts

@@ -0,0 +1,39 @@
+import process from 'node:process'
+
+import { createBetterAuth } from './auth'
+import { db } from './database'
+import { env } from './env'
+import { createRpc } from './orpc'
+import { router } from './orpc/router'
+import { cors } from './utils/cors'
+import { logger } from './utils/logger'
+
+const auth = createBetterAuth({ db, logger })
+const rpc = createRpc({ auth, db, logger }, router)
+
+const server = Bun.serve({
+  hostname: env.server.host,
+  port: env.server.port,
+  routes: {
+    '/health': () => new Response('OK', { status: 200 }),
+    '/auth/*': cors(auth.handler),
+    '/rpc/*': cors(rpc.handler),
+  },
+  error(error) {
+    logger.error(error)
+    return new Response('Internal Server Error', { status: 500 })
+  },
+})
+
+logger.info(`Listening on ${server.url}`)
+
+// Graceful Shutdown
+
+async function gracefulShutdown() {
+  logger.info('Gracefully shutting down...')
+  await server.stop()
+  process.exit(0)
+}
+
+process.on('SIGINT', gracefulShutdown)
+process.on('SIGTERM', gracefulShutdown)

package/template/{server → api}/src/orpc/context.ts

@@ -1,7 +1,8 @@
 import type { RequestHeadersPluginContext, ResponseHeadersPluginContext } from '@orpc/server/plugins'
-import type { Auth } from '@server/auth'
-import type { Database } from '@server/database'
-import type { Logger } from '@server/utils/logger'
+
+import type { Auth } from '../auth'
+import type { Database } from '../database'
+import type { Logger } from '../utils/logger'
 
 export interface Context extends RequestHeadersPluginContext, ResponseHeadersPluginContext {
   auth: Auth

package/template/api/src/orpc/index.ts

@@ -0,0 +1,27 @@
+import type { Router } from '@orpc/server'
+import { RPCHandler } from '@orpc/server/fetch'
+import { RequestHeadersPlugin, ResponseHeadersPlugin } from '@orpc/server/plugins'
+
+import type { Context } from './context'
+import { ErrorPlugin } from './plugins/error'
+
+export function createRpc<T extends Context>(context: T, router: Router<any, T>) {
+  const handler = new RPCHandler<T>(router, {
+    plugins: [
+      new ErrorPlugin(),
+      new RequestHeadersPlugin(),
+      new ResponseHeadersPlugin(),
+    ],
+  })
+
+  return {
+    handler: async (req: Request) => {
+      const { matched, response } = await handler.handle(req, {
+        prefix: '/rpc',
+        context,
+      })
+
+      return matched ? response : new Response('Not found', { status: 404 })
+    },
+  }
+}

package/template/{server → api}/src/orpc/middlewares/auth.ts

@@ -1,5 +1,6 @@
 import { ORPCError, os } from '@orpc/server'
-import type { Context } from '@server/orpc'
+
+import type { Context } from '../context'
 
 export const authMiddleware = os
   .$context<Context>()

package/template/api/src/orpc/plugins/error.ts

@@ -0,0 +1,17 @@
+import { onError, ORPCError } from '@orpc/server'
+import type { StandardHandlerOptions, StandardHandlerPlugin } from '@orpc/server/standard'
+
+import type { Context } from '../context'
+
+export class ErrorPlugin<T extends Context> implements StandardHandlerPlugin<T> {
+  init(options: StandardHandlerOptions<T>): void {
+    options.clientInterceptors ??= []
+    options.clientInterceptors.unshift(onError((error, { context }) => {
+      if (error instanceof ORPCError) {
+        throw error
+      }
+
+      context.logger.error(error)
+    }))
+  }
+}

package/template/{server → api}/src/orpc/router/index.ts

@@ -1,8 +1,20 @@
-import { authed, pub } from '@server/orpc'
+import { os } from '@orpc/server'
 import * as v from 'valibot'
 
+import type { Context } from '../context'
+import { authMiddleware } from '../middlewares/auth'
+
 export type { RouterClient } from '@orpc/server'
 
+const pub = os
+  .$context<Context>()
+  .errors({
+    UNAUTHORIZED: { status: 401 },
+  })
+
+const authed = pub
+  .use(authMiddleware)
+
 export const router = {
   public: pub
     .input(v.any())

package/template/{server → api}/src/utils/cors.ts

@@ -1,10 +1,10 @@
-export function cors(handler: (req: Request) => Promise<Response>) {
-  const allowedOrigins = import.meta.env.ALLOWED_ORIGINS.split(',')
+import { env } from '../env'
 
+export function cors(handler: (req: Request) => Promise<Response>) {
   return async (req: Request) => {
-    const origin = req.headers.get('origin') ?? ''
+    const origin = req.headers.get('origin')
 
-    if (!origin || !allowedOrigins.includes(origin)) {
+    if (origin && !env.cors.allowedOrigins.includes(origin)) {
       return new Response('Origin not allowed', { status: 403 })
     }
 
@@ -19,7 +19,10 @@ export function cors(handler: (req: Request) => Promise<Response>) {
     }
 
     response.headers.append('Access-Control-Allow-Credentials', 'true')
-    response.headers.append('Access-Control-Allow-Origin', origin)
+
+    if (origin) {
+      response.headers.append('Access-Control-Allow-Origin', origin)
+    }
 
     return response
   }

package/template/{server → api}/src/utils/logger.ts

@@ -1,7 +1,9 @@
 import pino from 'pino'
 
+import { env } from '../env'
+
 export const logger = pino({
-  level: import.meta.env.LOG_LEVEL ?? 'info',
+  level: env.log.level,
   base: {},
 })
 

package/template/app/.env

@@ -0,0 +1 @@
+VITE_API_URL=https://api.dev.localhost

package/template/{client → app}/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="description" content="Description" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="dark light" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>Title</title>
   </head>

package/template/{client → app}/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "client",
+  "name": "app",
   "type": "module",
   "private": true,
   "scripts": {
@@ -10,26 +10,25 @@
   },
   "dependencies": {
     "@kevinmarrec/vue-i18n": "^1.1.3",
-    "@orpc/client": "^1.10.4",
-    "@orpc/tanstack-query": "1.10.3",
-    "@tanstack/query-core": "^5.90.7",
-    "@tanstack/vue-query": "^5.90.7",
+    "@orpc/client": "^1.11.2",
+    "@orpc/tanstack-query": "1.11.2",
+    "@tanstack/query-core": "^5.90.10",
+    "@tanstack/vue-query": "^5.91.2",
     "@unhead/vue": "^2.0.19",
     "@vueuse/core": "^14.0.0",
     "better-auth": "^1.3.34",
-    "unocss": "^66.5.4",
-    "vue": "^3.5.22"
+    "unocss": "^66.5.6",
+    "vue": "^3.5.24"
   },
   "devDependencies": {
-    "@kevinmarrec/unocss-config": "^1.5.4",
+    "@kevinmarrec/unocss-config": "^1.5.6",
     "@kevinmarrec/vite-plugin-dark-mode": "^1.1.2",
     "@modyfi/vite-plugin-yaml": "^1.1.1",
     "@unhead/addons": "^2.0.19",
-    "@unocss/vite": "^66.5.4",
     "@vitejs/plugin-vue": "^6.0.1",
     "beasties": "^0.3.5",
     "rollup-plugin-visualizer": "^6.0.5",
-    "vite": "^7.2.0",
+    "vite": "^7.2.2",
     "vite-plugin-vue-devtools": "^8.0.3",
     "vite-ssg": "^28.2.2",
     "vite-tsconfig-paths": "^5.1.4"

package/template/{client → app}/src/App.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { useAuth, useContent, useHead, useI18n } from '@client/composables'
 import { ref } from 'vue'
 
+import { useAuth, useContent, useHead, useI18n } from '~/app/composables'
+
 const { t } = useI18n()
 useHead({
   title: () => t('title'),

package/template/{client → app}/src/composables/content.ts

@@ -1,6 +1,7 @@
-import { orpc } from '@client/lib/orpc'
 import { useQuery } from '@tanstack/vue-query'
 
+import { orpc } from '~/app/lib/orpc'
+
 export function useContent() {
   const publicContent = useQuery(orpc.public.queryOptions({})).data
   const privateContent = useQuery(orpc.private.queryOptions({})).data

package/template/{client → app}/src/lib/orpc.ts

@@ -1,7 +1,8 @@
 import { createORPCClient } from '@orpc/client'
 import { RPCLink } from '@orpc/client/fetch'
 import { createTanstackQueryUtils } from '@orpc/tanstack-query'
-import type { Router, RouterClient } from '@server/orpc/router'
+
+import type { Router, RouterClient } from '~/api/orpc/router'
 
 const link = new RPCLink({
   url: `${import.meta.env.VITE_API_URL}/rpc`,
@@ -9,6 +10,7 @@ const link = new RPCLink({
     globalThis.fetch(request, {
       ...init,
       credentials: 'include',
+      signal: AbortSignal.timeout(30_000),
     }),
 })
 

package/template/{client → app}/src/main.ts

@@ -4,7 +4,7 @@ import { ViteSSG } from 'vite-ssg/single-page'
 
 import App from './App.vue'
 
-import 'uno.css'
+import 'virtual:uno.css'
 
 export const createApp = ViteSSG(App, async ({ app }) => {
   const i18n = await createI18n({

package/template/{client → app}/vite.config.ts

@@ -3,9 +3,9 @@ import process from 'node:process'
 import darkMode from '@kevinmarrec/vite-plugin-dark-mode'
 import yaml from '@modyfi/vite-plugin-yaml'
 import unhead from '@unhead/addons/vite'
-import unocss from '@unocss/vite'
 import vue from '@vitejs/plugin-vue'
 import { visualizer } from 'rollup-plugin-visualizer'
+import unocss from 'unocss/vite'
 import { defineConfig } from 'vite'
 import devtools from 'vite-plugin-vue-devtools'
 import tsconfigPaths from 'vite-tsconfig-paths'

package/template/compose.yaml

@@ -1,22 +1,130 @@
 x-common: &common
-  working_dir: /app
   volumes:
-    - ./:/app
+    - ./:/code
+  working_dir: /code
   user: 1000:1000
 
 services:
-  server:
+  traefik:
+    image: traefik:v3.6
+    container_name: traefik
+    restart: unless-stopped
+    security_opt:
+      - no-new-privileges:true
+    command:
+      # General configuration
+      - --api.dashboard=true
+      - --ping=true
+      - --log.level=INFO
+      # Entrypoints for HTTP and HTTPS
+      - --entrypoints.websecure.address=:443
+      - --entrypoints.web.address=:80
+      # Redirect HTTP to HTTPS
+      - --entrypoints.web.http.redirections.entrypoint.to=websecure
+      - --entrypoints.web.http.redirections.entrypoint.scheme=https
+      # Providers (Docker & File for dynamic config)
+      - --providers.docker=true
+      - --providers.docker.exposedbydefault=false
+      - --providers.file.directory=/etc/traefik/dynamic
+      - --providers.file.watch=true
+    ports:
+      - 80:80
+      - 443:443
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+      - ./.docker/traefik/dynamic:/etc/traefik/dynamic:ro # Mount the dynamic config directory
+      - ./.docker/traefik/certs:/certs:ro # Mount the certs directory
+    healthcheck:
+      test: [CMD-SHELL, traefik healthcheck --ping]
+      interval: 1s
+      timeout: 1s
+      retries: 10
+    labels:
+      traefik.enable: 'true'
+      traefik.http.routers.traefik.rule: Host(`traefik.dev.localhost`)
+      traefik.http.routers.traefik.entrypoints: websecure
+      traefik.http.routers.traefik.tls: 'true'
+      traefik.http.routers.traefik.service: api@internal
+
+  postgres:
+    image: postgres:18-alpine
+    container_name: postgres
+    environment:
+      - POSTGRES_USER=user
+      - POSTGRES_PASSWORD=password
+      - POSTGRES_DB=app
+    ports:
+      - 5432:5432
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: [CMD-SHELL, "psql postgresql://user:password@postgres:5432/app -c 'SELECT 1' 2> /dev/null"]
+      interval: 1s
+      timeout: 1s
+      retries: 10
+
+  metabase:
+    image: metabase/metabase:v0.57.x
+    container_name: metabase
+    environment:
+      - MB_DB_TYPE=h2
+      - MB_DB_FILE=/var/lib/metabase/metabase.db
+      - MB_SITE_URL=https://metabase.dev.localhost
+    volumes:
+      - metabase_data:/var/lib/metabase
+    healthcheck:
+      test: [CMD-SHELL, curl -f http://localhost:3000/api/health]
+      interval: 1s
+      timeout: 1s
+      retries: 20
+    labels:
+      traefik.enable: 'true'
+      traefik.http.routers.metabase.rule: Host(`metabase.dev.localhost`)
+      traefik.http.routers.metabase.entrypoints: websecure
+      traefik.http.routers.metabase.tls: 'true'
+      traefik.http.services.metabase.loadbalancer.server.port: '3000'
+
+  api:
     <<: *common
+    depends_on:
+      traefik:
+        condition: service_healthy
+      postgres:
+        condition: service_healthy
+    container_name: api
     image: oven/bun:1-alpine
-    command: [bun, --cwd, server, dev]
-    ports:
-      - 4000:4000
+    init: true
+    command: [bun, --cwd, api, dev]
+    environment:
+      - FORCE_COLOR=1
+    labels:
+      traefik.enable: 'true'
+      traefik.http.routers.api.rule: Host(`api.dev.localhost`)
+      traefik.http.routers.api.entrypoints: websecure
+      traefik.http.routers.api.tls: 'true'
+      traefik.http.services.api.loadbalancer.server.port: '4000'
 
-  client:
+  app:
     <<: *common
     depends_on:
-      - server
-    image: imbios/bun-node:22-alpine
-    command: [bun, --cwd, client, dev, --host, 0.0.0.0]
-    ports:
-      - 5173:5173
+      - api
+    container_name: app
+    image: imbios/bun-node:24-alpine
+    init: true
+    command: [bun, --cwd, app, dev, --host, 0.0.0.0]
+    environment:
+      - FORCE_COLOR=1
+    labels:
+      traefik.enable: 'true'
+      traefik.http.routers.app.rule: Host(`app.dev.localhost`)
+      traefik.http.routers.app.entrypoints: websecure
+      traefik.http.routers.app.tls: 'true'
+      traefik.http.services.app.loadbalancer.server.port: '5173'
+
+networks:
+  default:
+    name: dev
+
+volumes:
+  postgres_data:
+  metabase_data:

package/template/knip.config.ts

@@ -1,7 +1,9 @@
 import type { KnipConfig } from 'knip'
 
+// Required for Knip to pass
 Object.assign(import.meta.env, {
-  DATABASE_URL: 'foo.db',
+  AUTH_SECRET: '',
+  DATABASE_URL: '',
 })
 
 export default {
@@ -10,19 +12,15 @@ export default {
     '.': {
       entry: ['*.config.ts'],
     },
-    'client': {
-      entry: ['src/main.ts'],
-      ignoreDependencies: [
-        '@vueuse/core',
-        'uno.css',
-      ],
-    },
-    'server': {
+    'api': {
       drizzle: {
         config: 'src/database/drizzle/config.ts',
       },
+    },
+    'app': {
+      entry: ['src/main.ts'],
       ignoreDependencies: [
-        'pino-pretty',
+        '@vueuse/core',
       ],
     },
   },

package/template/package.json

@@ -1,14 +1,14 @@
 {
-  "name": "app",
+  "name": "project",
   "type": "module",
   "private": true,
-  "packageManager": "bun@1.3.1",
+  "packageManager": "bun@1.3.2",
   "engines": {
     "node": "lts/*"
   },
   "workspaces": [
-    "client",
-    "server"
+    "api",
+    "app"
   ],
   "scripts": {
     "check": "bun run check:eslint && bun run check:stylelint && bun run check:unused && bun run check:types",
@@ -16,20 +16,21 @@
     "check:stylelint": "stylelint '**/*.{css,scss,vue}' --ignorePath .gitignore --cache",
     "check:types": "vue-tsc --noEmit",
     "check:unused": "knip -n",
-    "dev": "bun .scripts/dev.ts",
     "lint": "bun run check:eslint && bun run check:stylelint",
     "lint:inspect": "bunx @eslint/config-inspector",
     "update": "bunx taze -I -rwi"
   },
   "devDependencies": {
-    "@kevinmarrec/eslint-config": "^1.5.4",
-    "@kevinmarrec/stylelint-config": "^1.5.4",
-    "@kevinmarrec/tsconfig": "^1.5.4",
-    "concurrently": "^9.2.1",
+    "@kevinmarrec/eslint-config": "^1.5.6",
+    "@kevinmarrec/stylelint-config": "^1.5.6",
+    "@kevinmarrec/tsconfig": "^1.5.6",
     "eslint": "^9.39.1",
-    "knip": "^5.67.1",
+    "filesize": "^11.0.13",
+    "knip": "^5.69.1",
     "stylelint": "^16.25.0",
+    "tinyexec": "^1.0.2",
+    "tinyglobby": "^0.2.15",
     "typescript": "~5.9.3",
-    "vue-tsc": "^3.1.3"
+    "vue-tsc": "^3.1.4"
   }
 }

package/template/tsconfig.json

@@ -2,8 +2,8 @@
   "extends": "@kevinmarrec/tsconfig",
   "compilerOptions": {
     "paths": {
-      "@client/*": ["./client/src/*"],
-      "@server/*": ["./server/src/*"]
+      "~/api/*": ["./api/src/*"],
+      "~/app/*": ["./app/src/*"]
     }
   },
   "exclude": ["**/dist/**"]

package/template/.scripts/dev.ts

@@ -1,8 +0,0 @@
-import concurrently, { type ConcurrentlyCommandInput } from 'concurrently'
-
-const commandInputs: ConcurrentlyCommandInput[] = [
-  { name: 'server', command: `bun --cwd server dev | pino-pretty`, prefixColor: 'blue' },
-  { name: 'client', command: `bun --cwd client dev`, prefixColor: 'green' },
-]
-
-concurrently(commandInputs)

package/template/client/.env

@@ -1 +0,0 @@
-VITE_API_URL=http://localhost:4000

package/template/server/.env.development

@@ -1,4 +0,0 @@
-ALLOWED_ORIGINS=http://localhost:5173,http://localhost:5174
-AUTH_SECRET=foo
-DATABASE_URL=.db
-NODE_ENV=development

package/template/server/src/env.d.ts

@@ -1,11 +0,0 @@
-interface ImportMetaEnv {
-  readonly ALLOWED_ORIGINS: string
-  readonly AUTH_SECRET: string
-  readonly DATABASE_URL: string
-  readonly LOG_LEVEL: string
-  readonly NODE_ENV: string
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv
-}