create-fluxstack 1.0.7 → 1.0.8
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 +198 -98
- package/package.json +1 -1
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,146 @@ 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.0.0 (recommended)
|
|
193
|
+
- **Node.js** >= 18.0.0 (fallback)
|
|
194
|
+
|
|
195
|
+
### Install Bun
|
|
196
|
+
```bash
|
|
197
|
+
# macOS/Linux
|
|
198
|
+
curl -fsSL https://bun.sh/install | bash
|
|
199
|
+
|
|
200
|
+
# Windows
|
|
201
|
+
powershell -c "irm bun.sh/install.ps1|iex"
|
|
202
|
+
```
|
|
146
203
|
|
|
147
|
-
|
|
204
|
+
## 🎨 Customization
|
|
148
205
|
|
|
206
|
+
### Adding API Routes
|
|
149
207
|
```typescript
|
|
150
|
-
// app/server/routes/posts.ts
|
|
208
|
+
// app/server/routes/posts.ts
|
|
209
|
+
import { Elysia, t } from 'elysia'
|
|
210
|
+
|
|
151
211
|
export const postRoutes = new Elysia({ prefix: '/posts' })
|
|
152
212
|
.get('/', () => ({ posts: [] }))
|
|
153
|
-
.post('/', ({ body }) => ({
|
|
154
|
-
|
|
155
|
-
|
|
213
|
+
.post('/', ({ body }) => ({ post: body }), {
|
|
214
|
+
body: t.Object({
|
|
215
|
+
title: t.String(),
|
|
216
|
+
content: t.String()
|
|
217
|
+
})
|
|
218
|
+
})
|
|
156
219
|
|
|
157
|
-
|
|
220
|
+
// app/server/index.ts
|
|
221
|
+
import { postRoutes } from './routes/posts'
|
|
158
222
|
|
|
223
|
+
app.use(postRoutes)
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
### Custom Plugins
|
|
159
227
|
```typescript
|
|
160
|
-
// app/
|
|
161
|
-
import {
|
|
228
|
+
// app/server/plugins/auth.ts
|
|
229
|
+
import { Elysia } from 'elysia'
|
|
162
230
|
|
|
163
|
-
export
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
231
|
+
export const authPlugin = new Elysia({ name: 'auth' })
|
|
232
|
+
.derive(({ headers }) => ({
|
|
233
|
+
user: getUserFromToken(headers.authorization)
|
|
234
|
+
}))
|
|
235
|
+
.guard({
|
|
236
|
+
beforeHandle({ user, set }) {
|
|
237
|
+
if (!user) {
|
|
238
|
+
set.status = 401
|
|
239
|
+
return { error: 'Unauthorized' }
|
|
240
|
+
}
|
|
241
|
+
}
|
|
167
242
|
})
|
|
168
|
-
}
|
|
169
243
|
```
|
|
170
244
|
|
|
171
|
-
##
|
|
245
|
+
## 📚 Documentation & AI Support
|
|
172
246
|
|
|
173
|
-
|
|
247
|
+
FluxStack includes comprehensive documentation for both developers and AI assistants:
|
|
174
248
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
```
|
|
249
|
+
- **📖 Full Documentation**: Check the `ai-context/` folder
|
|
250
|
+
- **🤖 AI Instructions**: See `CLAUDE.md` for AI assistant guidance
|
|
251
|
+
- **⚡ Quick Start**: `ai-context/00-QUICK-START.md`
|
|
252
|
+
- **🎯 Examples**: Complete CRUD examples included
|
|
180
253
|
|
|
181
|
-
|
|
254
|
+
## 🛟 Support & Community
|
|
182
255
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
```
|
|
256
|
+
- **🐛 Issues**: [Report bugs](https://github.com/MarcosBrendonDePaula/FluxStack/issues)
|
|
257
|
+
- **📖 Documentation**: [Full docs](https://github.com/MarcosBrendonDePaula/FluxStack)
|
|
258
|
+
- **💬 Discussions**: [GitHub Discussions](https://github.com/MarcosBrendonDePaula/FluxStack/discussions)
|
|
187
259
|
|
|
188
|
-
|
|
260
|
+
## 🔄 Upgrading
|
|
189
261
|
|
|
190
262
|
```bash
|
|
191
|
-
#
|
|
192
|
-
|
|
263
|
+
# Get the latest version
|
|
264
|
+
bunx create-fluxstack@latest my-new-app
|
|
265
|
+
|
|
266
|
+
# Check current version
|
|
267
|
+
npm list -g create-fluxstack
|
|
193
268
|
```
|
|
194
269
|
|
|
195
|
-
##
|
|
270
|
+
## 🌟 Why FluxStack?
|
|
271
|
+
|
|
272
|
+
### ✅ **Developer Experience**
|
|
273
|
+
- **Zero Config**: Just create and start coding
|
|
274
|
+
- **Type Safety**: End-to-end without manual work
|
|
275
|
+
- **Hot Reload**: Backend and frontend in sync
|
|
276
|
+
- **Auto Docs**: Swagger generated from your code
|
|
196
277
|
|
|
197
|
-
|
|
198
|
-
-
|
|
199
|
-
-
|
|
200
|
-
-
|
|
278
|
+
### ✅ **Performance**
|
|
279
|
+
- **Bun Runtime**: 3x faster than Node.js
|
|
280
|
+
- **Elysia**: One of the fastest TypeScript frameworks
|
|
281
|
+
- **Vite**: Instant HMR and optimized builds
|
|
282
|
+
- **React 19**: Latest performance improvements
|
|
201
283
|
|
|
202
|
-
|
|
284
|
+
### ✅ **Production Ready**
|
|
285
|
+
- **Docker**: Optimized containers included
|
|
286
|
+
- **Environment**: Robust configuration system
|
|
287
|
+
- **Error Handling**: Consistent error responses
|
|
288
|
+
- **Monitoring**: Built-in observability features
|
|
203
289
|
|
|
204
|
-
|
|
205
|
-
-
|
|
206
|
-
-
|
|
290
|
+
### ✅ **Modern Stack**
|
|
291
|
+
- **TypeScript 5**: Latest language features
|
|
292
|
+
- **React 19**: Concurrent features, Server Components ready
|
|
293
|
+
- **Tailwind v4**: Latest CSS framework
|
|
294
|
+
- **Eden Treaty**: Revolutionary type-safe API client
|
|
207
295
|
|
|
208
|
-
##
|
|
296
|
+
## 🎊 Get Started Now!
|
|
297
|
+
|
|
298
|
+
```bash
|
|
299
|
+
bunx create-fluxstack my-dream-app
|
|
300
|
+
cd my-dream-app
|
|
301
|
+
bun run dev
|
|
302
|
+
```
|
|
209
303
|
|
|
210
|
-
|
|
304
|
+
**Welcome to the future of full-stack development!** ⚡🚀
|
|
211
305
|
|
|
212
306
|
---
|
|
213
307
|
|
|
214
|
-
|
|
308
|
+
<div align="center">
|
|
309
|
+
|
|
310
|
+
**Built with ❤️ by the FluxStack Team**
|
|
311
|
+
|
|
312
|
+
[⭐ Star on GitHub](https://github.com/MarcosBrendonDePaula/FluxStack) • [📦 NPM Package](https://www.npmjs.com/package/create-fluxstack)
|
|
313
|
+
|
|
314
|
+
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "create-fluxstack",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
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",
|