create-nxpress-app 1.0.6 → 1.0.8

package/dist/index.js

@@ -12,6 +12,40 @@ const fs_extra_1 = __importDefault(require("fs-extra"));
 const path_1 = __importDefault(require("path"));
 const util_1 = require("util");
 const execAsync = (0, util_1.promisify)(child_process_1.exec);
+const deps = ["@nxpress/core"];
+const devDeps = ["@types/express", "@types/node", "typescript"];
+function getInstallCommands(pm, depsList, devDepsList) {
+    const depsStr = depsList.join(" ");
+    const devDepsStr = devDepsList.join(" ");
+    switch (pm) {
+        case "npm":
+            return {
+                depsCmd: `npm install ${depsStr}`,
+                devDepsCmd: `npm install -D ${devDepsStr}`,
+            };
+        case "yarn":
+            return {
+                depsCmd: `yarn add ${depsStr}`,
+                devDepsCmd: `yarn add -D ${devDepsStr}`,
+            };
+        case "bun":
+            return {
+                depsCmd: `bun add ${depsStr}`,
+                devDepsCmd: `bun add -d ${devDepsStr}`,
+            };
+        case "deno":
+            return {
+                depsCmd: `deno add ${depsStr}`,
+                devDepsCmd: `deno add -D ${devDepsStr}`,
+            };
+        case "pnpm":
+        default:
+            return {
+                depsCmd: `pnpm add ${depsStr}`,
+                devDepsCmd: `pnpm add -D ${devDepsStr}`,
+            };
+    }
+}
 const program = new commander_1.Command();
 program
     .name("create-nxpress-app")
@@ -23,7 +57,7 @@ program
     .option("--app-dir <dir>", "Directory for application routes")
     .option("--components-dir <dir>", "Directory for components")
     .option("--public-dir <dir>", "Directory for static assets")
-    .option("--skip-install", "Skip installing dependencies", false)
+    .option("--pkg-manager <pm>", "Package manager (pnpm, npm, yarn, bun, deno)")
     .action(async (projectDirArg, options) => {
     console.log();
     (0, prompts_1.intro)(chalk_1.default.bgCyan.black(" Create Nxpress App "));
@@ -135,17 +169,47 @@ program
             publicDirName = pubRes;
         }
     }
-    let shouldInstall = !options.skipInstall;
-    if (!options.skipInstall && process.stdin.isTTY) {
-        const res = await (0, prompts_1.confirm)({
-            message: "Install dependencies using pnpm?",
-            initialValue: true,
+    let pkgManager = options.pkgManager;
+    if (process.stdin.isTTY && !options.pkgManager) {
+        const selectedPm = await (0, prompts_1.select)({
+            message: "Which package manager do you want to use?",
+            options: [
+                {
+                    value: "pnpm",
+                    label: "pnpm (Default)",
+                    hint: "Fast & disk space efficient",
+                },
+                {
+                    value: "npm",
+                    label: "npm",
+                    hint: "Default Node.js package manager",
+                },
+                {
+                    value: "yarn",
+                    label: "yarn",
+                    hint: "Classic/Berry package manager",
+                },
+                {
+                    value: "bun",
+                    label: "bun",
+                    hint: "Ultra-fast runtime & package manager",
+                },
+                {
+                    value: "deno",
+                    label: "deno",
+                    hint: "Modern JavaScript/TypeScript runtime",
+                },
+            ],
+            initialValue: "pnpm",
         });
-        if ((0, prompts_1.isCancel)(res)) {
+        if ((0, prompts_1.isCancel)(selectedPm)) {
             (0, prompts_1.cancel)("Operation cancelled.");
             process.exit(0);
         }
-        shouldInstall = res;
+        pkgManager = selectedPm;
+    }
+    if (!pkgManager) {
+        pkgManager = "pnpm";
     }
     const s = (0, prompts_1.spinner)();
     s.start("Scaffolding project...");
@@ -157,102 +221,47 @@ program
     fs_extra_1.default.ensureDirSync(appDir);
     fs_extra_1.default.ensureDirSync(componentsDir);
     fs_extra_1.default.ensureDirSync(publicDir);
+    const templatesDir = path_1.default.resolve(__dirname, "..", "templates");
     const ext = engine === "handlebars" ? "hbs" : engine;
-    // Root layout
-    const layoutContent = engine === "handlebars"
-        ? `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>{{title}}</title>
-</head>
-<body class="bg-slate-900 text-white min-h-screen">
-  {{{body}}}
-</body>
-</html>`
-        : engine === "ejs"
-            ? `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title><%= title %></title>
-</head>
-<body class="bg-slate-900 text-white min-h-screen">
-  <%- body %>
-</body>
-</html>`
-            : `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Nxpress App</title>
-</head>
-<body class="bg-slate-900 text-white min-h-screen">
-  <!-- Content -->
-</body>
-</html>`;
-    fs_extra_1.default.writeFileSync(path_1.default.join(appDir, `layout.${ext}`), layoutContent);
-    // Index page
-    const indexPageContent = engine === "handlebars"
-        ? `<div class="max-w-4xl mx-auto px-4 py-16 text-center">
-  <h1 class="text-5xl font-bold mb-4 bg-linear-to-r from-blue-400 to-indigo-500 bg-clip-text text-transparent">
-    Welcome to {{title}}
-  </h1>
-  <p class="text-xl text-slate-400 mb-8">{{description}}</p>
-  <div class="inline-block bg-slate-800 border border-slate-700 rounded-lg p-6 text-left">
-    <p class="text-sm font-mono text-cyan-400">Edit <span class="text-amber-300">${appDirName}/index.${ext}</span> to get started.</p>
-  </div>
-</div>`
-        : engine === "ejs"
-            ? `<div class="max-w-4xl mx-auto px-4 py-16 text-center">
-  <h1 class="text-5xl font-bold mb-4 bg-linear-to-r from-blue-400 to-indigo-500 bg-clip-text text-transparent">
-    Welcome to <%= title %>
-  </h1>
-  <p class="text-xl text-slate-400 mb-8"><%= description %></p>
-  <div class="inline-block bg-slate-800 border border-slate-700 rounded-lg p-6 text-left">
-    <p class="text-sm font-mono text-cyan-400">Edit <span class="text-amber-300">${appDirName}/index.${ext}</span> to get started.</p>
-  </div>
-</div>`
-            : `<div class="max-w-4xl mx-auto px-4 py-16 text-center">
-  <h1 class="text-5xl font-bold mb-4 bg-linear-to-r from-blue-400 to-indigo-500 bg-clip-text text-transparent">
-    Welcome to Nxpress
-  </h1>
-  <p class="text-xl text-slate-400 mb-8">Express.js with Next.js developer experience</p>
-</div>`;
-    fs_extra_1.default.writeFileSync(path_1.default.join(appDir, `index.${ext}`), indexPageContent);
+    // Copy public assets (e.g., logo.png)
+    const templatePublicDir = path_1.default.join(templatesDir, "public");
+    if (fs_extra_1.default.existsSync(templatePublicDir)) {
+        fs_extra_1.default.copySync(templatePublicDir, publicDir);
+    }
+    // Root layout from template
+    const layoutTemplatePath = path_1.default.join(templatesDir, "app", `layout.${ext}`);
+    if (fs_extra_1.default.existsSync(layoutTemplatePath)) {
+        fs_extra_1.default.copySync(layoutTemplatePath, path_1.default.join(appDir, `layout.${ext}`));
+    }
+    // Index page from template
+    const indexTemplatePath = path_1.default.join(templatesDir, "app", `index.${ext}`);
+    if (fs_extra_1.default.existsSync(indexTemplatePath)) {
+        let content = fs_extra_1.default.readFileSync(indexTemplatePath, "utf8");
+        content = content.replace(/app\/index\.(hbs|ejs|html)/g, `${appDirName}/index.${ext}`);
+        fs_extra_1.default.writeFileSync(path_1.default.join(appDir, `index.${ext}`), content);
+    }
     // Data loader for index page
-    const indexTsContent = `import { Request, Response } from "express";
-
-export async function props(req: Request, res: Response) {
-  return {
-    title: 'Nxpress App',
-    description: 'Express.js with Next.js developer experience',
-  };
-}
-`;
-    fs_extra_1.default.writeFileSync(path_1.default.join(appDir, "index.ts"), indexTsContent);
+    const indexTsTemplatePath = path_1.default.join(templatesDir, "app", "index.ts");
+    if (fs_extra_1.default.existsSync(indexTsTemplatePath)) {
+        fs_extra_1.default.copySync(indexTsTemplatePath, path_1.default.join(appDir, "index.ts"));
+    }
     // App CSS for Tailwind v4
-    fs_extra_1.default.writeFileSync(path_1.default.join(targetPath, "app.css"), `@import "tailwindcss";\n@import "tailwindcss/preflight";\n@tailwind utilities;\n`);
+    const appCssTemplatePath = path_1.default.join(templatesDir, "app.css");
+    if (fs_extra_1.default.existsSync(appCssTemplatePath)) {
+        fs_extra_1.default.copySync(appCssTemplatePath, path_1.default.join(targetPath, "app.css"));
+    }
     // Server file
-    const serverTsContent = `import { nxpress } from '@nxpress/core';
-
-const app = nxpress({
-  engine: '${engine === "handlebars" ? "hbs" : engine}',
-});
-
-const PORT = process.env.PORT || ${port};
-app.listen(PORT, () => {
-  console.log(\`Nxpress server running on http://localhost:\${PORT}\`);
-});
-`;
-    fs_extra_1.default.writeFileSync(path_1.default.join(targetPath, "server.ts"), serverTsContent);
-    const pkgVersion = "1.0.5";
+    const serverTsTemplatePath = path_1.default.join(templatesDir, "server.ts");
+    if (fs_extra_1.default.existsSync(serverTsTemplatePath)) {
+        let serverContent = fs_extra_1.default.readFileSync(serverTsTemplatePath, "utf8");
+        serverContent = serverContent
+            .replace("{{ENGINE}}", engine === "handlebars" ? "hbs" : engine)
+            .replace("{{PORT}}", port.toString());
+        fs_extra_1.default.writeFileSync(path_1.default.join(targetPath, "server.ts"), serverContent);
+    }
     // nxpress.config.json
     const nxConfig = {
-        $schema: `https://unpkg.com/@nxpress/core@${pkgVersion}/schema.json`,
+        $schema: `https://unpkg.com/@nxpress/core@latest/schema.json`,
         port,
         engine: engine === "handlebars" ? "hbs" : engine,
         appDir: appDirName,
@@ -270,14 +279,6 @@ app.listen(PORT, () => {
             build: "tsc",
             start: "nxpress start",
         },
-        dependencies: {
-            "@nxpress/core": `^${pkgVersion}`,
-        },
-        devDependencies: {
-            "@types/express": "^5.0.6",
-            "@types/node": "^26.1.1",
-            typescript: "^7.0.2",
-        },
     };
     fs_extra_1.default.writeFileSync(path_1.default.join(targetPath, "package.json"), JSON.stringify(projectPkgJson, null, 2));
     // tsconfig.json for target project
@@ -303,20 +304,21 @@ dist
 `;
     fs_extra_1.default.writeFileSync(path_1.default.join(targetPath, ".gitignore"), gitignoreContent);
     s.stop("Project structure created successfully.");
-    if (shouldInstall) {
-        const instSpinner = (0, prompts_1.spinner)();
-        instSpinner.start("Installing dependencies with pnpm...");
-        try {
-            await execAsync("pnpm install", { cwd: targetPath });
-            instSpinner.stop("Dependencies installed successfully.");
-        }
-        catch (err) {
-            instSpinner.stop("Failed to install dependencies automatically.");
-        }
+    const instSpinner = (0, prompts_1.spinner)();
+    instSpinner.start(`Installing dependencies with ${pkgManager}...`);
+    try {
+        const { depsCmd, devDepsCmd } = getInstallCommands(pkgManager, deps, devDeps);
+        await execAsync(depsCmd, { cwd: targetPath });
+        await execAsync(devDepsCmd, { cwd: targetPath });
+        instSpinner.stop("Dependencies installed successfully.");
+    }
+    catch (err) {
+        instSpinner.stop("Failed to install dependencies automatically.");
     }
+    const devCmd = pkgManager === "npm" ? "npm run dev" : `${pkgManager} dev`;
     (0, prompts_1.outro)(`Project created in ${chalk_1.default.cyan(projectDir)}!\n\n` +
         `Next steps:\n` +
         `  ${chalk_1.default.cyan(`cd ${projectDir}`)}\n` +
-        `  ${chalk_1.default.cyan("pnpm dev")}`);
+        `  ${chalk_1.default.cyan(devCmd)}`);
 });
 program.parse(process.argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nxpress-app",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "CLI tool to create Nxpress applications",
   "main": "dist/index.js",
   "bin": {
@@ -28,6 +28,7 @@
     "fs-extra": "^11.4.0"
   },
   "devDependencies": {
+    "@types/express": "^5.0.6",
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^26.1.1",
     "typescript": "^7.0.2"

package/templates/app/index.ejs

@@ -0,0 +1,92 @@
+<div class="min-h-screen flex flex-col justify-between max-w-6xl mx-auto px-6 py-8">
+  <header class="flex items-center justify-between py-4 border-b border-slate-800/80">
+    <div class="flex items-center gap-3">
+      <span class="font-bold text-lg text-slate-100 tracking-tight">Nxpress</span>
+      <span
+        class="text-xs font-mono px-2 py-0.5 rounded-full bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 font-medium">
+        v<%= version %>
+      </span>
+    </div>
+    <% if (!E.NODE_ENV || E.NODE_ENV.toLowerCase() !=='prod' ) { %>
+      <div class="flex items-center gap-2">
+        <span
+          class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
+          <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
+          Dev Server Active
+        </span>
+      </div>
+      <% } %>
+  </header>
+
+  <main class="py-16 md:py-24 text-center my-auto">
+    <div class="flex justify-center mb-6">
+      <img src="/logo.png" alt="Nxpress"
+        class="w-16 h-16 sm:w-20 sm:h-20 object-contain drop-shadow-[0_0_25px_rgba(99,102,241,0.5)] transition-transform hover:scale-105 duration-300" />
+    </div>
+
+    <h1
+      class="text-4xl sm:text-6xl md:text-7xl font-extrabold tracking-tight text-white mb-6 max-w-4xl mx-auto leading-[1.1]">
+      Build fast Node apps with
+      <span class="bg-linear-to-r from-indigo-400 via-sky-400 to-cyan-300 bg-clip-text text-transparent">
+        <%= title %>
+      </span>
+    </h1>
+
+    <p class="text-lg sm:text-xl text-slate-400 max-w-2xl mx-auto mb-10 leading-relaxed">
+      <%= description %>
+    </p>
+
+    <div class="max-w-xl mx-auto mb-16">
+      <div
+        class="group relative rounded-2xl bg-linear-to-b from-slate-800/80 to-slate-900/90 border border-slate-700/80 p-5 shadow-2xl backdrop-blur-md transition-all hover:border-indigo-500/40">
+        <div
+          class="flex items-center justify-between mb-3 text-xs text-slate-400 font-mono border-b border-slate-800 pb-3">
+          <div class="flex items-center gap-2">
+            <span class="w-3 h-3 rounded-full bg-rose-500/80 inline-block"></span>
+            <span class="w-3 h-3 rounded-full bg-amber-500/80 inline-block"></span>
+            <span class="w-3 h-3 rounded-full bg-emerald-500/80 inline-block"></span>
+            <span class="ml-2 text-slate-500">app/index.ejs</span>
+          </div>
+          <span class="text-indigo-400 font-sans text-[11px] font-semibold tracking-wide uppercase">Quick Start</span>
+        </div>
+        <div class="text-left font-mono text-sm py-2">
+          <p class="text-slate-300">
+            <span class="text-purple-400">Edit</span>
+            <span
+              class="text-emerald-300 px-1.5 py-0.5 rounded bg-slate-800 border border-slate-700">app/index.ejs</span>
+            <span class="text-slate-400">to customize this page.</span>
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-4xl mx-auto text-left">
+      <% features.forEach(function(feat) { %>
+        <div
+          class="p-6 rounded-2xl bg-slate-900/50 border border-slate-800/80 hover:border-slate-700 transition-all duration-200 group">
+          <div class="flex items-center justify-between mb-3">
+            <span
+              class="text-xs font-semibold px-2.5 py-1 rounded-md bg-slate-800 text-indigo-400 border border-slate-700/50">
+              <%= feat.tag %>
+            </span>
+            <span class="text-slate-600 group-hover:text-slate-400 transition-colors text-sm">→</span>
+          </div>
+          <h3 class="text-base font-bold text-slate-100 mb-1.5 group-hover:text-indigo-300 transition-colors">
+            <%= feat.title %>
+          </h3>
+          <p class="text-sm text-slate-400 leading-relaxed">
+            <%= feat.desc %>
+          </p>
+        </div>
+        <% }); %>
+    </div>
+  </main>
+
+  <footer
+    class="py-6 border-t border-slate-800/60 text-center text-xs text-slate-500 flex flex-col sm:flex-row items-center justify-between gap-3">
+    <p>Powered by <span class="text-slate-300 font-medium">Nxpress</span></p>
+    <p class="font-mono text-slate-600">
+      <%= R.base %>
+    </p>
+  </footer>
+</div>

package/templates/app/index.hbs

@@ -0,0 +1,113 @@
+<div class="min-h-screen flex flex-col justify-between max-w-6xl mx-auto px-6 py-8">
+  <!-- Top Navigation -->
+  <header class="flex items-center justify-between py-4 border-b border-slate-800/80">
+    <div class="flex items-center gap-3">
+      <span class="font-bold text-lg text-slate-100 tracking-tight">
+        Nxpress
+      </span>
+      <span
+        class="text-xs font-mono px-2 py-0.5 rounded-full bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 font-medium">
+        v{{version}}
+      </span>
+    </div>
+    {{#if (ne (lower E.NODE_ENV) 'prod')}}
+    <div class="flex items-center gap-2">
+      <span
+        class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
+        <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
+        Dev Server Active
+      </span>
+    </div>
+    {{/if}}
+  </header>
+
+  <!-- Hero Section -->
+  <main class="py-16 md:py-24 text-center my-auto">
+    <div class="flex justify-center mb-6">
+      <img src="/logo.png" alt="Nxpress"
+        class="w-16 h-16 sm:w-20 sm:h-20 object-contain drop-shadow-[0_0_25px_rgba(99,102,241,0.5)] transition-transform hover:scale-105 duration-300" />
+    </div>
+    <h1
+      class="text-4xl sm:text-6xl md:text-7xl font-extrabold tracking-tight text-white mb-6 max-w-4xl mx-auto leading-[1.1]">
+      Build fast Node apps with
+      <span class="bg-linear-to-r from-indigo-400 via-sky-400 to-cyan-300 bg-clip-text text-transparent">
+        {{title}}
+      </span>
+    </h1>
+    <p class="text-lg sm:text-xl text-slate-400 max-w-2xl mx-auto mb-10 leading-relaxed">
+      {{description}}
+    </p>
+
+    <!-- Code Snippet Card -->
+    <div class="max-w-xl mx-auto mb-16">
+      <div
+        class="group relative rounded-2xl bg-linear-to-b from-slate-800/80 to-slate-900/90 border border-slate-700/80 p-5 shadow-2xl backdrop-blur-md transition-all hover:border-indigo-500/40">
+        <div
+          class="flex items-center justify-between mb-3 text-xs text-slate-400 font-mono border-b border-slate-800 pb-3">
+          <div class="flex items-center gap-2">
+            <span class="w-3 h-3 rounded-full bg-rose-500/80 inline-block"></span>
+            <span class="w-3 h-3 rounded-full bg-amber-500/80 inline-block"></span>
+            <span class="w-3 h-3 rounded-full bg-emerald-500/80 inline-block"></span>
+            <span class="ml-2 text-slate-500">
+              app/index.hbs
+            </span>
+          </div>
+          <span class="text-indigo-400 font-sans text-[11px] font-semibold tracking-wide uppercase">
+            Quick Start
+          </span>
+        </div>
+        <div class="text-left font-mono text-sm py-2">
+          <p class="text-slate-300">
+            <span class="text-purple-400">
+              Edit
+            </span>
+            <span class="text-emerald-300 px-1.5 py-0.5 rounded bg-slate-800 border border-slate-700">
+              app/index.hbs
+            </span>
+            <span class="text-slate-400">
+              to customize this page.
+            </span>
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Feature Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-4xl mx-auto text-left">
+      {{#each features}}
+      <div
+        class="p-6 rounded-2xl bg-slate-900/50 border border-slate-800/80 hover:border-slate-700 transition-all duration-200 group">
+        <div class="flex items-center justify-between mb-3">
+          <span
+            class="text-xs font-semibold px-2.5 py-1 rounded-md bg-slate-800 text-indigo-400 border border-slate-700/50">
+            {{this.tag}}
+          </span>
+          <span class="text-slate-600 group-hover:text-slate-400 transition-colors text-sm">
+            →
+          </span>
+        </div>
+        <h3 class="text-base font-bold text-slate-100 mb-1.5 group-hover:text-indigo-300 transition-colors">
+          {{this.title}}
+        </h3>
+        <p class="text-sm text-slate-400 leading-relaxed">
+          {{this.desc}}
+        </p>
+      </div>
+      {{/each}}
+    </div>
+  </main>
+
+  <!-- Footer -->
+  <footer
+    class="py-6 border-t border-slate-800/60 text-center text-xs text-slate-500 flex flex-col sm:flex-row items-center justify-between gap-3">
+    <p>
+      Powered by
+      <span class="text-slate-300 font-medium">
+        Nxpress
+      </span>
+    </p>
+    <p class="font-mono text-slate-600">
+      {{R.base}}
+    </p>
+  </footer>
+</div>

package/templates/app/index.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en" class="dark h-full">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Express.js speed with Next.js developer experience.">
+  <title>Nxpress App</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="/tailwind.css">
+  <style>
+    body {
+      font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+    }
+
+    code,
+    pre {
+      font-family: 'JetBrains Mono', monospace;
+    }
+  </style>
+</head>
+
+<body
+  class="bg-[#0b0f19] text-slate-100 min-h-full antialiased selection:bg-indigo-500 selection:text-white relative overflow-x-hidden">
+  <div
+    class="pointer-events-none absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-7xl h-125 bg-radial from-indigo-500/15 via-purple-500/5 to-transparent blur-3xl -z-10">
+  </div>
+  <div class="pointer-events-none absolute top-1/3 right-10 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl -z-10"></div>
+
+  <!-- Content -->
+  <div class="min-h-screen flex flex-col justify-between max-w-6xl mx-auto px-6 py-8">
+    <header class="flex items-center justify-between py-4 border-b border-slate-800/80">
+      <div class="flex items-center gap-3">
+        <span class="font-bold text-lg text-slate-100 tracking-tight">Nxpress</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <span
+          class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
+          <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
+          Dev Server Active
+        </span>
+      </div>
+    </header>
+
+    <main class="py-16 md:py-24 text-center my-auto">
+      <div class="flex justify-center mb-6">
+        <img src="/logo.png" alt="Nxpress"
+          class="w-16 h-16 sm:w-20 sm:h-20 object-contain drop-shadow-[0_0_25px_rgba(99,102,241,0.5)] transition-transform hover:scale-105 duration-300" />
+      </div>
+
+      <h1
+        class="text-4xl sm:text-6xl md:text-7xl font-extrabold tracking-tight text-white mb-6 max-w-4xl mx-auto leading-[1.1]">
+        Welcome to
+        <span class="bg-linear-to-r from-indigo-400 via-sky-400 to-cyan-300 bg-clip-text text-transparent">
+          Nxpress
+        </span>
+      </h1>
+
+      <p class="text-lg sm:text-xl text-slate-400 max-w-2xl mx-auto mb-10 leading-relaxed">
+        Express.js speed with Next.js developer experience.
+      </p>
+    </main>
+
+    <footer
+      class="py-6 border-t border-slate-800/60 text-center text-xs text-slate-500 flex flex-col sm:flex-row items-center justify-between gap-3">
+      <p>Powered by <span class="text-slate-300 font-medium">Nxpress</span></p>
+    </footer>
+  </div>
+
+</body>
+
+</html>

package/templates/app/index.ts

@@ -0,0 +1,38 @@
+import type { Request, Response } from "express";
+
+export async function props(req: Request, res: Response) {
+  let version = "1.0.8";
+  try {
+    const f = await fetch("https://registry.npmjs.org/@nxpress/core/latest");
+    version = (await f.json()).version;
+  } catch (err) {
+    console.error("Getting Nxpress version failed.", err);
+  }
+  return {
+    title: "Nxpress Framework",
+    version: version,
+    description: "Express.js speed with Next.js developer experience.",
+    features: [
+      {
+        title: "File-Based Routing",
+        desc: "Automatic route handling mapped to the app directory structure.",
+        tag: "Zero Config",
+      },
+      {
+        title: "Server Data Props",
+        desc: "Export props functions in route files for SSR data loading.",
+        tag: "SSR Ready",
+      },
+      {
+        title: "Tailwind CSS Integration",
+        desc: "Modern styling out of the box with zero boilerplate.",
+        tag: "Styling",
+      },
+      {
+        title: "Fast Handlebars Engine",
+        desc: "Dynamic server rendering with seamless layout templates.",
+        tag: "Templating",
+      },
+    ],
+  };
+}

package/templates/app/layout.ejs

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en" class="dark h-full">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="<%= description %>">
+  <title>
+    <%= title %>
+  </title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="/tailwind.css">
+  <style>
+    body {
+      font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+    }
+
+    code,
+    pre {
+      font-family: 'JetBrains Mono', monospace;
+    }
+  </style>
+</head>
+
+<body
+  class="bg-[#0b0f19] text-slate-100 min-h-full antialiased selection:bg-indigo-500 selection:text-white relative overflow-x-hidden">
+  <div
+    class="pointer-events-none absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-7xl h-125 bg-radial from-indigo-500/15 via-purple-500/5 to-transparent blur-3xl -z-10">
+  </div>
+  <div class="pointer-events-none absolute top-1/3 right-10 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl -z-10"></div>
+
+  <%- body %>
+</body>
+
+</html>

package/templates/app/layout.hbs

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en" class="dark h-full">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="{{description}}">
+  <title>{{title}}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="/tailwind.css">
+  <style>
+    body {
+      font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+    }
+
+    code,
+    pre {
+      font-family: 'JetBrains Mono', monospace;
+    }
+  </style>
+</head>
+
+<body
+  class="bg-[#0b0f19] text-slate-100 min-h-full antialiased selection:bg-indigo-500 selection:text-white relative overflow-x-hidden">
+  <div
+    class="pointer-events-none absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-7xl h-125 bg-radial from-indigo-500/15 via-purple-500/5 to-transparent blur-3xl -z-10">
+  </div>
+  <div class="pointer-events-none absolute top-1/3 right-10 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl -z-10"></div>
+
+  {{{body}}}
+</body>
+
+</html>

package/templates/app.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@tailwind utilities;

package/templates/server.ts

@@ -0,0 +1,10 @@
+import { nxpress } from '@nxpress/core';
+
+const app = nxpress({
+  engine: '{{ENGINE}}',
+});
+
+const PORT = process.env.PORT || {{PORT}};
+app.listen(PORT, () => {
+  console.log(`Nxpress server running on http://localhost:${PORT}`);
+});