@kevinmarrec/create-app 0.7.0 → 0.9.0

package/template/{frontend → 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/{frontend → 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,75 @@
 x-common: &common
-  working_dir: /app
   volumes:
-    - ./:/app
+    - ./:/code
+  working_dir: /code
   user: 1000:1000
 
 services:
-  backend:
+  traefik:
+    image: traefik:v3.6
+    container_name: traefik
+    restart: unless-stopped
+    security_opt:
+      - no-new-privileges:true
+    command:
+      # General configuration
+      - --log.level=INFO
+      - --api.dashboard=true
+      # 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
+    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
+    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
+
+  api:
     <<: *common
+    depends_on:
+      - traefik
+    container_name: api
     image: oven/bun:1-alpine
-    command: [bun, --cwd, backend, 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'
 
-  frontend:
+  app:
     <<: *common
     depends_on:
-      - backend
-    image: imbios/bun-node:22-alpine
-    command: [bun, --cwd, frontend, 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'

package/template/docs/local-tls.md

@@ -0,0 +1,152 @@
+# **Local TLS Setup Guide**
+
+This guide provides the essential steps to install mkcert and generate trusted TLS certificates for your Traefik-secured local development environment.
+
+Certificates are expected in `.docker/traefik/certs/`.
+
+## **Prerequisites**
+
+- [Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/) installed
+- Ports 80 and 443 available on your system
+- Administrator/sudo access for installing mkcert
+
+## **1. Install mkcert (Ubuntu/WSL)**
+
+Download, install, and clean up the executable:
+
+```sh
+curl -JLO "https://dl.filippo.io/mkcert/latest?for=linux/amd64"
+chmod +x mkcert-v*-linux-amd64
+sudo cp mkcert-v*-linux-amd64 /usr/local/bin/mkcert
+rm mkcert-v*-linux-amd64
+```
+
+Verify the installation:
+
+```sh
+mkcert -version
+```
+
+## **2. Install the mkcert Root CA**
+
+Install the local root CA to trust generated certificates:
+
+```sh
+mkcert -install
+```
+
+### **Firefox and Zen Browser (Manual Import)**
+
+Browsers like Firefox and Firefox-based Zen Browser require manual import into their internal trust stores.
+
+1. **Find Root CA File Path:**
+   Run the appropriate command below to get the full path to the rootCA.pem file:
+   - **Linux Native (or WSL for Linux Apps):**
+
+     ```sh
+     echo "$(mkcert -CAROOT)/rootCA.pem"
+     # /home/user/.local/share/mkcert/rootCA.pem
+     ```
+
+   - **WSL for Windows Host Applications:** Use wslpath to get the Windows-formatted path.
+     ```sh
+     wslpath -w "$(mkcert -CAROOT)/rootCA.pem"
+     # \\wsl.localhost\Ubuntu\home\user\.local\share\mkcert\rootCA.pem
+     ```
+
+2. **Import:** In the browser's settings:
+   - **Settings** -> **Privacy & Security**.
+   - **Certificates** -> **View Certificates...**
+   - **Authorities** tab -> **Import...**
+   - Select the rootCA.pem file (using the path found above)
+   - Check **"Trust this CA to identify websites"**
+   - Click **OK**
+
+## **3. Generate the `dev.localhost` Certificate**
+
+Generate the wildcard certificate for `*.dev.localhost` and place the files where Traefik is configured to look (See [`tls.yml`](../.docker/traefik/dynamic/tls.yml)).
+
+1. **Create Directory:**
+
+   ```sh
+   mkdir -p .docker/traefik/certs
+   ```
+
+2. **Generate Certificate:**
+
+   ```sh
+   mkcert \
+     -cert-file .docker/traefik/certs/dev.localhost.crt \
+     -key-file .docker/traefik/certs/dev.localhost.key \
+     "dev.localhost" "*.dev.localhost"
+   ```
+
+3. **Verify Certificate:**
+
+   ```sh
+   openssl x509 -in .docker/traefik/certs/dev.localhost.crt -text -noout | grep -A 2 "Subject Alternative Name"
+   ```
+
+## **4. Validate Setup**
+
+1. **Start Services:**
+
+   ```sh
+   docker compose up -d
+   ```
+
+2. **Test in Browser:**
+
+- Visit **https://traefik.dev.localhost** — you should see the Traefik dashboard
+- Visit **https://app.dev.localhost** — you should see your app
+- Both should load without SSL warnings
+
+## **5. Troubleshooting**
+
+### **Certificate Files Missing**
+
+If Traefik fails to start or shows TLS errors, verify the certificate files exist:
+
+```sh
+ls -la .docker/traefik/certs/
+```
+
+### **Browser Shows SSL Warning**
+
+- Ensure mkcert root CA is installed (`mkcert -install`)
+- For Firefox/Zen Browser, manually import the root CA (see section 2)
+- Clear browser cache and restart the browser
+
+### **Certificate Expiration**
+
+mkcert certificates are valid for a long time, but if you need to regenerate:
+
+1. **Remove old certificates:**
+
+   ```sh
+   rm .docker/traefik/certs/dev.localhost.*
+   ```
+
+2. **Regenerate (see section 3)**
+
+## **6. Clean Up**
+
+1. **Stop Services:**
+
+   ```sh
+   docker compose down
+   ```
+
+2. **Remove Certificates (Optional):**
+
+   ```sh
+   rm -rf .docker/traefik/certs
+   ```
+
+3. **Uninstall mkcert Root CA (Optional):**
+
+   ```sh
+   mkcert -uninstall
+   ```
+
+   > **Note:** Removing the root CA will cause SSL warnings in browsers until you reinstall it or regenerate certificates.

package/template/knip.config.ts

@@ -10,15 +10,16 @@ export default {
     '.': {
       entry: ['*.config.ts'],
     },
-    'backend': {
+    'api': {
       drizzle: {
         config: 'src/database/drizzle/config.ts',
       },
-      ignoreDependencies: ['pino-pretty'],
     },
-    'frontend': {
+    'app': {
       entry: ['src/main.ts'],
-      ignoreDependencies: ['uno.css'],
+      ignoreDependencies: [
+        '@vueuse/core',
+      ],
     },
   },
 } satisfies KnipConfig

package/template/package.json

@@ -1,35 +1,36 @@
 {
-  "name": "app",
+  "name": "project",
   "type": "module",
   "private": true,
-  "packageManager": "bun@1.3.1",
+  "packageManager": "bun@1.3.2",
   "engines": {
     "node": "lts/*"
   },
   "workspaces": [
-    "backend",
-    "frontend"
+    "api",
+    "app"
   ],
   "scripts": {
-    "check": "bun run check:unused && bun run check:eslint && bun run check:stylelint && bun run check:types",
+    "check": "bun run check:eslint && bun run check:stylelint && bun run check:unused && bun run check:types",
     "check:eslint": "eslint . --cache",
     "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.3",
-    "@kevinmarrec/stylelint-config": "^1.2.2",
-    "@kevinmarrec/tsconfig": "^1.1.0",
-    "concurrently": "^9.2.1",
-    "eslint": "^9.38.0",
-    "knip": "^5.66.0",
+    "@kevinmarrec/eslint-config": "^1.5.6",
+    "@kevinmarrec/stylelint-config": "^1.5.6",
+    "@kevinmarrec/tsconfig": "^1.5.6",
+    "eslint": "^9.39.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.1"
+    "vue-tsc": "^3.1.3"
   }
 }

package/template/tsconfig.json

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

package/template/backend/.env.development

@@ -1,4 +0,0 @@
-BETTER_AUTH_SECRET=foo
-BETTER_AUTH_URL=http://localhost:5137
-DATABASE_URL=.db
-NODE_ENV=development

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

@@ -1,65 +0,0 @@
-import type { Auth } from '@backend/auth'
-import type { Database } from '@backend/database'
-import { requiredAuthMiddleware } from '@backend/orpc/middlewares'
-import type { Logger } from '@backend/utils/logger'
-import { onError, ORPCError, os, type Router } from '@orpc/server'
-import { RPCHandler } from '@orpc/server/fetch'
-import {
-  CORSPlugin,
-  RequestHeadersPlugin,
-  type RequestHeadersPluginContext,
-  ResponseHeadersPlugin,
-  type ResponseHeadersPluginContext,
-} from '@orpc/server/plugins'
-import { APIError } from 'better-auth/api'
-
-/* Context */
-
-export interface Context extends RequestHeadersPluginContext, ResponseHeadersPluginContext {
-  auth: Auth
-  db: Database
-  logger: Logger
-}
-
-/* RPC Handler */
-
-export function createRpcHandler<T extends Context>(router: Router<any, T>) {
-  return new RPCHandler<T>(router, {
-    plugins: [
-      new CORSPlugin({
-        credentials: true,
-        maxAge: 7200, // 2 hours https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Access-Control-Max-Age
-      }),
-      new RequestHeadersPlugin(),
-      new ResponseHeadersPlugin(),
-    ],
-    clientInterceptors: [
-      onError((error, { context }) => {
-        if (error instanceof APIError) {
-          throw new ORPCError(error.body?.code ?? 'INTERNAL_SERVER_ERROR', {
-            status: error.statusCode,
-            message: error.body?.message,
-          })
-        }
-
-        if (error instanceof ORPCError) {
-          throw error
-        }
-
-        context.logger.error(error)
-      }),
-    ],
-  })
-}
-
-/* Builder */
-
-export const pub = os
-  .$context<Context>()
-  .errors({
-    UNAUTHORIZED: { status: 401 },
-  })
-
-/** @beta */
-export const authed = pub
-  .use(requiredAuthMiddleware)

package/template/backend/src/orpc/middlewares/auth.ts

@@ -1,33 +0,0 @@
-import type { Context } from '@backend/orpc'
-import { ORPCError, os } from '@orpc/server'
-
-export const authMiddleware = os
-  .$context<Context>()
-  .middleware(async ({ context, next }) => {
-    const { headers, response: session } = await context.auth.api.getSession({
-      headers: context.reqHeaders ?? new Headers(),
-      returnHeaders: true,
-    })
-
-    headers.forEach((v, k) => context.resHeaders?.append(k, v))
-
-    return next({
-      context: {
-        user: session ? session.user : null,
-      },
-    })
-  })
-
-export const requiredAuthMiddleware = authMiddleware
-  .concat(async ({ context, next }) => {
-    if (!context.user) {
-      throw new ORPCError('UNAUTHORIZED')
-    }
-
-    return next({
-      context: {
-        user: context.user,
-      },
-    })
-  },
-  )

package/template/backend/src/orpc/middlewares/index.ts

@@ -1 +0,0 @@
-export * from './auth'

package/template/backend/src/orpc/router/auth.ts

@@ -1,54 +0,0 @@
-import { pub } from '@backend/orpc'
-import { authMiddleware } from '@backend/orpc/middlewares'
-import * as v from 'valibot'
-
-export const getCurrentUser = pub
-  .use(authMiddleware)
-  .handler(async ({ context }) => context.user)
-
-export const signUp = pub
-  .input(v.object({
-    name: v.string(),
-    email: v.pipe(v.string(), v.email()),
-    password: v.string(),
-    rememberMe: v.optional(v.boolean(), true),
-  }))
-  .handler(async ({ input, context: { resHeaders, auth } }) => {
-    const { headers, response } = await auth.api.signUpEmail({
-      body: input,
-      returnHeaders: true,
-    })
-
-    headers.forEach((v, k) => resHeaders?.append(k, v))
-
-    return response.user
-  })
-
-export const signIn = pub
-  .input(v.object({
-    email: v.pipe(v.string(), v.email()),
-    password: v.string(),
-    rememberMe: v.optional(v.boolean(), true),
-  }))
-  .handler(async ({ input, context: { resHeaders, auth } }) => {
-    const { headers, response } = await auth.api.signInEmail({
-      body: input,
-      returnHeaders: true,
-    })
-
-    headers.forEach((v, k) => resHeaders?.append(k, v))
-
-    return response.user
-  })
-
-export const signOut = pub
-  .handler(async ({ context: { auth, reqHeaders, resHeaders } }) => {
-    const { headers, response } = await auth.api.signOut({
-      headers: reqHeaders ?? new Headers(),
-      returnHeaders: true,
-    })
-
-    headers.forEach((v, k) => resHeaders?.append(k, v))
-
-    return response
-  })

package/template/backend/src/orpc/router/index.ts

@@ -1,9 +0,0 @@
-import * as auth from './auth'
-
-export type { RouterClient } from '@orpc/server'
-
-export const router = {
-  auth,
-}
-
-export type Router = typeof router

package/template/frontend/.env.development

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

package/template/frontend/src/composables/auth.ts

@@ -1,31 +0,0 @@
-import { orpc } from '@frontend/lib/orpc'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
-
-export function useAuth() {
-  const qc = useQueryClient()
-
-  const { data: user } = useQuery(orpc.auth.getCurrentUser.queryOptions({
-    retry: false,
-  }))
-
-  const signUp = useMutation(orpc.auth.signUp.mutationOptions({
-    onSuccess: () => qc.invalidateQueries({ queryKey: orpc.auth.getCurrentUser.queryKey() }),
-  }))
-
-  const signIn = useMutation(orpc.auth.signIn.mutationOptions({
-    onSuccess: () => qc.invalidateQueries({ queryKey: orpc.auth.getCurrentUser.queryKey() }),
-  }))
-
-  const signOut = useMutation(orpc.auth.signOut.mutationOptions({
-    onSuccess: () => {
-      qc.setQueryData<null>(orpc.auth.getCurrentUser.queryKey(), null)
-    },
-  }))
-
-  return {
-    user,
-    signUp,
-    signIn,
-    signOut,
-  }
-}

package/template/scripts/dev.ts

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