create-fluxstack 1.0.7 → 1.0.9
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 +199 -98
- package/package-template.json +1 -2
- package/package.json +6 -2
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# ⚡ create-fluxstack
|
|
2
2
|
|
|
3
|
-
> Create
|
|
3
|
+
> Create modern full-stack TypeScript applications with zero configuration
|
|
4
4
|
|
|
5
|
-
[](https://
|
|
5
|
+
[](https://www.npmjs.com/package/create-fluxstack)
|
|
6
6
|
[](https://opensource.org/licenses/MIT)
|
|
7
7
|
|
|
8
8
|
## 🚀 Quick Start
|
|
@@ -11,18 +11,15 @@
|
|
|
11
11
|
# Create a new FluxStack app
|
|
12
12
|
bunx create-fluxstack my-awesome-app
|
|
13
13
|
|
|
14
|
-
# Or with npx
|
|
15
|
-
npx create-fluxstack my-awesome-app
|
|
16
|
-
|
|
17
14
|
# Navigate and start developing
|
|
18
15
|
cd my-awesome-app
|
|
19
16
|
bun run dev
|
|
20
17
|
```
|
|
21
18
|
|
|
22
19
|
**That's it!** Your full-stack TypeScript app is ready at:
|
|
23
|
-
- **Backend**: http://localhost:3000
|
|
24
|
-
- **Frontend**: http://localhost:5173
|
|
25
|
-
- **API Docs**: http://localhost:3000/swagger
|
|
20
|
+
- 🚀 **Backend**: http://localhost:3000
|
|
21
|
+
- ⚛️ **Frontend**: http://localhost:5173
|
|
22
|
+
- 📋 **API Docs**: http://localhost:3000/swagger
|
|
26
23
|
|
|
27
24
|
## ✨ What You Get
|
|
28
25
|
|
|
@@ -34,24 +31,35 @@ bun run dev
|
|
|
34
31
|
- **📦 Vite 7** - Lightning-fast dev server
|
|
35
32
|
- **🔒 TypeScript 5** - Full type safety end-to-end
|
|
36
33
|
|
|
37
|
-
### 🛠️ Zero Configuration
|
|
38
|
-
- **✅
|
|
39
|
-
- **✅
|
|
40
|
-
- **✅ Auto Documentation** - Swagger UI generated
|
|
41
|
-
- **✅ Git Ready** -
|
|
42
|
-
- **✅ Production Ready** -
|
|
34
|
+
### 🛠️ Zero Configuration Features
|
|
35
|
+
- **✅ Type Safety** - Eden Treaty for API communication with automatic type inference
|
|
36
|
+
- **✅ Hot Reload** - Backend + Frontend coordinated development
|
|
37
|
+
- **✅ Auto Documentation** - Swagger UI generated from your API
|
|
38
|
+
- **✅ Git Ready** - Repository initialized with proper .gitignore
|
|
39
|
+
- **✅ Production Ready** - Optimized build scripts included
|
|
40
|
+
- **✅ AI Context** - Complete documentation for AI assistants
|
|
43
41
|
|
|
44
42
|
## 📁 Project Structure
|
|
45
43
|
|
|
46
44
|
```
|
|
47
45
|
my-awesome-app/
|
|
48
|
-
├── core/
|
|
49
|
-
├──
|
|
50
|
-
│ ├──
|
|
51
|
-
│ ├──
|
|
52
|
-
│ └──
|
|
53
|
-
├──
|
|
54
|
-
|
|
46
|
+
├── core/ # FluxStack framework (don't modify)
|
|
47
|
+
│ ├── server/ # Framework server components
|
|
48
|
+
│ ├── config/ # Configuration system
|
|
49
|
+
│ ├── plugins/ # Built-in plugins (logger, swagger, etc)
|
|
50
|
+
│ └── cli/ # Development CLI tools
|
|
51
|
+
├── app/ # Your application code
|
|
52
|
+
│ ├── server/ # Backend API routes
|
|
53
|
+
│ │ ├── controllers/ # Business logic
|
|
54
|
+
│ │ └── routes/ # API endpoints
|
|
55
|
+
│ ├── client/ # Frontend React app
|
|
56
|
+
│ │ ├── src/ # React components
|
|
57
|
+
│ │ └── public/ # Static assets
|
|
58
|
+
│ └── shared/ # Shared types and utilities
|
|
59
|
+
├── ai-context/ # AI assistant documentation
|
|
60
|
+
├── package.json # Dependencies and scripts
|
|
61
|
+
├── CLAUDE.md # AI instructions
|
|
62
|
+
└── README.md # Project documentation
|
|
55
63
|
```
|
|
56
64
|
|
|
57
65
|
## 🎯 Available Scripts
|
|
@@ -59,8 +67,9 @@ my-awesome-app/
|
|
|
59
67
|
```bash
|
|
60
68
|
# Development
|
|
61
69
|
bun run dev # Start full-stack development
|
|
62
|
-
bun run dev:
|
|
63
|
-
bun run dev:
|
|
70
|
+
bun run dev:clean # Clean output (no Elysia HEAD logs)
|
|
71
|
+
bun run dev:frontend # Frontend only (port 5173)
|
|
72
|
+
bun run dev:backend # Backend only (port 3001)
|
|
64
73
|
|
|
65
74
|
# Production
|
|
66
75
|
bun run build # Build for production
|
|
@@ -68,60 +77,90 @@ bun run start # Start production server
|
|
|
68
77
|
|
|
69
78
|
# Utilities
|
|
70
79
|
bun run typecheck # Check TypeScript
|
|
80
|
+
bun run test # Run test suite
|
|
71
81
|
```
|
|
72
82
|
|
|
73
|
-
## 🔧
|
|
83
|
+
## 🔧 Type-Safe API Development
|
|
74
84
|
|
|
75
|
-
|
|
76
|
-
- **Node.js** >= 18.0.0 (fallback)
|
|
85
|
+
FluxStack provides automatic type inference between your backend and frontend using Eden Treaty:
|
|
77
86
|
|
|
78
|
-
###
|
|
87
|
+
### Backend API (Elysia.js)
|
|
88
|
+
```typescript
|
|
89
|
+
// app/server/routes/users.ts
|
|
90
|
+
import { Elysia, t } from 'elysia'
|
|
79
91
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
92
|
+
export const userRoutes = new Elysia({ prefix: '/users' })
|
|
93
|
+
.get('/', () => ({ users: getAllUsers() }))
|
|
94
|
+
.post('/', ({ body }) => createUser(body), {
|
|
95
|
+
body: t.Object({
|
|
96
|
+
name: t.String(),
|
|
97
|
+
email: t.String({ format: 'email' })
|
|
98
|
+
}),
|
|
99
|
+
response: t.Object({
|
|
100
|
+
success: t.Boolean(),
|
|
101
|
+
user: t.Optional(t.Object({
|
|
102
|
+
id: t.Number(),
|
|
103
|
+
name: t.String(),
|
|
104
|
+
email: t.String(),
|
|
105
|
+
createdAt: t.Date()
|
|
106
|
+
}))
|
|
107
|
+
})
|
|
108
|
+
})
|
|
83
109
|
```
|
|
84
110
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
111
|
+
### Frontend with Type Safety
|
|
112
|
+
```typescript
|
|
113
|
+
// app/client/src/components/Users.tsx
|
|
114
|
+
import { api } from '../lib/eden-api'
|
|
115
|
+
|
|
116
|
+
export function UsersList() {
|
|
117
|
+
const [users, setUsers] = useState<User[]>([])
|
|
118
|
+
|
|
119
|
+
const createUser = async (userData: CreateUserData) => {
|
|
120
|
+
// ✨ Fully typed - no manual type definitions needed!
|
|
121
|
+
const { data, error } = await api.users.post(userData)
|
|
122
|
+
|
|
123
|
+
if (!error) {
|
|
124
|
+
setUsers(prev => [...prev, data.user]) // ✅ TypeScript knows the shape
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
return (
|
|
129
|
+
<div>
|
|
130
|
+
{users.map(user => (
|
|
131
|
+
<UserCard key={user.id} user={user} />
|
|
132
|
+
))}
|
|
133
|
+
</div>
|
|
134
|
+
)
|
|
135
|
+
}
|
|
136
|
+
```
|
|
88
137
|
|
|
89
|
-
|
|
138
|
+
## 🌍 Environment & Configuration
|
|
90
139
|
|
|
140
|
+
### Environment Variables
|
|
91
141
|
```bash
|
|
142
|
+
# .env (auto-generated from .env.example)
|
|
92
143
|
NODE_ENV=development
|
|
93
144
|
PORT=3000
|
|
94
145
|
HOST=localhost
|
|
95
146
|
VITE_PORT=5173
|
|
96
147
|
VITE_API_URL=http://localhost:3000
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
### Adding Routes
|
|
100
|
-
|
|
101
|
-
Backend routes in `app/server/routes/`:
|
|
102
|
-
|
|
103
|
-
```typescript
|
|
104
|
-
// app/server/routes/users.ts
|
|
105
|
-
import { Elysia } from 'elysia'
|
|
106
148
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
149
|
+
# Add your own variables
|
|
150
|
+
DATABASE_URL=postgresql://localhost:5432/myapp
|
|
151
|
+
JWT_SECRET=your-secret-key
|
|
110
152
|
```
|
|
111
153
|
|
|
112
|
-
Frontend
|
|
113
|
-
|
|
154
|
+
### Frontend Environment
|
|
114
155
|
```typescript
|
|
115
|
-
//
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
const users = await api.users.get() // ✅ Fully typed!
|
|
156
|
+
// Only VITE_* variables are exposed to frontend
|
|
157
|
+
const apiUrl = import.meta.env.VITE_API_URL
|
|
158
|
+
const appName = import.meta.env.VITE_APP_NAME
|
|
119
159
|
```
|
|
120
160
|
|
|
121
161
|
## 🚀 Deployment
|
|
122
162
|
|
|
123
|
-
###
|
|
124
|
-
|
|
163
|
+
### Single Server (Recommended)
|
|
125
164
|
```bash
|
|
126
165
|
# Build everything
|
|
127
166
|
bun run build
|
|
@@ -130,85 +169,147 @@ bun run build
|
|
|
130
169
|
bun run start
|
|
131
170
|
```
|
|
132
171
|
|
|
133
|
-
###
|
|
134
|
-
|
|
172
|
+
### Separate Deploy
|
|
135
173
|
```bash
|
|
136
174
|
# Backend
|
|
137
175
|
bun run build:backend
|
|
138
176
|
bun dist/index.js
|
|
139
177
|
|
|
140
|
-
# Frontend
|
|
178
|
+
# Frontend
|
|
141
179
|
bun run build:frontend
|
|
142
180
|
# Deploy dist/ folder to CDN
|
|
143
181
|
```
|
|
144
182
|
|
|
145
|
-
|
|
183
|
+
### Docker
|
|
184
|
+
```bash
|
|
185
|
+
# Use included Dockerfile
|
|
186
|
+
docker build -t my-app .
|
|
187
|
+
docker run -p 3000:3000 my-app
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
## 🔧 Requirements
|
|
191
|
+
|
|
192
|
+
- **Bun** >= 1.2.0 (required)
|
|
193
|
+
|
|
194
|
+
### Install Bun
|
|
195
|
+
```bash
|
|
196
|
+
# macOS/Linux
|
|
197
|
+
curl -fsSL https://bun.sh/install | bash
|
|
198
|
+
|
|
199
|
+
# Windows
|
|
200
|
+
powershell -c "irm bun.sh/install.ps1|iex"
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
> **Note**: FluxStack is built specifically for Bun runtime. Node.js is not supported.
|
|
146
204
|
|
|
147
|
-
|
|
205
|
+
## 🎨 Customization
|
|
148
206
|
|
|
207
|
+
### Adding API Routes
|
|
149
208
|
```typescript
|
|
150
|
-
// app/server/routes/posts.ts
|
|
209
|
+
// app/server/routes/posts.ts
|
|
210
|
+
import { Elysia, t } from 'elysia'
|
|
211
|
+
|
|
151
212
|
export const postRoutes = new Elysia({ prefix: '/posts' })
|
|
152
213
|
.get('/', () => ({ posts: [] }))
|
|
153
|
-
.post('/', ({ body }) => ({
|
|
154
|
-
|
|
155
|
-
|
|
214
|
+
.post('/', ({ body }) => ({ post: body }), {
|
|
215
|
+
body: t.Object({
|
|
216
|
+
title: t.String(),
|
|
217
|
+
content: t.String()
|
|
218
|
+
})
|
|
219
|
+
})
|
|
156
220
|
|
|
157
|
-
|
|
221
|
+
// app/server/index.ts
|
|
222
|
+
import { postRoutes } from './routes/posts'
|
|
158
223
|
|
|
224
|
+
app.use(postRoutes)
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
### Custom Plugins
|
|
159
228
|
```typescript
|
|
160
|
-
// app/
|
|
161
|
-
import {
|
|
229
|
+
// app/server/plugins/auth.ts
|
|
230
|
+
import { Elysia } from 'elysia'
|
|
162
231
|
|
|
163
|
-
export
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
232
|
+
export const authPlugin = new Elysia({ name: 'auth' })
|
|
233
|
+
.derive(({ headers }) => ({
|
|
234
|
+
user: getUserFromToken(headers.authorization)
|
|
235
|
+
}))
|
|
236
|
+
.guard({
|
|
237
|
+
beforeHandle({ user, set }) {
|
|
238
|
+
if (!user) {
|
|
239
|
+
set.status = 401
|
|
240
|
+
return { error: 'Unauthorized' }
|
|
241
|
+
}
|
|
242
|
+
}
|
|
167
243
|
})
|
|
168
|
-
}
|
|
169
244
|
```
|
|
170
245
|
|
|
171
|
-
##
|
|
246
|
+
## 📚 Documentation & AI Support
|
|
172
247
|
|
|
173
|
-
|
|
248
|
+
FluxStack includes comprehensive documentation for both developers and AI assistants:
|
|
174
249
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
```
|
|
250
|
+
- **📖 Full Documentation**: Check the `ai-context/` folder
|
|
251
|
+
- **🤖 AI Instructions**: See `CLAUDE.md` for AI assistant guidance
|
|
252
|
+
- **⚡ Quick Start**: `ai-context/00-QUICK-START.md`
|
|
253
|
+
- **🎯 Examples**: Complete CRUD examples included
|
|
180
254
|
|
|
181
|
-
|
|
255
|
+
## 🛟 Support & Community
|
|
182
256
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
```
|
|
257
|
+
- **🐛 Issues**: [Report bugs](https://github.com/MarcosBrendonDePaula/FluxStack/issues)
|
|
258
|
+
- **📖 Documentation**: [Full docs](https://github.com/MarcosBrendonDePaula/FluxStack)
|
|
259
|
+
- **💬 Discussions**: [GitHub Discussions](https://github.com/MarcosBrendonDePaula/FluxStack/discussions)
|
|
187
260
|
|
|
188
|
-
|
|
261
|
+
## 🔄 Upgrading
|
|
189
262
|
|
|
190
263
|
```bash
|
|
191
|
-
#
|
|
192
|
-
|
|
264
|
+
# Get the latest version
|
|
265
|
+
bunx create-fluxstack@latest my-new-app
|
|
266
|
+
|
|
267
|
+
# Check current version
|
|
268
|
+
npm list -g create-fluxstack
|
|
193
269
|
```
|
|
194
270
|
|
|
195
|
-
##
|
|
271
|
+
## 🌟 Why FluxStack?
|
|
196
272
|
|
|
197
|
-
|
|
198
|
-
-
|
|
199
|
-
-
|
|
200
|
-
-
|
|
273
|
+
### ✅ **Developer Experience**
|
|
274
|
+
- **Zero Config**: Just create and start coding
|
|
275
|
+
- **Type Safety**: End-to-end without manual work
|
|
276
|
+
- **Hot Reload**: Backend and frontend in sync
|
|
277
|
+
- **Auto Docs**: Swagger generated from your code
|
|
201
278
|
|
|
202
|
-
|
|
279
|
+
### ✅ **Performance**
|
|
280
|
+
- **Bun Runtime**: 3x faster than Node.js
|
|
281
|
+
- **Elysia**: One of the fastest TypeScript frameworks
|
|
282
|
+
- **Vite**: Instant HMR and optimized builds
|
|
283
|
+
- **React 19**: Latest performance improvements
|
|
203
284
|
|
|
204
|
-
|
|
205
|
-
-
|
|
206
|
-
-
|
|
285
|
+
### ✅ **Production Ready**
|
|
286
|
+
- **Docker**: Optimized containers included
|
|
287
|
+
- **Environment**: Robust configuration system
|
|
288
|
+
- **Error Handling**: Consistent error responses
|
|
289
|
+
- **Monitoring**: Built-in observability features
|
|
207
290
|
|
|
208
|
-
|
|
291
|
+
### ✅ **Modern Stack**
|
|
292
|
+
- **TypeScript 5**: Latest language features
|
|
293
|
+
- **React 19**: Concurrent features, Server Components ready
|
|
294
|
+
- **Tailwind v4**: Latest CSS framework
|
|
295
|
+
- **Eden Treaty**: Revolutionary type-safe API client
|
|
209
296
|
|
|
210
|
-
|
|
297
|
+
## 🎊 Get Started Now!
|
|
298
|
+
|
|
299
|
+
```bash
|
|
300
|
+
bunx create-fluxstack my-dream-app
|
|
301
|
+
cd my-dream-app
|
|
302
|
+
bun run dev
|
|
303
|
+
```
|
|
304
|
+
|
|
305
|
+
**Welcome to the future of full-stack development!** ⚡🚀
|
|
211
306
|
|
|
212
307
|
---
|
|
213
308
|
|
|
214
|
-
|
|
309
|
+
<div align="center">
|
|
310
|
+
|
|
311
|
+
**Built with ❤️ by the FluxStack Team**
|
|
312
|
+
|
|
313
|
+
[⭐ Star on GitHub](https://github.com/MarcosBrendonDePaula/FluxStack) • [📦 NPM Package](https://www.npmjs.com/package/create-fluxstack)
|
|
314
|
+
|
|
315
|
+
</div>
|
package/package-template.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-fluxstack",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"description": "⚡ Modern full-stack TypeScript framework with Elysia + React + Bun",
|
|
5
5
|
"keywords": ["framework", "full-stack", "typescript", "elysia", "react", "bun", "vite"],
|
|
6
6
|
"author": "FluxStack Team",
|
|
@@ -81,5 +81,9 @@
|
|
|
81
81
|
"react": "^19.1.0",
|
|
82
82
|
"react-dom": "^19.1.0",
|
|
83
83
|
"vite": "^7.0.4"
|
|
84
|
-
}
|
|
84
|
+
},
|
|
85
|
+
"engines": {
|
|
86
|
+
"bun": ">=1.2.0"
|
|
87
|
+
},
|
|
88
|
+
"preferredPackageManager": "bun"
|
|
85
89
|
}
|