quick-scaffolds-cli 1.2.3 → 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,7 +73,7 @@ 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
|
|
|
@@ -98,6 +98,8 @@ cd my-awesome-app
|
|
|
98
98
|
npm run dev
|
|
99
99
|
```
|
|
100
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
|
+
|
|
101
103
|
## Features
|
|
102
104
|
|
|
103
105
|
- Interactive CLI powered by @inquirer/prompts
|
|
@@ -106,6 +108,25 @@ npm run dev
|
|
|
106
108
|
- Automatic dependency installation for React template
|
|
107
109
|
- Simple command interface via ct-pro
|
|
108
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
|
+
|
|
109
130
|
## Project Structure
|
|
110
131
|
|
|
111
132
|
```text
|
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
|