quick-scaffolds-cli 1.2.5 → 1.3.0

package/README.md

@@ -1,12 +1,12 @@
 # quick-scaffolds-cli
 
-A lightweight interactive CLI for scaffolding starter web projects quickly.
+A lightweight, interactive CLI for scaffolding starter web projects in seconds.
 
 ## Overview
 
-quick-scaffolds-cli generates a ready-to-use project from templates with a simple prompt flow.
+quick-scaffolds-cli is a command-line tool that generates ready-to-use web project starters with zero configuration. Answer a few simple prompts and get a fully structured project—choose between static HTML/CSS/JS or a modern React + Vite setup.
 
-Current release: v1.2.4
+**Current release:** v1.3.0 | **License:** MIT
 
 ## Quick Start
 
@@ -16,7 +16,7 @@ Install once and use the command anywhere:
 
 ```bash
 npm install -g quick-scaffolds-cli
-ct-pro my-awesome-app
+ct-pro
 ```
 
 ### Use with npx
@@ -24,43 +24,37 @@ ct-pro my-awesome-app
 Run without installing globally:
 
 ```bash
-npx quick-scaffolds-cli my-awesome-app
+npx quick-scaffolds-cli
 ```
 
 ## Usage
 
-Run the CLI with an initial project name, then choose whether to keep it or change it:
+Run the CLI and answer the prompts:
 
 ```bash
-ct-pro my-awesome-app
-? Your project name will be named "my-awesome-app". Do you want to keep it? (Y/n)
+ct-pro
+? What is your project name will be ? (Type "." to use the current directory) my-awesome-app
 ? What do you want to build?
-  Static HTML/CSS/JS
-  React starter
+  ❯ Static HTML/CSS/JS
+    React starter
 ```
 
-Prompt details:
+### Prompt Details
 
-1. Confirm project name:
-  - Keep the provided name
-  - Change it by entering a new project name (default: `my-new-project`)
-2. Project type:
-   - Static HTML/CSS/JS
-   - React starter
+**1. Project Name**
+- Enter a new folder name to create a new directory (default: `my-new-project`)
+- Enter `.` to scaffold directly in the current directory
 
-If you choose not to keep the provided name, the CLI asks:
-
-```bash
-? What is your project name? my-updated-app
-```
+**2. Project Type**
+- **Static HTML/CSS/JS:** A simple, lightweight static site starter—perfect for learning or quick prototypes
+- **React starter:** A modern React app with Vite, ESM modules, and optional React Router setup for navigation
 
 ## Templates
 
 ### 1. Static HTML/CSS/JS
+A simple, minimal starter template for static web projects.
 
-Creates a simple static site starter.
-
-Generated structure:
+**Generated structure:**
 
 ```text
 my-awesome-app/
@@ -71,17 +65,26 @@ my-awesome-app/
     └── app.js
 ```
 
-### 2. React starter (Vite)
+**Next steps:**
+```bash
+cd my-awesome-app
+# Open index.html in your browser
+```
+
+---
 
-Creates a React starter app with Vite, includes an interactive test component, and automatically runs npm install.
+### 2. React Starter (Vite + Modern ESM)
 
-Generated structure:
+A modern React starter with Vite, automatic dependency installation, and optional React Router setup.
+
+**Generated structure:**
 
 ```text
 my-awesome-app/
 ├── .gitignore
 ├── index.html
 ├── package.json
+├── vite.config.js
 ├── public/
 │   └── index.css
 └── src/
@@ -91,43 +94,80 @@ my-awesome-app/
     └── main.jsx
 ```
 
-After scaffolding a React project:
+**Interactive setup:**
+- 📦 Automatically installs npm dependencies after scaffolding
+- 🛣️ Prompts to install **React Router** for navigation (optional)
+✨ **Interactive CLI** — User-friendly prompts powered by [@inquirer/prompts](https://www.npmjs.com/package/@inquirer/prompts)
 
-```bash
-cd my-awesome-app
-npm run dev
+⚡ **Zero Configuration** — Choose a template and get a working project instantly
+
+🎨 **Two Templates:**
+- Static HTML/CSS/JS for simple projects
+- React + Vite with modern ESM module support
+
+🛣️ **React Router Setup** — Optional routing configuration for multi-page React apps
+
+📦 **Automatic Dependencies** — npm install runs automatically for React projects
+
+🎯 **Current Directory Support** — Use `.` to scaffold in your existing folder
+
+🚀 **Simple Command Interface** — Just run `ct-pro` from anywhere
 ```
 
+The generated app includes a counter button in `App.jsx` so you can immediately see React state updates in action
 The generated app includes a counter button and last-click timestamp in `App.jsx` so you can quickly confirm rendering and state updates.
 
 ## Features
 
-- Interactive CLI powered by @inquirer/prompts
-- Fast project scaffolding from local templates
-- Two starter options: static web or React + Vite
-- Automatic dependency installation for React template
-- Simple command interface via ct-pro
-
-## Troubleshooting
+### React Project is Blank
 
-- If the React page is blank, run the dev server inside your generated project folder:
+Ensure you're running the development server:
 
 ```bash
 cd my-awesome-app
 npm run dev
 ```
 
-- The React entry flow is:
-  - `index.html` loads `./src/main.jsx`
-  - `main.jsx` renders `App.jsx`
+Then open http://localhost:5173 in your browser.
 
-- If browser console shows `React is not defined`, ensure your `App.jsx` starts with:
+### React Entry Point
 
-```jsx
-import React from 'react';
-```
+The React app boots in this order:
+1. `index.html` loads your app into the root div
+2. `src/main.jsx` renders the React app
+3. `App.jsx` is the root React component
+
+### Dependencies Installation Failed
+The quick-scaffolds-cli repository is organized as follows:
 
-## Project Structure
+```text
+quick-scaffolds-cli/
+├── LICENSE
+├── README.md
+├── package.json
+├── bin/
+│   └── cli.js                    # Main CLI entry point
+├── templates/
+│   ├── html-template/            # Static web starter
+│   │   ├── index.html
+│   │   ├── css/
+│   │   │   └── style.css
+│   │   └── js/
+│   │       └── app.js
+│   └── react-template/           # React + Vite starter
+│       ├── .gitignore
+│       ├── index.html
+│       ├── package.json
+│       ├── vite.config.js
+│       ├── public/
+│       │   └── index.css
+│       └── src/
+│           ├── App.css
+│           ├── App.jsx
+│           ├── index.css
+│           ├── main.jsx
+│           └── pages/            # (created if React Router is selected)
+│               └── Home.jsx
 
 ```text
 quick-scaffolds-cli/

package/bin/cli.js

@@ -9,24 +9,14 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 async function main() {
-    let name = process.argv[2];
-
-    const keepName = await confirm({
-        message: `Your project name will be named "${name}". Do you want to keep it ?`,
-        default: true
-    });
-
-    if (!keepName) {
-        name = await input(
-            {
-                name: 'projectName',
-                message: 'What is your project name?',
-                type: 'input',
-                default: 'my-new-project'
-            }
-        );
-    }
-
+    const name = await input(
+        {
+            name: 'projectName',
+            message: 'What is your project name will be ? (Type "." to use the current directory)',
+            type: 'input',
+            default: 'my-new-project'
+        }
+    );
     const projectType = await select({
         message: 'What do you want to build?',
         type: "list",
@@ -47,12 +37,15 @@ async function main() {
     }
     try {
         const projectName = name;
-        const targetPath = path.join(process.cwd(), projectName);
+        const targetPath = projectName === '.' ? process.cwd() : path.join(process.cwd(), projectName);
 
         const templatePath = path.join(__dirname, '../templates', templateFolder);
-        await fs.mkdir(targetPath, { recursive: true });
+        if (projectName !== '.') {
+            await fs.mkdir(targetPath, { recursive: true });
+        }
         await fs.cp(templatePath, targetPath, { recursive: true });
-        console.log(`\nSuccessfully scaffolded the HTMl project - ${projectName}\n`)
+        const displayName = projectName === '.' ? path.basename(process.cwd()) : projectName;
+        console.log(`\nSuccessfully scaffolded the HTMl project - ${displayName}\n`)
 
     } catch (err) {
         console.error(`Error - ${err.message}`)
@@ -61,9 +54,14 @@ async function main() {
 
 async function reactApp(projectName, templateFolder) {
     try {
-        const targetPath = path.join(process.cwd(), projectName);
+        const isCurrentDirectory = projectName === '.';
+        const targetPath = isCurrentDirectory ? process.cwd() : path.join(process.cwd(), projectName);
+        const displayName = isCurrentDirectory ? path.basename(process.cwd()) : projectName;
+
         const templatePath = path.join(__dirname, '../templates', templateFolder);
-        await fs.mkdir(targetPath, { recursive: true });
+        if (!isCurrentDirectory) {
+            await fs.mkdir(targetPath, { recursive: true });
+        }
         await fs.cp(templatePath, targetPath, { recursive: true })
 
         const filesToUpdate = [
@@ -73,15 +71,16 @@ async function reactApp(projectName, templateFolder) {
         for (const filePath of filesToUpdate) {
             try {
                 const content = await fs.readFile(filePath, 'utf-8');
-                const updateContent = content.replaceAll('{{PROJECT_NAME}}', projectName);
+                const updateContent = content.replaceAll('{{PROJECT_NAME}}', displayName);
                 await fs.writeFile(filePath, updateContent);
             } catch (err) {
+                await fs.mkdir(targetPath, { recursive: true });
                 console.error(err);
                 console.error(`File path ${path.basename(filePath)} not found`);
             }
         }
 
-        console.log(`Successfully scaffolded the React starter project - ${projectName}\n`)
+        console.log(`Successfully scaffolded the React starter project - ${displayName}\n`)
         console.log('📦 Installing dependencies... This may take a minute.\n');
         try {
             execSync('npm install', {
@@ -89,6 +88,59 @@ async function reactApp(projectName, templateFolder) {
                 stdio: 'inherit'
             });
             console.log('✅ Dependencies installed successfully!\n');
+
+            const addRouterQuestion = await confirm({
+                message: 'Whould you like to setup React Router for navigation ?',
+                default: true
+            })
+
+            if (addRouterQuestion) {
+                console.log('Adding React Router...📦')
+                execSync('npm install react-router-dom', {
+                    cwd: targetPath,
+                    stdio: 'inherit'
+                });
+                const routerAppCode = `
+
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Home from './pages/Home';
+import React from 'react';
+
+function App() {
+    return (
+        <Router>
+            <Routes>
+                <Route path="/" element={<Home />} />
+            </Routes>
+        </Router>
+    );
+}
+
+export default App;
+
+             `;
+             const appJsxPath = path.join(targetPath, 'src', 'App.jsx');
+             await fs.writeFile(appJsxPath, routerAppCode);
+             const pageDirPath = path.join(targetPath, 'src', 'pages');
+             await fs.mkdir(pageDirPath, { recursive: true});
+             const homeComponentCode =`
+
+import React from 'react';
+
+export default function Home() {
+    return (
+        <div>
+            <h1>Welcome Home</h1>
+            <p>Your React Router is up and running!</p>
+        </div>
+    );
+}
+             `;
+             const homeComponentPath = path.join(pageDirPath, 'Home.jsx');
+             await fs.writeFile(homeComponentPath, homeComponentCode);
+             console.log('✅ Successfully added React Router');
+
+            }
         } catch (err) {
             console.error(err);
             console.log('⚠️ Could not install dependencies automatically.\n');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "quick-scaffolds-cli",
-    "version": "1.2.5",
+    "version": "1.3.0",
     "type": "module",
     "bin": {
         "ct-pro": "bin/cli.js"