quick-scaffolds-cli 1.1.0 → 1.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pramuditha Lakshan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,30 +1,27 @@
 # quick-scaffolds-cli
 
-A lightweight, interactive CLI tool for rapidly scaffolding new web projects with pre-configured starter templates.
+A lightweight interactive CLI for scaffolding starter web projects quickly.
 
 ## Overview
 
-**quick-scaffolds-cli** is an npm package that provides an interactive command-line interface to generate new projects from customizable templates. Get started with a fully structured project in seconds with an intuitive selection menu.
+quick-scaffolds-cli generates a ready-to-use project from templates with a simple prompt flow.
 
-**v1.1.0** - Now with improved interactive selection and project type options!
+Current release: v1.2.1
 
 ## Quick Start
 
-### Global Installation
+### Global install
 
-Install globally to use the `ct-pro` command anywhere:
+Install once and use the command anywhere:
 
 ```bash
 npm install -g quick-scaffolds-cli
-```
-
-Then create a new project:
-
-```bash
 ct-pro
 ```
 
-### Using npx (No Installation Required)
+### Use with npx
+
+Run without installing globally:
 
 ```bash
 npx quick-scaffolds-cli
@@ -32,28 +29,32 @@ npx quick-scaffolds-cli
 
 ## Usage
 
-### Creating a New Project
-
-Run the command and follow the interactive prompts:
+Run the CLI and answer two prompts:
 
 ```bash
 ct-pro
 ? What is your project name? my-awesome-app
-? What do you want to build? (Use arrow keys)
-❯ Static HTML/CSS/JS
+? What do you want to build?
+  Static HTML/CSS/JS
+  React starter
 ```
 
-You'll be guided through:
+Prompt details:
 
-1. **Project Name**: Enter your desired project name (default: `my-new-project`)
-2. **Project Type**: Use arrow keys to select a template type:
-   - **Static HTML/CSS/JS** - A simple, lightweight static site starter with HTML, CSS, and JavaScript
+1. Project name (default: my-new-project)
+2. Project type:
+   - Static HTML/CSS/JS
+   - React starter
 
-### Generated Project Structure
+## Templates
 
-The scaffolded project will include:
+### 1. Static HTML/CSS/JS
 
-```
+Creates a simple static site starter.
+
+Generated structure:
+
+```text
 my-awesome-app/
 ├── index.html
 ├── css/
@@ -62,45 +63,70 @@ my-awesome-app/
     └── app.js
 ```
 
-## Features
+### 2. React starter (Vite)
 
-- 🚀 **Interactive CLI** - Modern, intuitive prompts powered by [@inquirer/prompts](https://github.com/SBoudrias/Inquirer.js)
-- ⬆️⬇️ **Arrow Key Navigation** - Easy project type selection with arrow keys
-- 📁 **Template-Based** - Pre-built, production-ready project templates
-- ⚡ **Instant Setup** - Scaffold complete projects in seconds
-- 📦 **Lightweight** - Minimal dependencies and fast installation
-- 🧩 **Extensible** - Easy to add custom project templates
+Creates a React starter app with Vite and automatically runs npm install.
 
-## Available Templates
+Generated structure:
 
-- **Static HTML/CSS/JS** - Simple static website starter with basic HTML, CSS, and JavaScript boilerplate
+```text
+my-awesome-app/
+├── package.json
+├── public/
+│   ├── index.html
+│   └── index.css
+└── src/
+    ├── App.css
+    ├── App.jsx
+    ├── index.css
+    └── main.jsx
+```
 
-## Project Structure
+After scaffolding a React project:
 
+```bash
+cd my-awesome-app
+npm run dev
 ```
-quick-scaffolds/
+
+## 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
+
+## Project Structure
+
+```text
+quick-scaffolds-cli/
 ├── bin/
-│   └── cli.js              # CLI entry point
-├── templates/              # Starter templates
-│   └── html-template/      # Static HTML/CSS/JS template
-│       ├── index.html
-│       ├── css/
-│       │   └── style.css
-│       └── js/
-│           └── app.js
+│   └── cli.js
+├── templates/
+│   ├── html-template/
+│   │   ├── index.html
+│   │   ├── css/
+│   │   │   └── style.css
+│   │   └── js/
+│   │       └── app.js
+│   └── react-template/
+│       ├── package.json
+│       ├── public/
+│       │   ├── index.css
+│       │   └── index.html
+│       └── src/
+│           ├── App.css
+│           ├── App.jsx
+│           ├── index.css
+│           └── main.jsx
 ├── package.json
 └── README.md
 ```
 
 ## Dependencies
 
-- **@inquirer/prompts** (^8.3.2) - Modern, interactive prompt library
-- **inquirer** (^13.3.2) - Command-line interface utilities
-
-## Version History
-
-- **v1.1.0** - Improved interactive selection with arrow key navigation, organized template structure
-- **v1.0.0** - Initial release with basic scaffolding functionality
+- @inquirer/prompts ^8.3.2
 
 ## License
 
@@ -108,4 +134,4 @@ MIT
 
 ## Contributing
 
-Contributions are welcome! Please feel free to submit pull requests or open issues to suggest improvements.
+Issues and pull requests are welcome on github.

package/bin/cli.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-
+import { execSync } from 'node:child_process';
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -23,7 +23,7 @@ async function main() {
             type: "list",
             choices: [
                 { name: 'Static HTML/CSS/JS', value: 'static' },
-
+                { name: 'React starter', value: 'react' }
             ],
         });
         let templateFolder = '';
@@ -31,17 +31,64 @@ async function main() {
             templateFolder = 'html-template';
         }
 
+        if (projectType === 'react') {
+            templateFolder = 'react-template';
+            await reactApp(name, templateFolder);
+            return;
+        }
+
         const projectName = name;
         const targetPath = path.join(process.cwd(), projectName);
 
         const templatePath = path.join(__dirname, '../templates', templateFolder);
         await fs.mkdir(targetPath, { recursive: true });
         await fs.cp(templatePath, targetPath, { recursive: true });
-        console.log(`Successfully scaffolded the project ${projectName}`)
+        console.log(`Successfully scaffolded the HTMl project - ${projectName}`)
 
     } catch (err) {
         console.error(`Error - ${err.message}`)
     }
 }
 
+async function reactApp(projectName, templateFolder) {
+    try {
+        const targetPath = path.join(process.cwd(), projectName);
+        const templatePath = path.join(__dirname, '../templates', templateFolder);
+        await fs.mkdir(targetPath, { recursive: true });
+        await fs.cp(templatePath, targetPath, { recursive: true })
+
+        const filesToUpdate = [
+            path.join(targetPath, 'package.json'),
+            path.join(targetPath, 'public','index.html')
+        ];
+        for (const filePath of filesToUpdate) {
+            try {
+                const content = await fs.readFile(filePath, 'utf-8');
+                const updateContent = content.replaceAll('{{PROJECT_NAME}}', projectName);
+                await fs.writeFile(filePath, updateContent);
+            } catch (err) {
+                console.error(err);
+                console.error(`File path ${path.basename(filePath)} not found`);
+            }
+        }
+
+        console.log(`Successfully scaffolded the React starter project - ${projectName}`)
+        console.log('📦 Installing dependencies... This may take a minute.');
+        try {
+            execSync('npm install', {
+                cwd: targetPath,
+                stdio: 'inherit'
+            });
+            console.log('✅ Dependencies installed successfully!');
+        } catch (err){
+            console.error(err);
+            console.log('⚠️ Could not install dependencies automatically.');
+            console.log('Please run "npm install" manually inside your project folder.');
+        }
+
+    } catch (err) {
+        console.error(`Error - ${err.message}`);
+    }
+}
+
 main();

package/package.json

@@ -1,16 +1,16 @@
 {
     "name": "quick-scaffolds-cli",
-    "version": "1.1.0",
+    "version": "1.2.1",
     "type": "module",
     "bin": {
         "ct-pro": "bin/cli.js"
     },
+    "license": "MIT",
     "files": [
         "bin",
         "templates"
     ],
     "dependencies": {
-        "@inquirer/prompts": "^8.3.2",
-        "inquirer": "^13.3.2"
+        "@inquirer/prompts": "^8.3.2"
     }
 }

package/templates/react-template/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.0"
+  }
+}

package/templates/react-template/public/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{PROJECT_NAME}}</title> 
+  </head>
+  <body>
+    <div id="root"></div>
+    
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/react-template/src/App.jsx

@@ -0,0 +1,12 @@
+import './App.css';
+
+function App(){
+    return(
+        <div className="container">
+            <h1>Welcome to your React App!</h1>
+            <p>Start building something amazing.</p>
+        </div>
+    )
+}
+
+export default App

package/templates/react-template/src/main.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+)