quick-scaffolds-cli 1.2.2 → 1.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@ A lightweight interactive CLI for scaffolding starter web projects quickly.
|
|
|
6
6
|
|
|
7
7
|
quick-scaffolds-cli generates a ready-to-use project from templates with a simple prompt flow.
|
|
8
8
|
|
|
9
|
-
Current release: v1.2.
|
|
9
|
+
Current release: v1.2.4
|
|
10
10
|
|
|
11
11
|
## Quick Start
|
|
12
12
|
|
|
@@ -73,16 +73,17 @@ my-awesome-app/
|
|
|
73
73
|
|
|
74
74
|
### 2. React starter (Vite)
|
|
75
75
|
|
|
76
|
-
Creates a React starter app with Vite and automatically runs npm install.
|
|
76
|
+
Creates a React starter app with Vite, includes an interactive test component, and automatically runs npm install.
|
|
77
77
|
|
|
78
78
|
Generated structure:
|
|
79
79
|
|
|
80
80
|
```text
|
|
81
81
|
my-awesome-app/
|
|
82
82
|
├── .gitignore
|
|
83
|
-
├── index.css
|
|
84
83
|
├── index.html
|
|
85
84
|
├── package.json
|
|
85
|
+
├── public/
|
|
86
|
+
│ └── index.css
|
|
86
87
|
└── src/
|
|
87
88
|
├── App.css
|
|
88
89
|
├── App.jsx
|
|
@@ -97,6 +98,8 @@ cd my-awesome-app
|
|
|
97
98
|
npm run dev
|
|
98
99
|
```
|
|
99
100
|
|
|
101
|
+
The generated app includes a counter button and last-click timestamp in `App.jsx` so you can quickly confirm rendering and state updates.
|
|
102
|
+
|
|
100
103
|
## Features
|
|
101
104
|
|
|
102
105
|
- Interactive CLI powered by @inquirer/prompts
|
|
@@ -105,6 +108,25 @@ npm run dev
|
|
|
105
108
|
- Automatic dependency installation for React template
|
|
106
109
|
- Simple command interface via ct-pro
|
|
107
110
|
|
|
111
|
+
## Troubleshooting
|
|
112
|
+
|
|
113
|
+
- If the React page is blank, run the dev server inside your generated project folder:
|
|
114
|
+
|
|
115
|
+
```bash
|
|
116
|
+
cd my-awesome-app
|
|
117
|
+
npm run dev
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
- The React entry flow is:
|
|
121
|
+
- `index.html` loads `./src/main.jsx`
|
|
122
|
+
- `main.jsx` renders `App.jsx`
|
|
123
|
+
|
|
124
|
+
- If browser console shows `React is not defined`, ensure your `App.jsx` starts with:
|
|
125
|
+
|
|
126
|
+
```jsx
|
|
127
|
+
import React from 'react';
|
|
128
|
+
```
|
|
129
|
+
|
|
108
130
|
## Project Structure
|
|
109
131
|
|
|
110
132
|
```text
|
|
@@ -125,9 +147,10 @@ quick-scaffolds-cli/
|
|
|
125
147
|
│ │ └── app.js
|
|
126
148
|
│ └── react-template/
|
|
127
149
|
│ ├── .gitignore
|
|
128
|
-
│ ├── index.css
|
|
129
150
|
│ ├── index.html
|
|
130
151
|
│ ├── package.json
|
|
152
|
+
│ ├── public/
|
|
153
|
+
│ │ └── index.css
|
|
131
154
|
│ └── src/
|
|
132
155
|
│ ├── App.css
|
|
133
156
|
│ ├── App.jsx
|
package/package.json
CHANGED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
* {
|
|
2
|
+
box-sizing: border-box;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
body {
|
|
6
|
+
margin: 0;
|
|
7
|
+
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
|
8
|
+
background: #f5f7fb;
|
|
9
|
+
color: #1f2937;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
#root {
|
|
13
|
+
min-height: 100vh;
|
|
14
|
+
display: grid;
|
|
15
|
+
place-items: center;
|
|
16
|
+
padding: 24px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.container {
|
|
20
|
+
width: min(560px, 100%);
|
|
21
|
+
background: #ffffff;
|
|
22
|
+
border: 1px solid #e5e7eb;
|
|
23
|
+
border-radius: 14px;
|
|
24
|
+
padding: 28px;
|
|
25
|
+
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
h1 {
|
|
29
|
+
margin: 0 0 10px;
|
|
30
|
+
font-size: 1.8rem;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
p {
|
|
34
|
+
margin: 0 0 14px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
button {
|
|
38
|
+
border: 0;
|
|
39
|
+
border-radius: 10px;
|
|
40
|
+
background: #0f766e;
|
|
41
|
+
color: #fff;
|
|
42
|
+
padding: 10px 14px;
|
|
43
|
+
font-size: 1rem;
|
|
44
|
+
cursor: pointer;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
button:hover {
|
|
48
|
+
background: #115e59;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.meta {
|
|
52
|
+
margin-top: 14px;
|
|
53
|
+
color: #4b5563;
|
|
54
|
+
font-size: 0.95rem;
|
|
55
|
+
}
|
|
@@ -1,12 +1,23 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
1
2
|
import './App.css';
|
|
2
3
|
|
|
3
|
-
function App(){
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
function App() {
|
|
5
|
+
const [count, setCount] = useState(0);
|
|
6
|
+
const [lastClickedAt, setLastClickedAt] = useState('not clicked yet');
|
|
7
|
+
|
|
8
|
+
function handleIncrement() {
|
|
9
|
+
setCount((prev) => prev + 1);
|
|
10
|
+
setLastClickedAt(new Date().toLocaleTimeString());
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
return (
|
|
14
|
+
<main className="container">
|
|
15
|
+
<h1>React test is working</h1>
|
|
16
|
+
<p>If you can click this button and see updates, rendering is fine.</p>
|
|
17
|
+
<button type="button" onClick={handleIncrement}>Clicked {count} times</button>
|
|
18
|
+
<p className="meta">Last clicked: {lastClickedAt}</p>
|
|
19
|
+
</main>
|
|
20
|
+
);
|
|
10
21
|
}
|
|
11
22
|
|
|
12
23
|
export default App
|
|
File without changes
|