create-bcp-app 0.1.3 → 0.1.5

package/README.md

@@ -20,6 +20,20 @@ Select a database:
   5) MongoDB
 ```
 
+## Generated application defaults
+
+Generated applications include the project-root `@/` alias:
+
+```ts
+import {
+    db,
+} from "@/lib/database";
+```
+
+The generated TypeScript configuration uses `module: "ESNext"` and `moduleResolution: "Bundler"` so extensionless application aliases match BCP's bundler and development runtime resolution.
+
+Modules that use React client hooks such as `useState` or `useEffect` must declare `"use client"` at the top of the module.
+
 ## Generated optional setup
 
 ### Tailwind CSS
@@ -27,9 +41,21 @@ Select a database:
 When Tailwind is enabled, the project includes:
 
 - `tailwindcss`
-- `@tailwindcss/postcss`
-- `postcss.config.mjs`
+- `@tailwindcss/cli`
+- `concurrently`
 - `app/globals.css`
+- a stylesheet link to `/bcp.css` in `app/layout.tsx`
+- starter Tailwind utility classes in `app/page.tsx`
+
+The generated npm scripts compile Tailwind directly to `public/bcp.css` before starting BCP and keep Tailwind running in watch mode during development:
+
+```text
+npm run css:build
+npm run css:watch
+npm run css:build:prod
+```
+
+`npm run dev` performs an initial CSS build, then runs the Tailwind watcher and `bcp dev` together. BCP serves `/bcp.css` as a normal static asset from `public/`, avoiding an extra API route in the critical request chain. `npm run build` creates a minified stylesheet before the BCP production build.
 
 ### Database
 
@@ -41,6 +67,14 @@ The database choice adds a starter `lib/database.ts`, updates `.env.example`, an
 - MongoDB: `mongodb`
 - None: no database dependency
 
+The generated database helper starts with:
+
+```ts
+import "bcp/server-only";
+```
+
+This prevents database code from being used in a page/client module graph. Query the database from an API route and call that API from client components.
+
 The generator intentionally installs database drivers directly and does not force an ORM.
 
 ## Options
@@ -66,5 +100,5 @@ npx create-bcp-app my-app --yes
 The `--bcp` option is primarily useful for prerelease and local package testing, for example:
 
 ```bash
-npx create-bcp-app my-app --bcp file:../bcp-0.1.2.tgz
+npx create-bcp-app my-app --bcp file:../bcp-0.1.5.tgz
 ```

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "create-bcp-app",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Create a new BCP Framework application.",
   "type": "module",
   "license": "MIT",
+  "bcpFrameworkPackage": "@chidchanun/bcp",
   "bin": {
     "create-bcp-app": "bin/create-bcp-app.mjs"
   },
@@ -24,6 +25,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "bcpFrameworkPackage": "@chidchanun/bcp"
+  }
 }

package/src/project-options.mjs

@@ -18,7 +18,9 @@ const DATABASE_PRESETS = {
         env: [
             "DATABASE_URL=mysql://root:password@localhost:3306/bcp_app",
         ],
-        source: `import mysql from "mysql2/promise";
+        source: `import "bcp/server-only";
+
+import mysql from "mysql2/promise";
 
 const connectionString =
     process.env.DATABASE_URL;
@@ -45,7 +47,9 @@ export const db =
         env: [
             "DATABASE_URL=postgresql://postgres:password@localhost:5432/bcp_app",
         ],
-        source: `import {
+        source: `import "bcp/server-only";
+
+import {
     Pool,
 } from "pg";
 
@@ -74,7 +78,9 @@ export const db =
         env: [
             "DATABASE_URL=./data/bcp.sqlite",
         ],
-        source: `import fs from "node:fs";
+        source: `import "bcp/server-only";
+
+import fs from "node:fs";
 import path from "node:path";
 
 import Database from "better-sqlite3";
@@ -111,7 +117,9 @@ export const db =
             "DATABASE_URL=mongodb://localhost:27017",
             "DATABASE_NAME=bcp_app",
         ],
-        source: `import {
+        source: `import "bcp/server-only";
+
+import {
     MongoClient,
 } from "mongodb";
 
@@ -176,34 +184,9 @@ export function applyProjectOptions({
         );
 
     if (tailwind) {
-        packageJson.devDependencies = {
-            ...packageJson.devDependencies,
-            tailwindcss:
-                "^4.3.3",
-            "@tailwindcss/postcss":
-                "^4.3.3",
-        };
-
-        writeFile(
+        configureTailwind(
             targetDirectory,
-            "postcss.config.mjs",
-            `export default {
-    plugins: {
-        "@tailwindcss/postcss": {},
-    },
-};
-`
-        );
-
-        writeFile(
-            targetDirectory,
-            "app/globals.css",
-            `@import "tailwindcss";
-
-@theme {
-    --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
-}
-`
+            packageJson
         );
     }
 
@@ -245,6 +228,191 @@ export function applyProjectOptions({
     };
 }
 
+function configureTailwind(
+    targetDirectory,
+    packageJson
+) {
+    packageJson.devDependencies = {
+        ...packageJson.devDependencies,
+        tailwindcss:
+            "^4.3.3",
+        "@tailwindcss/cli":
+            "^4.3.3",
+        concurrently:
+            "^10.0.5",
+    };
+
+    packageJson.scripts = {
+        ...packageJson.scripts,
+        dev:
+            "npm run css:build && concurrently -k -n tailwind,bcp \"npm run css:watch\" \"bcp dev\"",
+        build:
+            "npm run css:build:prod && bcp build",
+        "css:build":
+            "tailwindcss -i ./app/globals.css -o ./public/bcp.css",
+        "css:watch":
+            "tailwindcss -i ./app/globals.css -o ./public/bcp.css --watch",
+        "css:build:prod":
+            "tailwindcss -i ./app/globals.css -o ./public/bcp.css --minify",
+    };
+
+    writeFile(
+        targetDirectory,
+        "app/globals.css",
+        `@import "tailwindcss" source("../");
+
+@theme {
+    --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+`
+    );
+
+    fs.mkdirSync(
+        path.join(
+            targetDirectory,
+            "public"
+        ),
+        {
+            recursive: true,
+        }
+    );
+
+    injectTailwindStylesheet(
+        targetDirectory
+    );
+    applyTailwindStarterStyles(
+        targetDirectory
+    );
+    appendGitIgnore(
+        targetDirectory,
+        "public/bcp.css"
+    );
+}
+
+function injectTailwindStylesheet(
+    targetDirectory
+) {
+    const layoutFile =
+        path.join(
+            targetDirectory,
+            "app",
+            "layout.tsx"
+        );
+    const source =
+        fs.readFileSync(
+            layoutFile,
+            "utf8"
+        );
+    const rootPattern =
+        /^([ \t]*)<div>[ \t]*(\r?\n)/m;
+    const match =
+        rootPattern.exec(
+            source
+        );
+
+    if (!match) {
+        throw new Error(
+            "BCP create-app could not attach the Tailwind stylesheet to app/layout.tsx."
+        );
+    }
+
+    const indent =
+        match[1];
+    const newline =
+        match[2];
+    const childIndent =
+        `${indent}    `;
+    const propertyIndent =
+        `${childIndent}    `;
+    const replacement =
+        `${indent}<div>${newline}` +
+        `${childIndent}<link${newline}` +
+        `${propertyIndent}rel="stylesheet"${newline}` +
+        `${propertyIndent}href="/bcp.css"${newline}` +
+        `${childIndent}/>${newline}`;
+
+    fs.writeFileSync(
+        layoutFile,
+        source.replace(
+            rootPattern,
+            replacement
+        ),
+        "utf8"
+    );
+}
+
+function applyTailwindStarterStyles(
+    targetDirectory
+) {
+    const pageFile =
+        path.join(
+            targetDirectory,
+            "app",
+            "page.tsx"
+        );
+    let source =
+        fs.readFileSync(
+            pageFile,
+            "utf8"
+        );
+
+    source =
+        source.replace(
+            "        <section>",
+            "        <section className=\"mx-auto max-w-3xl space-y-6 px-6 py-16\">"
+        );
+    source =
+        source.replace(
+            "            <h1>",
+            "            <h1 className=\"text-4xl font-bold tracking-tight text-slate-900\">"
+        );
+    source =
+        source.replace(
+            "            <p>",
+            "            <p className=\"text-lg text-slate-600\">"
+        );
+
+    fs.writeFileSync(
+        pageFile,
+        source,
+        "utf8"
+    );
+}
+
+function appendGitIgnore(
+    targetDirectory,
+    entry
+) {
+    const filePath =
+        path.join(
+            targetDirectory,
+            ".gitignore"
+        );
+    const current =
+        fs.existsSync(
+            filePath
+        )
+            ? fs.readFileSync(
+                filePath,
+                "utf8"
+            ).trimEnd()
+            : "";
+    const lines =
+        new Set(
+            current
+                .split(/\r?\n/)
+                .filter(Boolean)
+        );
+
+    lines.add(entry);
+
+    fs.writeFileSync(
+        filePath,
+        `${Array.from(lines).join("\n")}\n`,
+        "utf8"
+    );
+}
+
 function appendEnvExample(
     targetDirectory,
     lines

package/template/tsconfig.json

@@ -1,14 +1,20 @@
 {
   "compilerOptions": {
     "target": "ES2022",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "jsx": "react-jsx",
     "strict": true,
     "noEmit": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
     "types": [
       "node",
       "react",