create-autostack 1.0.0 → 1.0.1

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.
Files changed (16) hide show
  1. package/README.md +18 -11
  2. package/lib/PackageManagerClass.js +0 -1
  3. package/package.json +1 -4
  4. package/templates/assets/fastapi.svg +1 -1
  5. package/templates/frontend/PREACT/src/app.jsx +102 -102
  6. package/templates/frontend/PREACT/vite.config.js +8 -8
  7. package/templates/frontend/PREACT-TS/src/app.tsx +111 -111
  8. package/templates/frontend/PREACT-TS/vite.config.ts +8 -8
  9. package/templates/frontend/REACT/src/App.css +27 -27
  10. package/templates/frontend/REACT/src/App.jsx +104 -104
  11. package/templates/frontend/REACT-SWC/src/App.css +27 -27
  12. package/templates/frontend/REACT-SWC/src/App.jsx +104 -104
  13. package/templates/frontend/REACT-SWC-TS/src/App.css +27 -27
  14. package/templates/frontend/REACT-SWC-TS/src/App.tsx +113 -113
  15. package/templates/frontend/REACT-TS/src/App.css +27 -27
  16. package/templates/frontend/REACT-TS/src/App.tsx +113 -113
package/README.md CHANGED
@@ -18,19 +18,19 @@ Get your full-stack application up and running with a single command:
18
18
 
19
19
  ```bash
20
20
  # Using npm (npm 7+)
21
- npm create autostack my-app
21
+ npm create autostack
22
22
 
23
23
  # Using npx
24
- npx create-autostack my-app
24
+ npx create-autostack
25
25
 
26
26
  # Using yarn
27
- yarn create autostack my-app
27
+ yarn create autostack
28
28
 
29
29
  # Using pnpm
30
- pnpm create autostack my-app
30
+ pnpm create autostack
31
31
 
32
32
  # Using bun
33
- bun create autostack my-app
33
+ bun create autostack
34
34
  ```
35
35
 
36
36
  Then follow the interactive prompts to choose your tech stack!
@@ -86,7 +86,7 @@ Then follow the interactive prompts to choose your tech stack!
86
86
  AutoStack is designed to be run directly without installation:
87
87
 
88
88
  ```bash
89
- npm create autostack my-app
89
+ npm create autostack
90
90
  ```
91
91
 
92
92
  This will:
@@ -99,7 +99,7 @@ This will:
99
99
 
100
100
  ### Project Structure
101
101
 
102
- After scaffolding, your project will have the following structure:
102
+ After scaffolding, your project will have the following structure,
103
103
 
104
104
  ```
105
105
  my-app/
@@ -108,7 +108,7 @@ my-app/
108
108
  │ ├── public/
109
109
  │ ├── package.json
110
110
  │ └── vite.config.js
111
- ├── backend/
111
+ ├── backend/ // If you picked a JS backend
112
112
  │ ├── src/
113
113
  │ │ ├── models/
114
114
  │ │ ├── routes/
@@ -118,6 +118,13 @@ my-app/
118
118
  │ ├── .env
119
119
  │ ├── package.json
120
120
  │ └── node_modules/
121
+ | OR
122
+ ├── backend/ // Else you picked a Python backend
123
+ │ ├── main.py
124
+ | ├── ...
125
+ │ ├── .env
126
+ │ ├── package.json
127
+ │ └── node_modules/
121
128
  ├── README.md
122
129
  └── .gitignore
123
130
  ```
@@ -177,7 +184,7 @@ cd frontend && npm run dev
177
184
 
178
185
  ## 🔮 Roadmap
179
186
 
180
- I will working to make AutoStack better! Here's what's coming:
187
+ I will be working to make AutoStack better! Here's what's coming:
181
188
 
182
189
  ### Coming Soon
183
190
  - 🎯 Django support
@@ -188,7 +195,7 @@ I will working to make AutoStack better! Here's what's coming:
188
195
  - 🎯 Authentication templates
189
196
  - 🎯 GraphQL support
190
197
 
191
- There' s a lot more I can do that I haven't yet implemented and with more support and more people, I am sure that this project could become insanely popular and a core part of any full-stack project!
198
+ There's a lot more I can do that I haven't yet implemented, and with more support and more people, I am sure that this project could become a core part of any full-stack project!
192
199
 
193
200
  ### Future Possibilities
194
201
  The sky's the limit! I envision AutoStack supporting every major framework and helping developers start projects in any tech stack imaginable.
@@ -234,4 +241,4 @@ Special thanks to all our contributors and the amazing open-source community!
234
241
 
235
242
  Made by Fahad Rasheed
236
243
 
237
- </div>
244
+ </div>
package/lib/PackageManagerClass.js CHANGED
@@ -106,7 +106,6 @@ class PackageManagerCommands {
106
106
  execSync(`${cmd} --version`, { stdio: 'ignore' });
107
107
  return cmd;
108
108
  } catch(error) {
109
- console.log(error);
110
109
  continue;
111
110
  }
112
111
  }
package/package.json CHANGED
@@ -1,19 +1,16 @@
1
1
  {
2
2
  "name": "create-autostack",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Scaffold full-stack applications with a single command",
5
5
  "type": "module",
6
-
7
6
  "bin": {
8
7
  "create-autostack": "./bin/index.js"
9
8
  },
10
-
11
9
  "files": [
12
10
  "bin",
13
11
  "lib",
14
12
  "templates"
15
13
  ],
16
-
17
14
  "keywords": [
18
15
  "scaffolding",
19
16
  "cli",
package/templates/assets/fastapi.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M56.813 127.586c-1.903-.227-3.899-.52-4.434-.652a48.078 48.078 0 00-2.375-.5 36.042 36.042 0 01-2.703-.633c-4.145-1.188-4.442-1.285-7.567-2.563-2.875-1.172-8.172-3.91-9.984-5.156-.496-.344-.96-.621-1.031-.621-.07 0-1.23-.816-2.578-1.813-8.57-6.343-15.004-14.043-19.653-23.527-.8-1.629-1.453-3.074-1.453-3.21 0-.134-.144-.505-.32-.817-.363-.649-.88-2.047-1.297-3.492a20.047 20.047 0 00-.625-1.813c-.195-.46-.352-1.02-.352-1.246 0-.227-.195-.965-.433-1.645-.238-.675-.43-1.472-.43-1.77 0-.296-.187-1.32-.418-2.276C.598 73.492 0 67.379 0 63.953c0-3.422.598-9.535 1.16-11.894.23-.957.418-2 .418-2.32 0-.321.145-.95.32-1.4.18-.448.41-1.253.516-1.788.11-.535.36-1.457.563-2.055l.59-1.726c.433-1.293.835-2.387 1.027-2.813.11-.238.539-1.21.957-2.16.676-1.535 2.125-4.43 2.972-5.945.309-.555.426-.739 2.098-3.352 2.649-4.148 7.176-9.309 11.39-12.988 1.485-1.297 6.446-5.063 6.669-5.063.062 0 .53-.281 1.043-.625 1.347-.902 2.668-1.668 4.39-2.531a53.06 53.06 0 001.836-.953c.285-.164.82-.41 3.567-1.64.605-.27 1.257-.516 3.136-1.173.414-.144 1.246-.449 1.84-.672.598-.222 1.301-.406 1.563-.406.258 0 .937-.18 1.508-.402.57-.223 1.605-.477 2.304-.563.696-.082 1.621-.277 2.055-.43.43-.148 1.61-.34 2.621-.425a72.572 72.572 0 003.941-.465c2.688-.394 8.532-.394 11.192 0a75.02 75.02 0 003.781.445c.953.079 2.168.278 2.703.442.535.16 1.461.36 2.055.433.594.079 1.594.325 2.222.551.63.23 1.344.414 1.59.414s.754.137 1.125.309c.375.168 1.168.449 1.766.625.594.18 1.613.535 2.27.797.652.261 1.527.605 1.945.761.77.29 6.46 3.137 7.234 3.622 6.281 3.917 9.512 6.476 13.856 10.964 5.238 5.414 8.715 10.57 12.254 18.16.25.536.632 1.329.851 1.758.215.434.395.942.395 1.13 0 .19.18.76.402 1.269.602 1.383 1.117 2.957 1.36 4.16.12.59.343 1.32.495 1.621.153.3.332 1.063.403 1.688.07.624.277 1.648.453 2.269 1.02 3.531 1.527 13.934.91 18.535-.183 1.367-.39 3.02-.46 3.672-.118 1.117-.708 4.004-1.212 5.945l-.52 2.055c-.98 3.957-3.402 9.594-6.359 14.809-1.172 2.07-5.101 7.668-5.843 8.324-.067.058-.399.45-.735.863-.336.418-1.414 1.586-2.39 2.594-4.301 4.441-7.77 7.187-13.86 10.969-.722.449-6.847 3.441-7.992 3.906-.594.238-1.586.64-2.203.89-.613.247-1.297.454-1.512.458-.215.003-.781.195-1.258.425-.476.23-1.082.422-1.351.426-.266.004-1.043.192-1.727.418-.683.23-1.633.477-2.11.55-.476.075-1.495.278-2.269.45-.773.172-3.11.508-5.187.746a59.06 59.06 0 01-13.945-.031zm4.703-12.5c.3-.234.609-.7.691-1.027.18-.723 29.234-58.97 29.781-59.7.461-.617.504-1.605.082-1.953-.222-.187-3.004-.246-10.43-.234-5.57.012-10.253.016-10.406.012-.226-.008-.273-3.73-.25-19.672.016-10.817-.035-19.766-.113-19.89-.078-.126-.383-.227-.68-.227-.418 0-.613.18-.87.808-.485 1.168-1.825 3.82-8.348 16.485a3554.569 3554.569 0 00-4.055 7.89c-1.156 2.262-2.98 5.813-4.047 7.89a8751.248 8751.248 0 00-8.598 16.759c-4.933 9.636-5.53 10.785-5.742 11.039-.41.496-.633 1.64-.402 2.07.21.394.629.41 11.043.394 5.953-.007 10.863.024 10.914.07.137.141.086 37.31-.055 38.196-.093.582-.031.89.235 1.156.46.461.586.457 1.25-.066zm0 0" fill="#049688"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M56.813 127.586c-1.903-.227-3.899-.52-4.434-.652a48.078 48.078 0 00-2.375-.5 36.042 36.042 0 01-2.703-.633c-4.145-1.188-4.442-1.285-7.567-2.563-2.875-1.172-8.172-3.91-9.984-5.156-.496-.344-.96-.621-1.031-.621-.07 0-1.23-.816-2.578-1.813-8.57-6.343-15.004-14.043-19.653-23.527-.8-1.629-1.453-3.074-1.453-3.21 0-.134-.144-.505-.32-.817-.363-.649-.88-2.047-1.297-3.492a20.047 20.047 0 00-.625-1.813c-.195-.46-.352-1.02-.352-1.246 0-.227-.195-.965-.433-1.645-.238-.675-.43-1.472-.43-1.77 0-.296-.187-1.32-.418-2.276C.598 73.492 0 67.379 0 63.953c0-3.422.598-9.535 1.16-11.894.23-.957.418-2 .418-2.32 0-.321.145-.95.32-1.4.18-.448.41-1.253.516-1.788.11-.535.36-1.457.563-2.055l.59-1.726c.433-1.293.835-2.387 1.027-2.813.11-.238.539-1.21.957-2.16.676-1.535 2.125-4.43 2.972-5.945.309-.555.426-.739 2.098-3.352 2.649-4.148 7.176-9.309 11.39-12.988 1.485-1.297 6.446-5.063 6.669-5.063.062 0 .53-.281 1.043-.625 1.347-.902 2.668-1.668 4.39-2.531a53.06 53.06 0 001.836-.953c.285-.164.82-.41 3.567-1.64.605-.27 1.257-.516 3.136-1.173.414-.144 1.246-.449 1.84-.672.598-.222 1.301-.406 1.563-.406.258 0 .937-.18 1.508-.402.57-.223 1.605-.477 2.304-.563.696-.082 1.621-.277 2.055-.43.43-.148 1.61-.34 2.621-.425a72.572 72.572 0 003.941-.465c2.688-.394 8.532-.394 11.192 0a75.02 75.02 0 003.781.445c.953.079 2.168.278 2.703.442.535.16 1.461.36 2.055.433.594.079 1.594.325 2.222.551.63.23 1.344.414 1.59.414s.754.137 1.125.309c.375.168 1.168.449 1.766.625.594.18 1.613.535 2.27.797.652.261 1.527.605 1.945.761.77.29 6.46 3.137 7.234 3.622 6.281 3.917 9.512 6.476 13.856 10.964 5.238 5.414 8.715 10.57 12.254 18.16.25.536.632 1.329.851 1.758.215.434.395.942.395 1.13 0 .19.18.76.402 1.269.602 1.383 1.117 2.957 1.36 4.16.12.59.343 1.32.495 1.621.153.3.332 1.063.403 1.688.07.624.277 1.648.453 2.269 1.02 3.531 1.527 13.934.91 18.535-.183 1.367-.39 3.02-.46 3.672-.118 1.117-.708 4.004-1.212 5.945l-.52 2.055c-.98 3.957-3.402 9.594-6.359 14.809-1.172 2.07-5.101 7.668-5.843 8.324-.067.058-.399.45-.735.863-.336.418-1.414 1.586-2.39 2.594-4.301 4.441-7.77 7.187-13.86 10.969-.722.449-6.847 3.441-7.992 3.906-.594.238-1.586.64-2.203.89-.613.247-1.297.454-1.512.458-.215.003-.781.195-1.258.425-.476.23-1.082.422-1.351.426-.266.004-1.043.192-1.727.418-.683.23-1.633.477-2.11.55-.476.075-1.495.278-2.269.45-.773.172-3.11.508-5.187.746a59.06 59.06 0 01-13.945-.031zm4.703-12.5c.3-.234.609-.7.691-1.027.18-.723 29.234-58.97 29.781-59.7.461-.617.504-1.605.082-1.953-.222-.187-3.004-.246-10.43-.234-5.57.012-10.253.016-10.406.012-.226-.008-.273-3.73-.25-19.672.016-10.817-.035-19.766-.113-19.89-.078-.126-.383-.227-.68-.227-.418 0-.613.18-.87.808-.485 1.168-1.825 3.82-8.348 16.485a3554.569 3554.569 0 00-4.055 7.89c-1.156 2.262-2.98 5.813-4.047 7.89a8751.248 8751.248 0 00-8.598 16.759c-4.933 9.636-5.53 10.785-5.742 11.039-.41.496-.633 1.64-.402 2.07.21.394.629.41 11.043.394 5.953-.007 10.863.024 10.914.07.137.141.086 37.31-.055 38.196-.093.582-.031.89.235 1.156.46.461.586.457 1.25-.066zm0 0" fill="#049688"/></svg>
package/templates/frontend/PREACT/src/app.jsx CHANGED
@@ -1,103 +1,103 @@
1
- import { useState, useEffect } from 'preact/hooks'
2
- import preactLogo from './assets/preact.svg'
3
- import backendLogo from './assets/backend.svg'
4
- import dbLogo from './assets/database.svg'
5
- import viteLogo from '/vite.svg'
6
- import './app.css'
7
-
8
- export function App() {
9
- const [data, setData] = useState(null);
10
- const [loading, setLoading] = useState(true);
11
- const [error, setError] = useState(null);
12
-
13
- useEffect(() => {
14
- fetch('http://localhost:5000/autostack')
15
- .then(res => res.json())
16
- .then(data => {
17
- setData(data);
18
- setLoading(false);
19
- })
20
- .catch(err => {
21
- setError(err.message);
22
- setLoading(false);
23
- });
24
- }, []);
25
-
26
- return (
27
- <div class="min-h-screen bg-linear-to-br from-gray-900 via-gray-800 to-gray-900 text-white flex items-center justify-center p-8">
28
- <div class="max-w-4xl w-full">
29
-
30
- <div class="flex justify-center items-center gap-8 mb-12">
31
- <a href="https://vitejs.dev" target="_blank" rel="noopener noreferrer"
32
- class="transition-transform hover:scale-110 hover:drop-shadow-[0_0_2em_#646cffaa]">
33
- <img src={viteLogo} class="h-24 w-24" alt="Vite logo" />
34
- </a>
35
- <span class="text-4xl text-gray-500">+</span>
36
- <a href="https://preactjs.com" target="_blank" rel="noopener noreferrer"
37
- class="transition-transform hover:scale-110 hover:drop-shadow-[0_0_2em_#673ab8aa] animate-[spin_20s_linear_infinite]">
38
- <img src={preactLogo} class="h-24 w-24" alt="Preact logo" />
39
- </a>
40
- <span class="text-4xl text-gray-500">+</span>
41
- <a href="#" class="transition-transform hover:scale-110 hover:drop-shadow-[0_0_2em_#10b981aa]">
42
- <img src={backendLogo} class="h-24 w-24" alt="Backend logo" />
43
- </a>
44
- <span class="text-4xl text-gray-500">+</span>
45
- <a href="#" class="transition-transform hover:scale-110 hover:drop-shadow-[0_0_2em_#3b82f6aa]">
46
- <img src={dbLogo} class="h-24 w-24" alt="Database logo" />
47
- </a>
48
- </div>
49
-
50
- <h1 class="text-5xl font-bold text-center mb-8 text-white bg-clip-text text-transparent">
51
- Vite + Preact + {data?.backend || '...'} + {data?.database || '...'}
52
- </h1>
53
-
54
- <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 mb-8 border border-gray-700 shadow-2xl">
55
- {loading && (
56
- <div class="flex items-center justify-center gap-3">
57
- <div class="w-5 h-5 border-3 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
58
- <p class="text-gray-400">Connecting to backend...</p>
59
- </div>
60
- )}
61
-
62
- {error && (
63
- <div class="text-center">
64
- <p class="text-red-400 mb-2">⚠️ Connection Failed</p>
65
- <p class="text-sm text-gray-500">{error}</p>
66
- <p class="text-xs text-gray-600 mt-3">Make sure your backend server is running on port 5000</p>
67
- </div>
68
- )}
69
-
70
- {!loading && !error && data && (
71
- <div class="text-center">
72
- <div class="inline-flex items-center gap-2 px-4 py-2 bg-green-500/10 border border-green-500/20 rounded-full mb-4">
73
- <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
74
- <span class="text-green-400 text-sm font-medium">Connected</span>
75
- </div>
76
- <p class="text-2xl text-gray-300 mb-2">{data?.message}</p>
77
- <p class="text-sm text-gray-500">Your full-stack app is up and running! ✨</p>
78
- </div>
79
- )}
80
- </div>
81
-
82
- <div class="bg-gray-800/30 rounded-xl p-6 border border-gray-700/50">
83
- <h2 class="text-xl font-semibold mb-4 text-gray-300 text-center">Quick Start</h2>
84
- <div class="space-y-3 text-sm text-gray-400">
85
- <div class="flex justify-center items-center gap-3">
86
- <p>Edit <code class="px-2 py-1 bg-gray-700 rounded text-blue-300">src/app.jsx</code> to start building your frontend</p>
87
- </div>
88
- <div class="flex justify-center items-center gap-3">
89
- <p>Modify <code class="px-2 py-1 bg-gray-700 rounded text-blue-300">{data?.filepath}</code> to add your API routes</p>
90
- </div>
91
- <div class="flex justify-center items-center gap-3">
92
- <p>Check the console for any errors or messages</p>
93
- </div>
94
- </div>
95
- </div>
96
-
97
- <p class="text-center text-gray-500 text-sm mt-8">
98
- Created with ❤️ using AutoStack
99
- </p>
100
- </div>
101
- </div>
102
- )
1
+ import { useState, useEffect } from 'preact/hooks'
2
+ import preactLogo from './assets/preact.svg'
3
+ import backendLogo from './assets/backend.svg'
4
+ import dbLogo from './assets/database.svg'
5
+ import viteLogo from '/vite.svg'
6
+ import './app.css'
7
+
8
+ export function App() {
9
+ const [data, setData] = useState(null);
10
+ const [loading, setLoading] = useState(true);
11
+ const [error, setError] = useState(null);
12
+
13
+ useEffect(() => {
14
+ fetch('http://localhost:5000/autostack')
15
+ .then(res => res.json())
16
+ .then(data => {
17
+ setData(data);
18
+ setLoading(false);
19
+ })
20
+ .catch(err => {
21
+ setError(err.message);
22
+ setLoading(false);
23
+ });
24
+ }, []);
25
+
26
+ return (
27
+ <div class="min-h-screen bg-linear-to-br from-gray-900 via-gray-800 to-gray-900 text-white flex items-center justify-center p-8">
28
+ <div class="max-w-4xl w-full">
29
+
30
+ <div class="flex justify-center items-center gap-8 mb-12">
31
+ <a href="https://vitejs.dev" target="_blank" rel="noopener noreferrer"
32
+ class="transition-transform hover:scale-110 hover:drop-shadow-[0_0_2em_#646cffaa]">
33
+ <img src={viteLogo} class="h-24 w-24" alt="Vite logo" />
34
+ </a>
35
+ <span class="text-4xl text-gray-500">+</span>
36
+ <a href="https://preactjs.com" target="_blank" rel="noopener noreferrer"
37
+ class="transition-transform hover:scale-110 hover:drop-shadow-[0_0_2em_#673ab8aa] animate-[spin_20s_linear_infinite]">
38
+ <img src={preactLogo} class="h-24 w-24" alt="Preact logo" />
39
+ </a>
40
+ <span class="text-4xl text-gray-500">+</span>
41
+ <a href="#" class="transition-transform hover:scale-110 hover:drop-shadow-[0_0_2em_#10b981aa]">
42
+ <img src={backendLogo} class="h-24 w-24" alt="Backend logo" />
43
+ </a>
44
+ <span class="text-4xl text-gray-500">+</span>
45
+ <a href="#" class="transition-transform hover:scale-110 hover:drop-shadow-[0_0_2em_#3b82f6aa]">
46
+ <img src={dbLogo} class="h-24 w-24" alt="Database logo" />
47
+ </a>
48
+ </div>
49
+
50
+ <h1 class="text-5xl font-bold text-center mb-8 text-white bg-clip-text text-transparent">
51
+ Vite + Preact + {data?.backend || '...'} + {data?.database || '...'}
52
+ </h1>
53
+
54
+ <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 mb-8 border border-gray-700 shadow-2xl">
55
+ {loading && (
56
+ <div class="flex items-center justify-center gap-3">
57
+ <div class="w-5 h-5 border-3 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
58
+ <p class="text-gray-400">Connecting to backend...</p>
59
+ </div>
60
+ )}
61
+
62
+ {error && (
63
+ <div class="text-center">
64
+ <p class="text-red-400 mb-2">⚠️ Connection Failed</p>
65
+ <p class="text-sm text-gray-500">{error}</p>
66
+ <p class="text-xs text-gray-600 mt-3">Make sure your backend server is running on port 5000</p>
67
+ </div>
68
+ )}
69
+
70
+ {!loading && !error && data && (
71
+ <div class="text-center">
72
+ <div class="inline-flex items-center gap-2 px-4 py-2 bg-green-500/10 border border-green-500/20 rounded-full mb-4">
73
+ <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
74
+ <span class="text-green-400 text-sm font-medium">Connected</span>
75
+ </div>
76
+ <p class="text-2xl text-gray-300 mb-2">{data?.message}</p>
77
+ <p class="text-sm text-gray-500">Your full-stack app is up and running! ✨</p>
78
+ </div>
79
+ )}
80
+ </div>
81
+
82
+ <div class="bg-gray-800/30 rounded-xl p-6 border border-gray-700/50">
83
+ <h2 class="text-xl font-semibold mb-4 text-gray-300 text-center">Quick Start</h2>
84
+ <div class="space-y-3 text-sm text-gray-400">
85
+ <div class="flex justify-center items-center gap-3">
86
+ <p>Edit <code class="px-2 py-1 bg-gray-700 rounded text-blue-300">src/app.jsx</code> to start building your frontend</p>
87
+ </div>
88
+ <div class="flex justify-center items-center gap-3">
89
+ <p>Modify <code class="px-2 py-1 bg-gray-700 rounded text-blue-300">{data?.filepath}</code> to add your API routes</p>
90
+ </div>
91
+ <div class="flex justify-center items-center gap-3">
92
+ <p>Check the console for any errors or messages</p>
93
+ </div>
94
+ </div>
95
+ </div>
96
+
97
+ <p class="text-center text-gray-500 text-sm mt-8">
98
+ Created with ❤️ using AutoStack
99
+ </p>
100
+ </div>
101
+ </div>
102
+ )
103
103
  }
package/templates/frontend/PREACT/vite.config.js CHANGED
@@ -1,8 +1,8 @@
1
- import { defineConfig } from 'vite'
2
- import preact from '@preact/preset-vite'
3
- import tailwindcss from '@tailwindcss/vite'
4
-
5
- // https://vite.dev/config/
6
- export default defineConfig({
7
- plugins: [preact(), tailwindcss()],
8
- })
1
+ import { defineConfig } from 'vite'
2
+ import preact from '@preact/preset-vite'
3
+ import tailwindcss from '@tailwindcss/vite'
4
+
5
+ // https://vite.dev/config/
6
+ export default defineConfig({
7
+ plugins: [preact(), tailwindcss()],
8
+ })
package/templates/frontend/PREACT-TS/src/app.tsx CHANGED
@@ -1,112 +1,112 @@
1
- import { useState, useEffect } from 'preact/hooks'
2
- import preactLogo from './assets/preact.svg'
3
- import backendLogo from './assets/backend.svg'
4
- import dbLogo from './assets/database.svg'
5
- import viteLogo from '/vite.svg'
6
- import './app.css'
7
-
8
- interface AutoStackAPI {
9
- message: string;
10
- backend: string;
11
- database: string;
12
- filepath: string;
13
- }
14
-
15
- export function App() {
16
- const [data, setData] = useState<AutoStackAPI | null>(null);
17
- const [loading, setLoading] = useState<boolean>(true);
18
- const [error, setError] = useState<string | null>(null);
19
-
20
- useEffect(() => {
21
- fetch('http://localhost:5000/autostack')
22
- .then((res) => {
23
- return res.json();
24
- })
25
- .then((data: AutoStackAPI) => {
26
- setData(data);
27
- setLoading(false);
28
- })
29
- .catch((err: Error) => {
30
- setError(err.message);
31
- setLoading(false);
32
- });
33
- }, []);
34
-
35
- return (
36
- <div class="min-h-screen bg-linear-to-br from-gray-900 via-gray-800 to-gray-900 text-white flex items-center justify-center p-8">
37
- <div class="max-w-4xl w-full">
38
-
39
- <div class="flex justify-center items-center gap-8 mb-12">
40
- <a href="https://vitejs.dev" target="_blank" rel="noopener noreferrer"
41
- class="transition-transform hover:scale-110 hover:drop-shadow-[0_0_2em_#646cffaa]">
42
- <img src={viteLogo} class="h-24 w-24" alt="Vite logo" />
43
- </a>
44
- <span class="text-4xl text-gray-500">+</span>
45
- <a href="https://preactjs.com" target="_blank" rel="noopener noreferrer"
46
- class="transition-transform hover:scale-110 hover:drop-shadow-[0_0_2em_#673ab8aa] animate-[spin_20s_linear_infinite]">
47
- <img src={preactLogo} class="h-24 w-24" alt="Preact logo" />
48
- </a>
49
- <span class="text-4xl text-gray-500">+</span>
50
- <a href="#" class="transition-transform hover:scale-110 hover:drop-shadow-[0_0_2em_#10b981aa]">
51
- <img src={backendLogo} class="h-24 w-24" alt="Backend logo" />
52
- </a>
53
- <span class="text-4xl text-gray-500">+</span>
54
- <a href="#" class="transition-transform hover:scale-110 hover:drop-shadow-[0_0_2em_#3b82f6aa]">
55
- <img src={dbLogo} class="h-24 w-24" alt="Database logo" />
56
- </a>
57
- </div>
58
-
59
- <h1 class="text-5xl font-bold text-center mb-8 text-white bg-clip-text text-transparent">
60
- Vite + Preact + {data?.backend || '...'} + {data?.database || '...'}
61
- </h1>
62
-
63
- <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 mb-8 border border-gray-700 shadow-2xl">
64
- {loading && (
65
- <div class="flex items-center justify-center gap-3">
66
- <div class="w-5 h-5 border-3 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
67
- <p class="text-gray-400">Connecting to backend...</p>
68
- </div>
69
- )}
70
-
71
- {error && (
72
- <div class="text-center">
73
- <p class="text-red-400 mb-2">⚠️ Connection Failed</p>
74
- <p class="text-sm text-gray-500">{error}</p>
75
- <p class="text-xs text-gray-600 mt-3">Make sure your backend server is running on port 5000</p>
76
- </div>
77
- )}
78
-
79
- {!loading && !error && data && (
80
- <div class="text-center">
81
- <div class="inline-flex items-center gap-2 px-4 py-2 bg-green-500/10 border border-green-500/20 rounded-full mb-4">
82
- <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
83
- <span class="text-green-400 text-sm font-medium">Connected</span>
84
- </div>
85
- <p class="text-2xl text-gray-300 mb-2">{data.message}</p>
86
- <p class="text-sm text-gray-500">Your full-stack app is up and running! ✨</p>
87
- </div>
88
- )}
89
- </div>
90
-
91
- <div class="bg-gray-800/30 rounded-xl p-6 border border-gray-700/50">
92
- <h2 class="text-xl font-semibold mb-4 text-gray-300 text-center">Quick Start</h2>
93
- <div class="space-y-3 text-sm text-gray-400">
94
- <div class="flex justify-center items-center gap-3">
95
- <p>Edit <code class="px-2 py-1 bg-gray-700 rounded text-blue-300">src/app.tsx</code> to start building your frontend</p>
96
- </div>
97
- <div class="flex justify-center items-center gap-3">
98
- <p>Modify <code class="px-2 py-1 bg-gray-700 rounded text-blue-300">{data?.filepath}</code> to add your API routes</p>
99
- </div>
100
- <div class="flex justify-center items-center gap-3">
101
- <p>Check the console for any errors or messages</p>
102
- </div>
103
- </div>
104
- </div>
105
-
106
- <p class="text-center text-gray-500 text-sm mt-8">
107
- Created with ❤️ using AutoStack
108
- </p>
109
- </div>
110
- </div>
111
- )
1
+ import { useState, useEffect } from 'preact/hooks'
2
+ import preactLogo from './assets/preact.svg'
3
+ import backendLogo from './assets/backend.svg'
4
+ import dbLogo from './assets/database.svg'
5
+ import viteLogo from '/vite.svg'
6
+ import './app.css'
7
+
8
+ interface AutoStackAPI {
9
+ message: string;
10
+ backend: string;
11
+ database: string;
12
+ filepath: string;
13
+ }
14
+
15
+ export function App() {
16
+ const [data, setData] = useState<AutoStackAPI | null>(null);
17
+ const [loading, setLoading] = useState<boolean>(true);
18
+ const [error, setError] = useState<string | null>(null);
19
+
20
+ useEffect(() => {
21
+ fetch('http://localhost:5000/autostack')
22
+ .then((res) => {
23
+ return res.json();
24
+ })
25
+ .then((data: AutoStackAPI) => {
26
+ setData(data);
27
+ setLoading(false);
28
+ })
29
+ .catch((err: Error) => {
30
+ setError(err.message);
31
+ setLoading(false);
32
+ });
33
+ }, []);
34
+
35
+ return (
36
+ <div class="min-h-screen bg-linear-to-br from-gray-900 via-gray-800 to-gray-900 text-white flex items-center justify-center p-8">
37
+ <div class="max-w-4xl w-full">
38
+
39
+ <div class="flex justify-center items-center gap-8 mb-12">
40
+ <a href="https://vitejs.dev" target="_blank" rel="noopener noreferrer"
41
+ class="transition-transform hover:scale-110 hover:drop-shadow-[0_0_2em_#646cffaa]">
42
+ <img src={viteLogo} class="h-24 w-24" alt="Vite logo" />
43
+ </a>
44
+ <span class="text-4xl text-gray-500">+</span>
45
+ <a href="https://preactjs.com" target="_blank" rel="noopener noreferrer"
46
+ class="transition-transform hover:scale-110 hover:drop-shadow-[0_0_2em_#673ab8aa] animate-[spin_20s_linear_infinite]">
47
+ <img src={preactLogo} class="h-24 w-24" alt="Preact logo" />
48
+ </a>
49
+ <span class="text-4xl text-gray-500">+</span>
50
+ <a href="#" class="transition-transform hover:scale-110 hover:drop-shadow-[0_0_2em_#10b981aa]">
51
+ <img src={backendLogo} class="h-24 w-24" alt="Backend logo" />
52
+ </a>
53
+ <span class="text-4xl text-gray-500">+</span>
54
+ <a href="#" class="transition-transform hover:scale-110 hover:drop-shadow-[0_0_2em_#3b82f6aa]">
55
+ <img src={dbLogo} class="h-24 w-24" alt="Database logo" />
56
+ </a>
57
+ </div>
58
+
59
+ <h1 class="text-5xl font-bold text-center mb-8 text-white bg-clip-text text-transparent">
60
+ Vite + Preact + {data?.backend || '...'} + {data?.database || '...'}
61
+ </h1>
62
+
63
+ <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 mb-8 border border-gray-700 shadow-2xl">
64
+ {loading && (
65
+ <div class="flex items-center justify-center gap-3">
66
+ <div class="w-5 h-5 border-3 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
67
+ <p class="text-gray-400">Connecting to backend...</p>
68
+ </div>
69
+ )}
70
+
71
+ {error && (
72
+ <div class="text-center">
73
+ <p class="text-red-400 mb-2">⚠️ Connection Failed</p>
74
+ <p class="text-sm text-gray-500">{error}</p>
75
+ <p class="text-xs text-gray-600 mt-3">Make sure your backend server is running on port 5000</p>
76
+ </div>
77
+ )}
78
+
79
+ {!loading && !error && data && (
80
+ <div class="text-center">
81
+ <div class="inline-flex items-center gap-2 px-4 py-2 bg-green-500/10 border border-green-500/20 rounded-full mb-4">
82
+ <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
83
+ <span class="text-green-400 text-sm font-medium">Connected</span>
84
+ </div>
85
+ <p class="text-2xl text-gray-300 mb-2">{data.message}</p>
86
+ <p class="text-sm text-gray-500">Your full-stack app is up and running! ✨</p>
87
+ </div>
88
+ )}
89
+ </div>
90
+
91
+ <div class="bg-gray-800/30 rounded-xl p-6 border border-gray-700/50">
92
+ <h2 class="text-xl font-semibold mb-4 text-gray-300 text-center">Quick Start</h2>
93
+ <div class="space-y-3 text-sm text-gray-400">
94
+ <div class="flex justify-center items-center gap-3">
95
+ <p>Edit <code class="px-2 py-1 bg-gray-700 rounded text-blue-300">src/app.tsx</code> to start building your frontend</p>
96
+ </div>
97
+ <div class="flex justify-center items-center gap-3">
98
+ <p>Modify <code class="px-2 py-1 bg-gray-700 rounded text-blue-300">{data?.filepath}</code> to add your API routes</p>
99
+ </div>
100
+ <div class="flex justify-center items-center gap-3">
101
+ <p>Check the console for any errors or messages</p>
102
+ </div>
103
+ </div>
104
+ </div>
105
+
106
+ <p class="text-center text-gray-500 text-sm mt-8">
107
+ Created with ❤️ using AutoStack
108
+ </p>
109
+ </div>
110
+ </div>
111
+ )
112
112
  }
package/templates/frontend/PREACT-TS/vite.config.ts CHANGED
@@ -1,8 +1,8 @@
1
- import { defineConfig } from 'vite'
2
- import preact from '@preact/preset-vite'
3
- import tailwindcss from '@tailwindcss/vite'
4
-
5
- // https://vite.dev/config/
6
- export default defineConfig({
7
- plugins: [preact(), tailwindcss()],
8
- })
1
+ import { defineConfig } from 'vite'
2
+ import preact from '@preact/preset-vite'
3
+ import tailwindcss from '@tailwindcss/vite'
4
+
5
+ // https://vite.dev/config/
6
+ export default defineConfig({
7
+ plugins: [preact(), tailwindcss()],
8
+ })