stack-starter-cli 1.0.0

package/README.md

@@ -0,0 +1,33 @@
+# starter-cli
+
+A simple CLI tool to quickly create full stack starter projects.
+
+## Features
+
+- HTML / CSS / JavaScript starter
+- React.js starter using Vite
+- Node.js backend using Express
+- Automatic starter files and folder structure
+
+## Run locally
+
+```bash
+npm install
+node bin/index.js
+
+After that:
+
+git add .
+git commit -m "Add README"
+```
+
+```bash
+shortcuts:
+- stack-starter
+- stack-starter my-app
+- stack-starter my-app --react
+- stack-starter my-app --html
+- stack-starter my-app --react --node
+- stack-starter my-app --html --node
+- stack-starter --help
+- stack-starter --version

package/bin/index.js

@@ -0,0 +1,364 @@
+#!/usr/bin/env node
+
+// -----------------------------
+// Required packages
+// -----------------------------
+const inquirer = require("inquirer").default;
+const fs = require("fs");
+const path = require("path");
+const { execSync } = require("child_process");
+
+// -----------------------------
+// starter --help and --version
+// -----------------------------
+const packageJson = require("../package.json");
+
+if (process.argv.includes("--help") || process.argv.includes("-h")) {
+  console.log(`
+starter - project scaffolding CLI
+
+Usage:
+  starter
+  starter my-app
+  starter my-app --react --node
+  starter my-app --html
+
+Options:
+  --help, -h       Show help
+  --version, -v    Show version
+  --react          Use React.js (Vite)
+  --html           Use HTML / CSS / JavaScript
+  --node           Use Node.js (Express)
+
+What it can create:
+  • HTML / CSS / JavaScript starter
+  • React.js (Vite) starter
+  • Node.js (Express) backend
+`);
+  process.exit(0);
+}
+
+if (process.argv.includes("--version") || process.argv.includes("-v")) {
+  console.log(packageJson.version);
+  process.exit(0);
+}
+
+// -----------------------------
+// CLI flags
+// -----------------------------
+const cliProjectName =
+  process.argv[2] && !process.argv[2].startsWith("-")
+    ? process.argv[2]
+    : null;
+
+const useReact = process.argv.includes("--react");
+const useHtml = process.argv.includes("--html");
+const useNode = process.argv.includes("--node");
+
+// -----------------------------
+// Resolve CLI-selected frontend/backend
+// -----------------------------
+let cliFrontend = null;
+let cliBackend = null;
+
+if (useReact) cliFrontend = "React.js (Vite)";
+if (useHtml) cliFrontend = "HTML / CSS / JavaScript";
+if (useNode) cliBackend = "Node.js (Express)";
+
+// -----------------------------
+// Helper: copy template files
+// -----------------------------
+function copyTemplate(source, destination) {
+  const content = fs.readFileSync(source, "utf-8");
+  fs.writeFileSync(destination, content);
+}
+
+// -----------------------------
+// Ask user for project details
+// -----------------------------
+inquirer
+  .prompt([
+    {
+      name: "projectName",
+      message: "Enter your project name:",
+      default: cliProjectName || undefined,
+      when: !cliProjectName,
+      validate(input) {
+        const projectName = cliProjectName || input;
+
+        if (!projectName.trim()) {
+          return "Project name cannot be empty.";
+        }
+
+        if (!/^[a-zA-Z0-9_-]+$/.test(projectName)) {
+          return "Use only letters, numbers, hyphen (-), or underscore (_).";
+        }
+
+        return true;
+      },
+    },
+    {
+      name: "frontend",
+      message: "Choose frontend:",
+      type: "rawlist",
+      choices: ["HTML / CSS / JavaScript", "React.js (Vite)", "None"],
+      default: 2,
+      when: !cliFrontend,
+    },
+    {
+      name: "backend",
+      message: "Choose backend:",
+      type: "rawlist",
+      choices: ["Node.js (Express)", "None"],
+      default: 1,
+      when: !cliBackend,
+    },
+  ])
+  .then((answers) => {
+    if (cliProjectName) {
+      answers.projectName = cliProjectName;
+    }
+
+    if (cliFrontend) {
+      answers.frontend = cliFrontend;
+    }
+
+    if (cliBackend) {
+      answers.backend = cliBackend;
+    }
+
+    if (!answers.frontend) {
+      answers.frontend = "None";
+    }
+
+    if (!answers.backend) {
+      answers.backend = "None";
+    }
+
+    const projectPath = path.join(process.cwd(), answers.projectName);
+
+    // -----------------------------
+    // Prevent duplicate folder names
+    // -----------------------------
+    if (fs.existsSync(projectPath)) {
+      console.log("\nA project with this name already exists.");
+      return;
+    }
+
+    // -----------------------------
+    // Create root project folder
+    // -----------------------------
+    fs.mkdirSync(projectPath);
+
+    // -----------------------------
+    // Base project files
+    // -----------------------------
+    fs.writeFileSync(
+      path.join(projectPath, ".gitignore"),
+      "node_modules\n.env\ndist\n.vite\n.DS_Store\ncoverage"
+    );
+
+    fs.writeFileSync(
+      path.join(projectPath, "README.md"),
+      `# ${answers.projectName}`
+    );
+
+    // =====================================================
+    // BACKEND SETUP
+    // =====================================================
+    if (answers.backend === "Node.js (Express)") {
+      const serverPath = path.join(projectPath, "server");
+
+      fs.mkdirSync(serverPath);
+
+      console.log("\nSetting up backend...");
+
+      try {
+        execSync("npm init -y", {
+          cwd: serverPath,
+          stdio: "inherit",
+          shell: process.env.ComSpec,
+        });
+
+        const pkgPath = path.join(serverPath, "package.json");
+
+        if (fs.existsSync(pkgPath)) {
+          const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+
+          pkg.scripts = {
+            start: "node index.js",
+            dev: "nodemon index.js",
+          };
+
+          fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+
+          console.log("✅ Scripts added to package.json");
+        }
+
+        execSync("npm install express cors dotenv", {
+          cwd: serverPath,
+          stdio: "inherit",
+          shell: process.env.ComSpec,
+        });
+
+        execSync("npm install -D nodemon", {
+          cwd: serverPath,
+          stdio: "inherit",
+          shell: process.env.ComSpec,
+        });
+
+        copyTemplate(
+          path.join(__dirname, "..", "templates", "server", "index.js"),
+          path.join(serverPath, "index.js")
+        );
+      } catch (error) {
+        console.log("\n❌ Backend setup failed.");
+        console.log("Check npm installation or internet connection.");
+        return;
+      }
+    }
+
+    // =====================================================
+    // FRONTEND SETUP - HTML / CSS / JS
+    // =====================================================
+    if (answers.frontend === "HTML / CSS / JavaScript") {
+      const clientPath = path.join(projectPath, "client");
+
+      fs.mkdirSync(clientPath);
+
+      console.log("\nSetting up HTML / CSS / JavaScript frontend...");
+
+      fs.writeFileSync(
+        path.join(clientPath, "index.html"),
+        `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>${answers.projectName}</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>Frontend Status: <span id="status">Loading...</span></h1>
+
+  <div id="response-box" style="padding: 20px; border: 1px solid #ccc; margin-top: 20px;">
+    Backend Message: <strong id="message">Please wait...</strong>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>`
+      );
+
+      fs.writeFileSync(
+        path.join(clientPath, "style.css"),
+        `body {
+  font-family: Arial, sans-serif;
+  padding: 40px;
+  text-align: center;
+  background: #f5f5f5;
+}
+
+#response-box {
+  background: white;
+  display: inline-block;
+  padding: 20px;
+  border-radius: 8px;
+}`
+      );
+
+      if (answers.backend === "Node.js (Express)") {
+        copyTemplate(
+          path.join(__dirname, "..", "templates", "html", "script.js"),
+          path.join(clientPath, "script.js")
+        );
+      } else {
+        fs.writeFileSync(
+          path.join(clientPath, "script.js"),
+          `const statusEl = document.getElementById("status");
+const messageEl = document.getElementById("message");
+
+statusEl.textContent = "Standalone";
+statusEl.style.color = "green";
+
+messageEl.textContent = "No backend selected. Frontend is ready.";`
+        );
+      }
+    }
+
+    // =====================================================
+    // FRONTEND SETUP - REACT
+    // =====================================================
+    else if (answers.frontend === "React.js (Vite)") {
+      const clientPath = path.join(projectPath, "client");
+
+      console.log("\nScaffolding React project...");
+
+      try {
+        execSync("npm create vite@latest client --yes -- --template react", {
+          cwd: projectPath,
+          stdio: ["ignore", "pipe", "pipe"],
+          shell: process.env.ComSpec,
+        });
+
+        console.log("Installing React dependencies...");
+
+        execSync("npm install", {
+          cwd: clientPath,
+          stdio: "inherit",
+          shell: process.env.ComSpec,
+        });
+
+        console.log("✅ React installation complete!");
+
+        if (answers.backend === "Node.js (Express)") {
+          copyTemplate(
+            path.join(__dirname, "..", "templates", "react", "App.jsx"),
+            path.join(clientPath, "src", "App.jsx")
+          );
+        }
+      } catch (error) {
+        console.log("\n❌ React setup failed.");
+        console.log("Check npm installation or internet connection.");
+        return;
+      }
+    }
+
+    // =====================================================
+    // FINAL INSTRUCTIONS
+    // =====================================================
+    console.log(`\n✅ Project "${answers.projectName}" created successfully!`);
+
+    if (
+      answers.frontend === "HTML / CSS / JavaScript" &&
+      answers.backend === "Node.js (Express)"
+    ) {
+      console.log("\nRun backend:");
+      console.log(`cd ${answers.projectName}/server`);
+      console.log("npm run dev");
+
+      console.log("\nThen open frontend:");
+      console.log(`${answers.projectName}/client/index.html`);
+    } else if (
+      answers.frontend === "React.js (Vite)" &&
+      answers.backend === "Node.js (Express)"
+    ) {
+      console.log("\nRun backend:");
+      console.log(`cd ${answers.projectName}/server`);
+      console.log("npm run dev");
+
+      console.log("\nOpen another terminal and run frontend:");
+      console.log(`cd ${answers.projectName}/client`);
+      console.log("npm run dev");
+    } else if (answers.frontend === "HTML / CSS / JavaScript") {
+      console.log("\nOpen frontend:");
+      console.log(`${answers.projectName}/client/index.html`);
+    } else if (answers.frontend === "React.js (Vite)") {
+      console.log("\nRun frontend:");
+      console.log(`cd ${answers.projectName}/client`);
+      console.log("npm run dev");
+    } else if (answers.backend === "Node.js (Express)") {
+      console.log("\nRun backend:");
+      console.log(`cd ${answers.projectName}/server`);
+      console.log("npm run dev");
+    }
+  });

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "stack-starter-cli",
+  "version": "1.0.0",
+  "description": "CLI to generate frontend and backend starter projects",
+  "main": "bin/index.js",
+  "bin": {
+    "stack-starter": "./bin/index.js"
+  },
+  "files": [
+    "bin",
+    "templates"
+  ],
+  "scripts": {
+    "start": "node bin/index.js"
+  },
+  "keywords": [
+    "cli",
+    "starter",
+    "scaffold",
+    "node",
+    "react",
+    "express"
+  ],
+  "author": "SACHITH KASA",
+  "license": "MIT",
+  "type": "commonjs",
+  "dependencies": {
+    "inquirer": "^13.4.2"
+  }
+}

package/templates/html/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Starter Project</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="script.js" defer></script>
+</head>
+<body>
+  <h1>Frontend Status: <span id="status">Connecting...</span></h1>
+  <div id="response-box">
+    Backend Message: <strong id="message">Waiting for server...</strong>
+  </div>
+
+</body>
+</html>

package/templates/html/script.js

@@ -0,0 +1,13 @@
+const messageEl = document.getElementById("message");
+const statusEl = document.getElementById("status");
+
+fetch("http://localhost:5000/")
+  .then((res) => res.text())
+  .then((data) => {
+    statusEl.textContent = "Online";
+    messageEl.textContent = data;
+  })
+  .catch(() => {
+    statusEl.textContent = "Offline";
+    messageEl.textContent = "Could not connect to backend";
+  });

package/templates/html/style.css

@@ -0,0 +1,11 @@
+body {
+  font-family: Arial, sans-serif;
+  padding: 40px;
+  text-align: center;
+}
+
+#response-box {
+  margin-top: 20px;
+  padding: 20px;
+  border: 1px solid #ccc;
+}

package/templates/react/App.jsx

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+function App() {
+  const [message, setMessage] = useState("Connecting to backend...");
+
+  useEffect(() => {
+    fetch("http://localhost:5000/")
+      .then((res) => res.text())
+      .then((data) => setMessage(data))
+      .catch(() => setMessage("Could not connect to backend"));
+  }, []);
+
+  return (
+    <div style={{ padding: "40px", fontFamily: "Arial" }}>
+      <h1>React Frontend Connected</h1>
+      <p>{message}</p>
+    </div>
+  );
+}
+
+export default App;

package/templates/server/index.js

@@ -0,0 +1,18 @@
+const express = require("express");
+const cors = require("cors");
+require("dotenv").config();
+
+const app = express();
+
+app.use(cors());
+app.use(express.json());
+
+app.get("/", (req, res) => {
+  res.send("Server is running and connected to Frontend!");
+});
+
+const PORT = process.env.PORT || 5000;
+
+app.listen(PORT, () => {
+  console.log(`Server running on port ${PORT}`);
+});