create-kyro 0.5.5 → 0.6.0

package/dist/index.js

@@ -87,6 +87,12 @@ async function promptUser() {
             value: "kitchen-sink"
           }
         ]
+      },
+      {
+        type: "text",
+        name: "adminEmail",
+        message: "Admin email:",
+        initial: (prev, values) => `admin@${values.projectName}.local`
       }
     ],
     {
@@ -151,16 +157,25 @@ ${cyan("?")} ${bold(msg)}`);
 function generatePackageJson(answers) {
   const deps = {
     "astro": "^6.3.1",
+    "@astrojs/react": "^5.0.4",
+    "@tailwindcss/vite": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "@kyro-cms/core": "latest",
     "@kyro-cms/admin": "latest"
   };
   const devDeps = {
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0"
   };
   const scripts = {
     "dev": "astro dev",
     "build": "astro build",
-    "preview": "astro preview"
+    "preview": "astro preview",
+    "kyro:dev": "kyro dev",
+    "kyro:generate": "kyro generate"
   };
   if (answers.database === "sqlite") {
     scripts["db:generate"] = "kyro generate";
@@ -207,19 +222,19 @@ function generateKyroConfig(answers) {
   let templateGlobals = "";
   switch (answers.template) {
     case "minimal":
-      templateCollections = "import { minimalCollections } from '@kyro-cms/core/templates';";
+      templateCollections = "import { minimalCollections, mediaCollections, authCollections } from '@kyro-cms/core/templates';";
       templateGlobals = "import { coreSettingsGlobals } from '@kyro-cms/core/templates';";
       break;
     case "blog":
-      templateCollections = "import { blogCollections } from '@kyro-cms/core/templates';";
+      templateCollections = "import { blogCollections, mediaCollections, authCollections } from '@kyro-cms/core/templates';";
       templateGlobals = "import { allSettingsGlobals } from '@kyro-cms/core/templates';";
       break;
     case "ecommerce":
-      templateCollections = "import { ecommerceCollections } from '@kyro-cms/core/templates';";
+      templateCollections = "import { ecommerceCollections, mediaCollections, authCollections } from '@kyro-cms/core/templates';";
       templateGlobals = "import { allSettingsGlobals, ecommerceSettingsGlobals } from '@kyro-cms/core/templates';";
       break;
     case "kitchen-sink":
-      templateCollections = `import { minimalCollections, blogCollections, ecommerceCollections, kitchenSinkCollections } from '@kyro-cms/core/templates';`;
+      templateCollections = `import { minimalCollections, blogCollections, ecommerceCollections, kitchenSinkCollections, mediaCollections, authCollections } from '@kyro-cms/core/templates';`;
       templateGlobals = "import { allSettingsGlobals, ecommerceSettingsGlobals } from '@kyro-cms/core/templates';";
       break;
   }
@@ -227,17 +242,31 @@ function generateKyroConfig(answers) {
   if (templateGlobals) imports.push(templateGlobals);
   let collectionsConfig = "";
   if (answers.template === "minimal") {
-    collectionsConfig = `  collections: Object.values(minimalCollections),`;
+    collectionsConfig = `  collections: [
+    ...Object.values(minimalCollections),
+    ...Object.values(mediaCollections),
+    ...Object.values(authCollections),
+  ],`;
   } else if (answers.template === "blog") {
-    collectionsConfig = `  collections: Object.values(blogCollections),`;
+    collectionsConfig = `  collections: [
+    ...Object.values(blogCollections),
+    ...Object.values(mediaCollections),
+    ...Object.values(authCollections),
+  ],`;
   } else if (answers.template === "ecommerce") {
-    collectionsConfig = `  collections: Object.values(ecommerceCollections),`;
+    collectionsConfig = `  collections: [
+    ...Object.values(ecommerceCollections),
+    ...Object.values(mediaCollections),
+    ...Object.values(authCollections),
+  ],`;
   } else if (answers.template === "kitchen-sink") {
     collectionsConfig = `  collections: [
     ...Object.values(minimalCollections),
     ...Object.values(blogCollections),
     ...Object.values(ecommerceCollections),
     ...Object.values(kitchenSinkCollections),
+    ...Object.values(mediaCollections),
+    ...Object.values(authCollections),
   ],`;
   }
   let globalsConfig = "";
@@ -256,7 +285,9 @@ export default defineConfig({
 ${adapterLines.join("\n")}
 ${collectionsConfig}
 ${globalsConfig}
-  auth: true,
+  auth: {
+    secret: process.env.APP_SECRET,
+  },
 });`;
 }
 
@@ -265,13 +296,15 @@ function generateAstroConfig(answers) {
   return `import { defineConfig } from 'astro/config';
 import { kyro } from '@kyro-cms/core';
 import { kyroAdmin } from '@kyro-cms/admin';
+import react from '@astrojs/react';
+import tailwind from '@tailwindcss/vite';
 
 export default defineConfig({
   output: 'server',
-  integrations: [
-    kyro({ adminPath: '/admin', apiPath: '/api' }),
-    kyroAdmin({ basePath: '/admin', apiPath: '/api' }),
-  ],
+  integrations: [react(), kyro({ adminPath: '/admin', apiPath: '/api' }), kyroAdmin({ basePath: '/admin', apiPath: '/api' })],
+  vite: {
+    plugins: [tailwind()],
+  },
   server: {
     port: 4321,
     host: true,
@@ -282,19 +315,30 @@ export default defineConfig({
 // src/generators/files.ts
 import { writeFileSync, mkdirSync } from "fs";
 import { join } from "path";
-function generateProjectFiles(answers, projectDir) {
+import { randomBytes } from "crypto";
+function generateAppSecret() {
+  return randomBytes(32).toString("hex");
+}
+function generateProjectFiles(answers, projectDir, adminCredentials) {
   const srcDir = join(projectDir, "src");
   const pagesDir = join(srcDir, "pages");
+  const stylesDir = join(srcDir, "styles");
   const publicDir = join(projectDir, "public");
   mkdirSync(pagesDir, { recursive: true });
+  mkdirSync(stylesDir, { recursive: true });
   mkdirSync(publicDir, { recursive: true });
+  if (answers.database === "sqlite") {
+    mkdirSync(join(projectDir, "data"), { recursive: true });
+  }
   const tsconfig = `{
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
   }
 }`;
   writeFileSync(join(projectDir, "tsconfig.json"), tsconfig);
@@ -333,17 +377,50 @@ Visit [https://kyro.dev](https://kyro.dev) for full documentation.
   const envExample = `# Kyro CMS Configuration
 # Copy this file to .env and fill in your values
 
+NODE_ENV=development
+APP_URL=http://localhost:4321
+
 ${answers.database === "sqlite" ? "# SQLite (local) - no additional config needed" : answers.database === "postgres" ? "# Database connection (PostgreSQL)\nDATABASE_URL=postgresql://user:password@localhost:5432/kyro_cms" : "# MongoDB connection\nMONGODB_URI=mongodb://localhost:27017/kyro_cms"}
 
-# JWT secret for authentication tokens
-JWT_SECRET=change-this-to-a-random-64-character-string
+# App secret (set once; on first run it's stored in the database and can be managed via admin UI)
+APP_SECRET=your-secret-here
 
 # Admin credentials (used for first-user bootstrap)
 # KYRO_ADMIN_EMAIL=admin@example.com
 # KYRO_ADMIN_PASSWORD=SecurePass123!
 `;
   writeFileSync(join(projectDir, ".env.example"), envExample);
+  if (adminCredentials) {
+    const envFile = `# Kyro CMS Configuration
+# Copy this file to .env and fill in your values
+
+NODE_ENV=development
+APP_URL=http://localhost:4321
+
+${answers.database === "sqlite" ? "# SQLite (local) - no additional config needed" : answers.database === "postgres" ? "# Database connection (PostgreSQL)\nDATABASE_URL=postgresql://user:password@localhost:5432/kyro_cms" : "# MongoDB connection\nMONGODB_URI=mongodb://localhost:27017/kyro_cms"}
+
+# App secret (auto-generated; stored in database on first run)
+APP_SECRET=${generateAppSecret()}
+
+# Admin credentials (used for first-user bootstrap)
+KYRO_ADMIN_EMAIL=${adminCredentials.adminEmail}
+KYRO_ADMIN_PASSWORD=${adminCredentials.adminPassword}
+`;
+    writeFileSync(join(projectDir, ".env"), envFile);
+  }
+  const mainCss = `@import "tailwindcss";
+
+@source "./pages/**/*.{astro,html,js,jsx,ts,tsx}";
+@source "./components/**/*.{astro,html,js,jsx,ts,tsx}";
+@source "./layouts/**/*.{astro,html,js,jsx,ts,tsx}";
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+}
+`;
+  writeFileSync(join(stylesDir, "main.css"), mainCss);
   const indexPage = `---
+import "../styles/main.css";
 const title = "${answers.projectName}";
 ---
 <!DOCTYPE html>
@@ -353,38 +430,52 @@ const title = "${answers.projectName}";
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{title}</title>
   </head>
-  <body>
-    <main>
-      <h1>Welcome to {title}</h1>
-      <p>Your Kyro CMS is ready.</p>
-      <p><a href="/admin">Go to Admin Dashboard &rarr;</a></p>
-    </main>
+  <body
+    class="min-h-screen bg-gradient-to-br from-stone-50 via-white to-stone-100 dark:from-stone-950 dark:via-stone-900 dark:to-stone-950 text-stone-900 dark:text-stone-100 antialiased"
+  >
+    <div class="relative min-h-screen flex flex-col items-center justify-center px-4">
+      <!-- Decorative background blurs -->
+      <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
+        <div class="absolute -top-40 -right-40 w-96 h-96 rounded-full bg-indigo-100/60 dark:bg-indigo-900/20 blur-3xl"></div>
+        <div class="absolute -bottom-40 -left-40 w-96 h-96 rounded-full bg-indigo-100/60 dark:bg-indigo-900/20 blur-3xl"></div>
+      </div>
+
+      <main class="relative text-center max-w-lg">
+        <!-- Badge -->
+        <div class="mb-8 inline-flex items-center gap-2 px-3 py-1 rounded-full border border-stone-200 dark:border-stone-700 text-xs font-medium text-stone-500 dark:text-stone-400">
+          <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
+          Powered by Kyro CMS
+        </div>
+
+        <!-- Title -->
+        <h1 class="mb-4 text-5xl sm:text-6xl font-black tracking-tight bg-gradient-to-r from-stone-900 to-stone-500 dark:from-white dark:to-stone-400 bg-clip-text text-transparent">
+          {title}
+        </h1>
+
+        <!-- Tagline -->
+        <p class="mb-10 text-lg sm:text-xl text-stone-500 dark:text-stone-400 leading-relaxed">
+          Your content management system is ready. Start building something amazing.
+        </p>
+
+        <!-- Admin link -->
+        <a
+          href="/admin"
+          class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-stone-900 dark:bg-white text-white dark:text-stone-900 font-semibold text-sm hover:bg-stone-800 dark:hover:bg-stone-100 transition-all shadow-lg hover:shadow-xl active:scale-[0.97]"
+        >
+          Go to Admin Dashboard
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
+          </svg>
+        </a>
+      </main>
+
+      <!-- Footer -->
+      <footer class="absolute bottom-8 text-xs text-stone-400 dark:text-stone-500">
+        &copy; {new Date().getFullYear()} {title}
+      </footer>
+    </div>
   </body>
 </html>
-
-<style>
-  main {
-    max-width: 800px;
-    margin: 4rem auto;
-    padding: 2rem;
-    text-align: center;
-    font-family: system-ui, sans-serif;
-  }
-  h1 {
-    font-size: 2.5rem;
-    margin-bottom: 1rem;
-  }
-  p {
-    color: #666;
-  }
-  a {
-    color: #6366f1;
-    text-decoration: none;
-  }
-  a:hover {
-    text-decoration: underline;
-  }
-</style>
 `;
   writeFileSync(join(pagesDir, "index.astro"), indexPage);
 }
@@ -393,6 +484,16 @@ const title = "${answers.projectName}";
 import { writeFileSync as writeFileSync2, mkdirSync as mkdirSync2, existsSync } from "fs";
 import { join as join2 } from "path";
 import { execSync } from "child_process";
+import { randomBytes as randomBytes2 } from "crypto";
+function generatePassword(length = 24) {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()";
+  const bytes = randomBytes2(length);
+  let password = "";
+  for (let i = 0; i < length; i++) {
+    password += chars[bytes[i] % chars.length];
+  }
+  return password;
+}
 var VERSION = "0.4.0";
 async function main() {
   logger.intro("create-kyro", VERSION);
@@ -402,6 +503,7 @@ async function main() {
     logger.error(`Directory "${answers.projectName}" already exists.`);
     process.exit(1);
   }
+  const adminPassword = generatePassword();
   const steps = [
     "Creating project directory",
     "Generating configuration files",
@@ -424,7 +526,7 @@ async function main() {
   const astroConfig = generateAstroConfig(answers);
   writeFileSync2(join2(projectDir, "astro.config.mjs"), astroConfig);
   logger.success("astro.config.mjs generated");
-  generateProjectFiles(answers, projectDir);
+  generateProjectFiles(answers, projectDir, { adminEmail: answers.adminEmail, adminPassword });
   logger.success("Project files generated");
   logger.step(3, steps.length, steps[2]);
   console.log("  Installing dependencies...");
@@ -457,7 +559,14 @@ async function main() {
   console.log("  Visit http://localhost:4321 to see your app.");
   console.log("  Visit http://localhost:4321/admin for the admin dashboard.");
   console.log("");
-  console.log("  The first user to register will be the super admin.");
+  console.log("  \x1B[33m\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\x1B[0m");
+  console.log("  \x1B[33m  Admin Account Created\x1B[0m");
+  console.log("  \x1B[33m\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\x1B[0m");
+  console.log(`    Email:    \x1B[36m${answers.adminEmail}\x1B[0m`);
+  console.log(`    Password: \x1B[36m${adminPassword}\x1B[0m`);
+  console.log("  \x1B[33m\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\x1B[0m");
+  console.log("  The admin user will be created automatically on first server start.");
+  console.log("  You can change these credentials in the .env file.");
   console.log("");
 }
 main().catch((error) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-kyro",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "description": "Interactive scaffolding for Kyro CMS projects",
   "type": "module",
   "bin": {

package/src/generators/files.ts

@@ -26,13 +26,19 @@ export function generateProjectFiles(
   mkdirSync(stylesDir, { recursive: true });
   mkdirSync(publicDir, { recursive: true });
 
+  if (answers.database === "sqlite") {
+    mkdirSync(join(projectDir, "data"), { recursive: true });
+  }
+
   const tsconfig = `{
   "extends": "astro/tsconfigs/strict",
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
   }
 }`;
 
@@ -77,6 +83,9 @@ Visit [https://kyro.dev](https://kyro.dev) for full documentation.
   const envExample = `# Kyro CMS Configuration
 # Copy this file to .env and fill in your values
 
+NODE_ENV=development
+APP_URL=http://localhost:4321
+
 ${answers.database === "sqlite"
       ? "# SQLite (local) - no additional config needed"
       : answers.database === "postgres"
@@ -98,6 +107,9 @@ APP_SECRET=your-secret-here
     const envFile = `# Kyro CMS Configuration
 # Copy this file to .env and fill in your values
 
+NODE_ENV=development
+APP_URL=http://localhost:4321
+
 ${answers.database === "sqlite"
         ? "# SQLite (local) - no additional config needed"
         : answers.database === "postgres"
@@ -118,6 +130,10 @@ KYRO_ADMIN_PASSWORD=${adminCredentials.adminPassword}
 
   const mainCss = `@import "tailwindcss";
 
+@source "./pages/**/*.{astro,html,js,jsx,ts,tsx}";
+@source "./components/**/*.{astro,html,js,jsx,ts,tsx}";
+@source "./layouts/**/*.{astro,html,js,jsx,ts,tsx}";
+
 @theme {
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
 }

package/src/generators/packagejson.ts

@@ -18,18 +18,24 @@ export function generatePackageJson(
     "@astrojs/react": "^5.0.4",
     "@tailwindcss/vite": "^4.0.0",
     "tailwindcss": "^4.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "@kyro-cms/core": "latest",
     "@kyro-cms/admin": "latest",
   };
 
   const devDeps: Record<string, string> = {
     "typescript": "^5.7.3",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
   };
 
   const scripts: Record<string, string> = {
     "dev": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
+    "kyro:dev": "kyro dev",
+    "kyro:generate": "kyro generate",
   };
 
   if (answers.database === "sqlite") {

package/test/generators.test.ts

@@ -216,12 +216,18 @@ describe("generators", () => {
 
     it("never includes old dependencies", () => {
       const pkg = generatePackageJson(baseAnswers);
-      expect(pkg.dependencies["react"]).toBeUndefined();
-      expect(pkg.dependencies["react-dom"]).toBeUndefined();
+      expect(pkg.dependencies["react"]).toBeDefined();
+      expect(pkg.dependencies["react-dom"]).toBeDefined();
       expect(pkg.dependencies["lucide-react"]).toBeUndefined();
       expect(pkg.dependencies["mysql2"]).toBeUndefined();
     });
 
+    it("includes react type definitions", () => {
+      const pkg = generatePackageJson(baseAnswers);
+      expect(pkg.devDependencies["@types/react"]).toBeDefined();
+      expect(pkg.devDependencies["@types/react-dom"]).toBeDefined();
+    });
+
     it("includes tailwindcss and @tailwindcss/vite", () => {
       const pkg = generatePackageJson(baseAnswers);
       expect(pkg.dependencies["tailwindcss"]).toBeDefined();

package/test/integration.test.ts

@@ -102,9 +102,8 @@ describe("file generation", () => {
         expect(deps).toContain("@kyro-cms/core");
         expect(deps).toContain("@kyro-cms/admin");
         expect(deps).toContain("astro");
-        // No react, no react-dom, no lucide-react
-        expect(deps).not.toContain("react");
-        expect(deps).not.toContain("react-dom");
+        expect(deps).toContain("react");
+        expect(deps).toContain("react-dom");
         expect(deps).not.toContain("lucide-react");
         expect(deps).not.toContain("mysql2");
       });