@kevinmarrec/create-app 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024-present Kevin Marrec <https://github.com/kevinmarrec>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,19 @@
+# @kevinmarrec/create-app
+
+## Description
+
+CLI that scaffolds an opinionated [Bun](https://bun.sh) & [Vue](https://vuejs.org) fullstack application.
+
+## Opinions
+
+- [Bun](https://bun.sh) as package manager & runtime
+
+- [Vue](https://vuejs.org) as frontend framework
+
+## Usage
+
+> Requires [Bun](https://bun.sh) v1.2 _or later_.
+
+```sh
+bun create @kevinmarrec/app
+```

package/dist/index.js

@@ -0,0 +1,144 @@
+#!/usr/bin/env node
+import process from "node:process";
+import { parseArgs } from "node:util";
+import { cancel, confirm, intro, isCancel, log, note, outro, tasks, text } from "@clack/prompts";
+import c from "ansis";
+import { join, resolve } from "pathe";
+import { x } from "tinyexec";
+import fs from "node:fs/promises";
+
+//#region package.json
+var version = "0.1.0";
+
+//#endregion
+//#region src/utils/fs.ts
+const ignorePredicate = (filename) => [".git"].includes(filename);
+async function empty(dir) {
+	const entries = await fs.readdir(dir);
+	await Promise.all(entries.filter((entry) => !ignorePredicate(entry)).map((entry) => fs.rm(resolve(dir, entry), { recursive: true })));
+}
+async function emptyCheck(path) {
+	return fs.readdir(path).then((files) => files.every(ignorePredicate)).catch(() => true);
+}
+async function exists(path) {
+	return fs.access(path).then(() => true).catch(() => false);
+}
+var fs_default = {
+	...fs,
+	empty,
+	emptyCheck,
+	exists
+};
+
+//#endregion
+//#region src/scaffold.ts
+async function scaffold(root) {
+	await fs_default.exists(root) ? await fs_default.empty(root) : await fs_default.mkdir(root);
+	await fs_default.cp(join(import.meta.dirname, "../template"), root, { recursive: true });
+	await fs_default.rename(join(root, "gitignore"), join(root, ".gitignore"));
+}
+
+//#endregion
+//#region src/run.ts
+function maybeCancel(value, options) {
+	if (isCancel(value) || options?.strict && !value) {
+		cancel("Operation cancelled");
+		process.exit(1);
+	}
+}
+async function run() {
+	const { values: options, positionals } = parseArgs({
+		args: process.argv.slice(2),
+		allowPositionals: true,
+		options: {
+			force: {
+				type: "boolean",
+				short: "f"
+			},
+			help: {
+				type: "boolean",
+				short: "h"
+			},
+			version: {
+				type: "boolean",
+				short: "v"
+			}
+		}
+	});
+	if (options.help) {
+		process.stdout.write(`\
+Usage: create-app [OPTIONS...] [DIRECTORY]
+
+Options:
+  -f, --force     Create the project even if the directory is not empty.
+  -h, --help      Display this help message.
+  --version       Display the version number of this CLI.
+`);
+		process.exit(0);
+	}
+	if (options.version) {
+		process.stdout.write(`${version}\n`);
+		process.exit(0);
+	}
+	process.stdout.write("\n");
+	intro(`create-app ${c.dim(`v${version}`)}`);
+	let projectName = positionals[0] || await text({
+		message: "Project name",
+		placeholder: "my-app",
+		validate: (value) => {
+			if (!value.trim()) return "Project name cannot be empty";
+		}
+	});
+	maybeCancel(projectName);
+	projectName = projectName.trim();
+	const cwd = process.cwd();
+	const targetDir = resolve(cwd, projectName);
+	if (!(await fs_default.emptyCheck(targetDir) || options.force)) {
+		await log.warn(`${targetDir === cwd ? "Current directory" : `Target directory ${c.blue(targetDir)}`} is not empty`);
+		const shouldOverwrite = await confirm({
+			message: "Remove existing files and continue?",
+			initialValue: true,
+			active: "Yes",
+			inactive: "No"
+		});
+		maybeCancel(shouldOverwrite, { strict: true });
+	}
+	await tasks([{
+		title: `Scaffolding project in ${c.blue(targetDir)}`,
+		task: async () => {
+			await scaffold(targetDir);
+			return `Scaffolded project in ${c.blue(targetDir)}`;
+		}
+	}]);
+	const shouldInstall = await confirm({
+		message: "Install dependencies?",
+		initialValue: true,
+		active: "Yes",
+		inactive: "No"
+	});
+	maybeCancel(shouldInstall);
+	await tasks([{
+		title: "Installing with bun",
+		enabled: shouldInstall,
+		task: async () => {
+			await x("bun", [
+				"install",
+				"--cwd",
+				targetDir,
+				"--force"
+			]);
+			return "Installed with bun";
+		}
+	}]);
+	await note([targetDir !== cwd && `cd ${c.reset.blue(projectName)}`, `bun run dev`].filter(Boolean).join("\n"), "Next steps");
+	await outro(`Problems? ${c.cyan("https://github.com/kevinmarrec/create-app/issues")}`);
+}
+
+//#endregion
+//#region src/index.ts
+run().catch((error) => {
+	console.error(error);
+});
+
+//#endregion
+export {  };

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@kevinmarrec/create-app",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "CLI that scaffolds an opinionated Bun & Vue fullstack application.",
+  "author": "Kevin Marrec <kevin@marrec.io>",
+  "license": "MIT",
+  "homepage": "https://github.com/kevinmarrec/create-app#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kevinmarrec/create-app.git"
+  },
+  "keywords": [
+    "cli",
+    "create-app",
+    "template"
+  ],
+  "workspaces": [
+    "template",
+    "template/backend",
+    "template/frontend"
+  ],
+  "bin": {
+    "create-app": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "template"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "check": "bun run check:unused && bun run check:eslint && bun run check:stylelint && 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",
+    "lint": "bun run check:eslint && bun run check:stylelint",
+    "lint:inspect": "bunx @eslint/config-inspector",
+    "playground": "bun --cwd template dev",
+    "release": "bumpp",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.11.0",
+    "ansis": "^4.1.0",
+    "pathe": "^2.0.3",
+    "tinyexec": "^1.0.1"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^10.0.0",
+    "@kevinmarrec/eslint-config": "^1.0.0",
+    "@kevinmarrec/stylelint-config": "^1.0.0",
+    "@kevinmarrec/tsconfig": "^1.0.0",
+    "@types/bun": "^1.2.21",
+    "@vitest/coverage-v8": "^3.2.4",
+    "bumpp": "^10.2.3",
+    "eslint": "^9.34.0",
+    "knip": "^5.63.0",
+    "stylelint": "^16.23.1",
+    "taze": "^19.3.0",
+    "tsdown": "^0.14.2",
+    "typescript": "^5.9.2",
+    "vitest": "^3.2.4",
+    "vue-tsc": "^3.0.6"
+  }
+}

package/template/.github/workflows/ci.yml

@@ -0,0 +1,39 @@
+name: Continuous Integration
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  check:
+    name: Check
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version-file: package.json
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: package.json
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Check unused files, dependencies, and exports
+        run: bun run check:unused
+
+      - name: Lint
+        run: bun run check:eslint && bun run check:stylelint
+
+      - name: Type check
+        run: bun run check:types

package/template/.vscode/extensions.json

@@ -0,0 +1,19 @@
+{
+  "recommendations": [
+    "aaron-bond.better-comments",
+    "antfu.goto-alias",
+    "antfu.iconify",
+    "antfu.unocss",
+    "dbaeumer.vscode-eslint",
+    "eamodio.gitlens",
+    "github.copilot",
+    "lokalise.i18n-ally",
+    "mikestead.dotenv",
+    "ms-azuretools.vscode-docker",
+    "pkief.material-icon-theme",
+    "redhat.vscode-yaml",
+    "stylelint.vscode-stylelint",
+    "vue.volar",
+    "yoavbls.pretty-ts-errors"
+  ]
+}

package/template/.vscode/settings.json

@@ -0,0 +1,68 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+
+  // Disable the default formatter
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  "editor.gotoLocation.multipleDefinitions": "goto",
+
+  "eslint.runtime": "node",
+
+  // Silent the stylistic rules in your IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  "eslint.validate": [
+    "javascript",
+    "typescript",
+    "vue",
+    "html",
+    "css",
+    "scss",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ],
+
+  "css.validate": false,
+  "scss.validate": false,
+
+  "stylelint.validate": [
+    "css",
+    "scss",
+    "vue"
+  ],
+
+  "javascript.format.semicolons": "remove",
+  "javascript.preferences.quoteStyle": "single",
+  "typescript.format.semicolons": "remove",
+  "typescript.preferences.quoteStyle": "single",
+
+  "vue.inlayHints.inlineHandlerLeading": true,
+  "vue.inlayHints.missingProps": true,
+
+  // i18n Ally
+  "i18n-ally.enabledFrameworks": ["vue"],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.localesPaths": [
+    "frontend/src/locales"
+  ]
+}

package/template/.vscode/vue.code-snippets

@@ -0,0 +1,18 @@
+{
+  "vue-sfc-init": {
+    "scope": "vue",
+    "prefix": "init",
+    "body": [
+      "<script setup lang=\"ts\">",
+			"",
+      "</script>",
+      "",
+      "<template>",
+			"  <div>",
+      "    ${0:Content}",
+			"  </div>",
+      "</template>",
+			""
+    ]
+  }
+}

package/template/backend/.env.development

@@ -0,0 +1,2 @@
+NODE_ENV=development
+DATABASE_URL=dev.db

package/template/backend/env.d.ts

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

package/template/backend/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "backend",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "bun --watch --no-clear-screen src/server.ts",
+    "build": "bun build src/server.ts --compile --minify --sourcemap --outfile dist/server",
+    "db:generate": "bun --bun run drizzle-kit generate --config src/config/drizzle.ts",
+    "db:migrate": "bun --bun run drizzle-kit migrate --config src/config/drizzle.ts"
+  },
+  "dependencies": {
+    "@orpc/server": "^1.8.5",
+    "drizzle-orm": "^0.44.5",
+    "pino": "^9.9.0",
+    "valibot": "^1.1.0"
+  },
+  "devDependencies": {
+    "@libsql/client": "^0.15.14",
+    "@types/bun": "^1.2.21",
+    "drizzle-kit": "^0.31.4",
+    "pino-pretty": "^13.1.1"
+  }
+}

package/template/backend/src/config/database.ts

@@ -0,0 +1,11 @@
+import * as v from 'valibot'
+
+const schema = v.object({
+  url: v.string(),
+})
+
+const config = v.parse(schema, {
+  url: import.meta.env.DATABASE_URL,
+})
+
+export const url = config.url

package/template/backend/src/config/drizzle.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'drizzle-kit'
+
+import { url } from './database'
+
+export default defineConfig({
+  dialect: 'sqlite',
+  dbCredentials: { url },
+  schema: './src/database/schema',
+  out: './src/database/migrations',
+})

package/template/backend/src/config/logger.ts

@@ -0,0 +1,19 @@
+import * as v from 'valibot'
+
+const schema = v.object({
+  level: v.optional(v.union([
+    v.literal('trace'),
+    v.literal('debug'),
+    v.literal('info'),
+    v.literal('warn'),
+    v.literal('error'),
+    v.literal('fatal'),
+    v.literal('silent'),
+  ]), 'info'),
+})
+
+const config = v.parse(schema, {
+  level: import.meta.env.LOG_LEVEL,
+})
+
+export const level = config.level

package/template/backend/src/config/server.ts

@@ -0,0 +1,40 @@
+import * as v from 'valibot'
+
+const schema = v.object({
+  cors: v.object({
+    origin: v.optional(
+      v.pipe(
+        v.string(),
+        v.minLength(1),
+        v.transform(value => value.split(',')),
+      ),
+      '*',
+    ),
+  }),
+  hostname: v.optional(
+    v.pipe(
+      v.string(),
+      v.minLength(1),
+    ),
+    'localhost',
+  ),
+  port: v.optional(v.pipe(
+    v.string(),
+    v.transform(value => +value),
+    v.number(),
+    v.minValue(3000),
+    v.maxValue(65535),
+  ), '4000'),
+})
+
+const config = v.parse(schema, {
+  cors: {
+    origin: import.meta.env.ALLOWED_ORIGINS,
+  },
+  hostname: import.meta.env.HOST,
+  port: import.meta.env.PORT,
+})
+
+export const cors = config.cors
+export const hostname = config.hostname
+export const port = config.port

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

@@ -0,0 +1,23 @@
+import { url } from '@backend/config/database'
+import { logger } from '@backend/logger'
+import { drizzle } from 'drizzle-orm/bun-sqlite'
+
+import * as schema from './schema'
+
+export const db = drizzle(url, {
+  schema,
+  logger: {
+    logQuery: (query, params) => {
+      let msg = `[SQL] ${query}`
+      msg += params.length ? ` [${params}]` : ''
+      logger.info(msg)
+    },
+  },
+})
+
+db.run('PRAGMA journal_mode = WAL')
+db.run('PRAGMA journal_size_limit = 6144000')
+db.run('PRAGMA synchronous = NORMAL')
+db.run('PRAGMA foreign_keys = ON')
+
+export type Database = typeof db

package/template/backend/src/database/migrations/0000_white_bishop.sql

@@ -0,0 +1,6 @@
+CREATE TABLE `users` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`name` text NOT NULL,
+	`createdAt` integer NOT NULL,
+	`updatedAt` integer NOT NULL
+);

package/template/backend/src/database/migrations/meta/0000_snapshot.json

@@ -0,0 +1,56 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "2570ada9-1704-45ba-b294-429e89874a79",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "tables": {
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "createdAt": {
+          "name": "createdAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updatedAt": {
+          "name": "updatedAt",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

package/template/backend/src/database/migrations/meta/_journal.json

@@ -0,0 +1,13 @@
+{
+  "version": "7",
+  "dialect": "sqlite",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "6",
+      "when": 1751572351628,
+      "tag": "0000_white_bishop",
+      "breakpoints": true
+    }
+  ]
+}

package/template/backend/src/database/schema/index.ts

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

package/template/backend/src/database/schema/users.ts

@@ -0,0 +1,8 @@
+import { sqliteTable } from 'drizzle-orm/sqlite-core'
+
+export const users = sqliteTable('users', t => ({
+  id: t.integer().primaryKey({ autoIncrement: true }),
+  name: t.text().notNull(),
+  createdAt: t.integer({ mode: 'timestamp_ms' }).notNull().$defaultFn(() => new Date()),
+  updatedAt: t.integer({ mode: 'timestamp_ms' }).notNull().$defaultFn(() => new Date()).$onUpdate(() => new Date()),
+}))

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

@@ -0,0 +1,10 @@
+import type { Database } from '@backend/database'
+import type { Logger } from '@backend/logger'
+import { os } from '@orpc/server'
+
+interface Context {
+  db: Database
+  logger: Logger
+}
+
+export const pub = os.$context<Context>()

package/template/backend/src/logger.ts

@@ -0,0 +1,10 @@
+import pino from 'pino'
+
+import { level } from './config/logger'
+
+export const logger = pino({
+  level,
+  base: {},
+})
+
+export type Logger = typeof logger

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

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

package/template/backend/src/router/welcome.ts

@@ -0,0 +1,11 @@
+import { users } from '@backend/database/schema'
+import { pub } from '@backend/lib/orpc'
+import * as v from 'valibot'
+
+export const welcome = pub
+  .input(v.string())
+  .output(v.string())
+  .handler(async ({ input, context: { db } }) => {
+    const count = await db.$count(users)
+    return `Hello ${input} (${count})`
+  })

package/template/backend/src/server.ts

@@ -0,0 +1,53 @@
+import process from 'node:process'
+
+import { onError } from '@orpc/server'
+import { RPCHandler } from '@orpc/server/fetch'
+import { CORSPlugin } from '@orpc/server/plugins'
+
+import { cors, hostname, port } from './config/server'
+import { db } from './database'
+import { logger } from './logger'
+import { router } from './router'
+
+const rpcHandler = new RPCHandler(router, {
+  plugins: [new CORSPlugin(cors)],
+  interceptors: [
+    onError((error) => {
+      logger.error(error)
+    }),
+  ],
+})
+
+const server = Bun.serve({
+  hostname,
+  port,
+  async fetch(request) {
+    const { matched, response } = await rpcHandler.handle(request, {
+      prefix: '/rpc',
+      context: {
+        db,
+        logger,
+      },
+    })
+
+    if (matched)
+      return response
+
+    return new Response('Not found', { status: 404 })
+  },
+  error(error) {
+    logger.error(error)
+    return new Response('Internal Server Error', { status: 500 })
+  },
+})
+
+logger.info(`Listening on ${server.url}`)
+
+async function gracefulShutdown() {
+  logger.info('Gracefully shutting down...')
+  await server.stop()
+  process.exit(0)
+}
+
+process.on('SIGINT', gracefulShutdown)
+process.on('SIGTERM', gracefulShutdown)

package/template/backend/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["ESNext"]
+  }
+}

package/template/compose.yaml

@@ -0,0 +1,22 @@
+x-common: &common
+  working_dir: /app
+  volumes:
+    - ./:/app
+  user: 1000:1000
+
+services:
+  backend:
+    <<: *common
+    image: oven/bun:1-alpine
+    command: [bun, --cwd, backend, dev]
+    ports:
+      - 4000:4000
+
+  frontend:
+    <<: *common
+    depends_on:
+      - backend
+    image: imbios/bun-node:22-alpine
+    command: [bun, --cwd, frontend, dev, --host, 0.0.0.0]
+    ports:
+      - 5173:5173

package/template/eslint.config.ts

@@ -0,0 +1 @@
+export { default } from '@kevinmarrec/eslint-config'

package/template/frontend/.env.development

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

package/template/frontend/env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="@kevinmarrec/cloudstack-vite-config/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/template/frontend/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="Description" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>Title</title>
+  </head>
+  <body class="font-sans">
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <noscript>Please enable JavaScript to use this application.</noscript>
+  </body>
+</html>

package/template/frontend/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "frontend",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --mode static",
+    "build:analyze": "vite build --mode analyze",
+    "preview": "vite preview --open"
+  },
+  "dependencies": {
+    "@orpc/client": "^1.8.5",
+    "@orpc/tanstack-query": "1.6.4",
+    "@tanstack/vue-query": "^5.85.5",
+    "unocss": "^66.4.2",
+    "vue": "^3.5.20"
+  },
+  "devDependencies": {
+    "@kevinmarrec/cloudstack-vite-config": "^1.0.0-rc.15",
+    "@kevinmarrec/cloudstack-vue": "^1.0.0-rc.15",
+    "@kevinmarrec/unocss-config": "^1.0.0",
+    "vite": "^7.1.3"
+  }
+}

package/template/frontend/public/favicon.svg

@@ -0,0 +1,5 @@
+<svg width="800" height="800" viewBox="0 -17.5 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid">
+  <path d="M204.8 0H256L128 220.8 0 0h97.92L128 51.2 157.44 0z" fill="#41B883"/>
+  <path d="m0 0 128 220.8L256 0h-51.2L128 132.48 50.56 0z" fill="#41B883"/>
+  <path d="M50.56 0 128 133.12 204.8 0h-47.36L128 51.2 97.92 0z" fill="#35495E"/>
+</svg>

package/template/frontend/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

package/template/frontend/src/App.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useHead, useI18n } from '@frontend/composables'
+import { useWelcome } from '@frontend/queries'
+
+const { t } = useI18n()
+
+useHead({
+  title: () => t('title'),
+})
+
+const { data: message } = useWelcome('world')
+</script>
+
+<template>
+  <div class="grid h-full place-items-center">
+    <div class="flex flex-col gap-4 items-center">
+      <h1 class="text-4xl font-bold">
+        {{ t('body.message') }}
+      </h1>
+      <h2 class="text-2xl text-gray-500">
+        {{ message }}
+      </h2>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,2 @@
+export { useHead } from '@kevinmarrec/cloudstack-vue/head'
+export { useI18n } from '@kevinmarrec/cloudstack-vue/i18n'

package/template/frontend/src/lib/orpc.ts

@@ -0,0 +1,12 @@
+import type { Router, RouterClient } from '@backend/router'
+import { createORPCClient } from '@orpc/client'
+import { RPCLink } from '@orpc/client/fetch'
+import { createTanstackQueryUtils } from '@orpc/tanstack-query'
+
+const link = new RPCLink({
+  url: import.meta.env.VITE_API_URL,
+})
+
+const client: RouterClient<Router> = createORPCClient(link)
+
+export const orpc = createTanstackQueryUtils(client)

package/template/frontend/src/locales/en.yml

@@ -0,0 +1,3 @@
+title: Welcome !
+body:
+  message: Template

package/template/frontend/src/locales/fr.yml

@@ -0,0 +1,3 @@
+title: Bienvenue !
+body:
+  message: Template (French)

package/template/frontend/src/main.ts

@@ -0,0 +1,10 @@
+import { VueQueryPlugin } from '@tanstack/vue-query'
+import { Cloudstack } from 'virtual:cloudstack'
+
+import App from './App.vue'
+
+export const createApp = Cloudstack(App, ({ app }) => {
+  app.use(VueQueryPlugin, {
+    enableDevtoolsV6Plugin: true,
+  })
+})

package/template/frontend/src/queries/index.ts

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

package/template/frontend/src/queries/welcome.ts

@@ -0,0 +1,10 @@
+import { orpc } from '@frontend/lib/orpc'
+import { get } from '@frontend/utils'
+import { useQuery } from '@tanstack/vue-query'
+import { computed, type MaybeRef } from 'vue'
+
+export function useWelcome(text: MaybeRef<string>) {
+  return useQuery(computed(() => orpc.welcome.queryOptions({
+    input: get(text),
+  })))
+}

package/template/frontend/src/utils.ts

@@ -0,0 +1 @@
+export { get } from '@kevinmarrec/cloudstack-vue'

package/template/frontend/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM", "DOM.Iterable"]
+  }
+}

package/template/frontend/uno.config.ts

@@ -0,0 +1 @@
+export { default } from '@kevinmarrec/unocss-config'

package/template/frontend/vite.config.ts

@@ -0,0 +1 @@
+export { default } from '@kevinmarrec/cloudstack-vite-config'

package/template/gitignore

@@ -0,0 +1,17 @@
+*.db*
+*.local
+*.log
+*.sqlite
+.cache
+.DS_Store
+.env.prod*
+.eslintcache
+.idea
+.stylelintcache
+.temp
+.vite*
+coverage
+dev-dist
+dist
+node_modules
+tmp

package/template/knip.config.ts

@@ -0,0 +1,23 @@
+import type { KnipConfig } from 'knip'
+
+Object.assign(import.meta.env, {
+  DATABASE_URL: 'foo.db',
+})
+
+export default {
+  stylelint: false,
+  workspaces: {
+    '.': {
+      entry: ['*.config.ts'],
+    },
+    'backend': {
+      drizzle: {
+        config: ['src/config/drizzle.ts'],
+      },
+      ignoreDependencies: ['pino-pretty'],
+    },
+    'frontend': {
+      entry: ['src/main.ts'],
+    },
+  },
+} satisfies KnipConfig

package/template/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "app",
+  "type": "module",
+  "private": true,
+  "packageManager": "bun@1.2.21",
+  "engines": {
+    "node": "lts/*"
+  },
+  "workspaces": [
+    "backend",
+    "frontend"
+  ],
+  "scripts": {
+    "check": "bun run check:unused && bun run check:eslint && bun run check:stylelint && 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"
+  },
+  "devDependencies": {
+    "@kevinmarrec/eslint-config": "^1.0.0",
+    "@kevinmarrec/stylelint-config": "^1.0.0",
+    "@kevinmarrec/tsconfig": "^1.0.0",
+    "concurrently": "^9.2.1",
+    "eslint": "^9.34.0",
+    "knip": "^5.63.0",
+    "stylelint": "^16.23.1",
+    "taze": "^19.3.0",
+    "typescript": "~5.9.2",
+    "vue-tsc": "^3.0.6"
+  }
+}

package/template/scripts/dev.ts

@@ -0,0 +1,8 @@
+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)

package/template/stylelint.config.ts

@@ -0,0 +1 @@
+export { default } from '@kevinmarrec/stylelint-config'

package/template/taze.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'taze'
+
+export default defineConfig({
+  install: true,
+  interactive: true,
+  recursive: true,
+  write: true,
+})

package/template/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@kevinmarrec/tsconfig",
+  "compilerOptions": {
+    "paths": {
+      "@backend/*": ["./backend/src/*"],
+      "@frontend/*": ["./frontend/src/*"]
+    }
+  },
+  "exclude": ["**/dist/**"]
+}