@t1ep1l0t/create-fsd 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.
- package/README.md +146 -100
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,28 +1,58 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
# ๐ create-fsd
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
**Scaffold modern React applications with Feature-Sliced Design architecture**
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
-
|
|
9
|
-
|
|
10
|
-
- React Router DOM (routing)
|
|
11
|
-
- Zustand (state management)
|
|
12
|
-
- Axios (HTTP client with interceptors)
|
|
13
|
-
- React Query (server state management)
|
|
14
|
-
- i18next (internationalization)
|
|
15
|
-
- TailwindCSS v4 (styling)
|
|
16
|
-
- Example code for all libraries
|
|
17
|
-
- Path aliases configured (@app, @pages, @widgets, @features, @entities, @shared)
|
|
18
|
-
- ESLint configured
|
|
7
|
+
[](https://www.npmjs.com/package/@t1ep1l0t/create-fsd)
|
|
8
|
+
[](https://opensource.org/licenses/MIT)
|
|
9
|
+
[](https://nodejs.org/)
|
|
19
10
|
|
|
20
|
-
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## ๐ About
|
|
16
|
+
|
|
17
|
+
**create-fsd** is a powerful CLI tool that helps you quickly bootstrap production-ready React applications following the [Feature-Sliced Design (FSD)](https://feature-sliced.design/) architectural methodology. Get started with a fully configured project in seconds!
|
|
18
|
+
|
|
19
|
+
> ๐ฏ Currently supports **React** template. More frameworks (Vue, Next.js, Nuxt, Svelte) coming soon!
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
## โจ Features
|
|
24
|
+
|
|
25
|
+
### ๐๏ธ **Architecture**
|
|
26
|
+
- **Feature-Sliced Design (FSD)** - Scalable and maintainable project structure
|
|
27
|
+
- Clear separation of concerns across layers
|
|
28
|
+
- Ready-to-use folder structure
|
|
29
|
+
|
|
30
|
+
### โก **Modern Stack**
|
|
31
|
+
- **React 18** - Latest React with concurrent features
|
|
32
|
+
- **Vite** - Lightning-fast build tool and dev server
|
|
33
|
+
- **TailwindCSS v4** - Utility-first CSS framework
|
|
34
|
+
|
|
35
|
+
### ๐ฆ **Pre-configured Libraries**
|
|
36
|
+
- **React Router DOM** - Declarative routing
|
|
37
|
+
- **Zustand** - Lightweight state management
|
|
38
|
+
- **Axios** - HTTP client with interceptors configured
|
|
39
|
+
- **React Query** - Powerful server state management
|
|
40
|
+
- **i18next** - Internationalization (i18n) support
|
|
41
|
+
- **ESLint** - Code quality and consistency
|
|
42
|
+
|
|
43
|
+
### ๐จ **Developer Experience**
|
|
44
|
+
- Path aliases configured (`@app`, `@pages`, `@widgets`, `@features`, `@entities`, `@shared`)
|
|
45
|
+
- Example code demonstrating best practices
|
|
46
|
+
- Zero configuration needed - start coding immediately
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
## ๐ Quick Start
|
|
21
51
|
|
|
22
52
|
### Using npm
|
|
23
53
|
|
|
24
54
|
```bash
|
|
25
|
-
npm create fsd my-app
|
|
55
|
+
npm create @t1ep1l0t/fsd my-app
|
|
26
56
|
cd my-app
|
|
27
57
|
npm run dev
|
|
28
58
|
```
|
|
@@ -30,132 +60,148 @@ npm run dev
|
|
|
30
60
|
### Using npx
|
|
31
61
|
|
|
32
62
|
```bash
|
|
33
|
-
npx create-fsd my-app
|
|
63
|
+
npx @t1ep1l0t/create-fsd my-app
|
|
34
64
|
cd my-app
|
|
35
65
|
npm run dev
|
|
36
66
|
```
|
|
37
67
|
|
|
38
|
-
###
|
|
68
|
+
### With template option
|
|
39
69
|
|
|
40
70
|
```bash
|
|
41
|
-
|
|
42
|
-
cd my-app
|
|
43
|
-
npm run dev
|
|
71
|
+
npx @t1ep1l0t/create-fsd my-app --template react
|
|
44
72
|
```
|
|
45
73
|
|
|
46
|
-
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
## ๐ Project Structure
|
|
77
|
+
|
|
78
|
+
The generated project follows the FSD architecture with clear layer separation:
|
|
47
79
|
|
|
48
|
-
```
|
|
49
|
-
|
|
80
|
+
```
|
|
81
|
+
src/
|
|
82
|
+
โโโ ๐ฑ app/ # Application initialization layer
|
|
83
|
+
โ โโโ providers/ # App providers (Router, i18n, Query Client)
|
|
84
|
+
โ โโโ styles/ # Global styles
|
|
85
|
+
โ โโโ App.jsx # Root component
|
|
86
|
+
โ
|
|
87
|
+
โโโ ๐ pages/ # Pages layer - route components
|
|
88
|
+
โ โโโ home/ # Home page
|
|
89
|
+
โ โโโ about/ # About page
|
|
90
|
+
โ
|
|
91
|
+
โโโ ๐งฉ widgets/ # Widgets layer - composite UI blocks
|
|
92
|
+
โ โโโ Header/ # Header widget
|
|
93
|
+
โ โโโ layouts/ # Layout components
|
|
94
|
+
โ
|
|
95
|
+
โโโ โ๏ธ features/ # Features layer - user scenarios
|
|
96
|
+
โ โโโ .gitkeep # (Ready for your features)
|
|
97
|
+
โ
|
|
98
|
+
โโโ ๐๏ธ entities/ # Entities layer - business entities
|
|
99
|
+
โ โโโ .gitkeep # (Ready for your entities)
|
|
100
|
+
โ
|
|
101
|
+
โโโ ๐ง shared/ # Shared layer - reusable code
|
|
102
|
+
โโโ api/ # API client configuration
|
|
103
|
+
โโโ store/ # Zustand stores
|
|
104
|
+
โโโ ui/ # UI kit components
|
|
50
105
|
```
|
|
51
106
|
|
|
52
|
-
###
|
|
107
|
+
### Layer Responsibilities
|
|
53
108
|
|
|
54
|
-
|
|
109
|
+
| Layer | Purpose | Examples |
|
|
110
|
+
|-------|---------|----------|
|
|
111
|
+
| **app** | Application initialization and setup | Providers, global styles, routing setup |
|
|
112
|
+
| **pages** | Route-level components | HomePage, AboutPage, ProfilePage |
|
|
113
|
+
| **widgets** | Complex composite components | Header, Footer, Sidebar, UserCard |
|
|
114
|
+
| **features** | User interactions and business features | LoginForm, CommentsList, ProductFilters |
|
|
115
|
+
| **entities** | Business domain models | User, Product, Order |
|
|
116
|
+
| **shared** | Reusable utilities and UI | Button, Input, formatDate, API client |
|
|
55
117
|
|
|
56
|
-
|
|
118
|
+
---
|
|
57
119
|
|
|
58
|
-
|
|
59
|
-
# Create a new React project with FSD architecture
|
|
60
|
-
create-fsd my-awesome-app --template react
|
|
120
|
+
## ๐ฏ What's Included
|
|
61
121
|
|
|
62
|
-
|
|
63
|
-
create-fsd my-awesome-app -t react
|
|
64
|
-
```
|
|
122
|
+
### Example Implementations
|
|
65
123
|
|
|
66
|
-
|
|
124
|
+
The generated project includes working examples for all included libraries:
|
|
67
125
|
|
|
68
|
-
|
|
126
|
+
- โ
**Routing** - Multi-page setup with React Router
|
|
127
|
+
- โ
**State Management** - Counter example with Zustand
|
|
128
|
+
- โ
**API Integration** - Axios client with interceptors
|
|
129
|
+
- โ
**Data Fetching** - React Query setup and usage
|
|
130
|
+
- โ
**Internationalization** - i18n configuration with language switching
|
|
131
|
+
- โ
**Styling** - TailwindCSS components and utilities
|
|
132
|
+
- โ
**Code Quality** - ESLint rules configured
|
|
69
133
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
โ โโโ layouts/
|
|
82
|
-
โโโ features/ # Business features (empty, ready for your code)
|
|
83
|
-
โโโ entities/ # Business entities (empty, ready for your code)
|
|
84
|
-
โโโ shared/ # Shared code
|
|
85
|
-
โโโ api/ # API client & query configuration
|
|
86
|
-
โโโ store/ # Zustand stores
|
|
87
|
-
โโโ ui/ # Reusable UI components
|
|
88
|
-
```
|
|
134
|
+
---
|
|
135
|
+
|
|
136
|
+
## ๐ ๏ธ Available Templates
|
|
137
|
+
|
|
138
|
+
| Template | Status | Description |
|
|
139
|
+
|----------|--------|-------------|
|
|
140
|
+
| **React** | โ
Available | React 18 + Vite + FSD architecture |
|
|
141
|
+
| **Vue** | ๐ Coming Soon | Vue 3 + Vite + FSD architecture |
|
|
142
|
+
| **Next.js** | ๐ Coming Soon | Next.js + FSD architecture |
|
|
143
|
+
| **Nuxt** | ๐ Coming Soon | Nuxt 3 + FSD architecture |
|
|
144
|
+
| **Svelte** | ๐ Coming Soon | Svelte + Vite + FSD architecture |
|
|
89
145
|
|
|
90
|
-
|
|
146
|
+
---
|
|
91
147
|
|
|
92
|
-
|
|
148
|
+
## ๐ CLI Options
|
|
93
149
|
|
|
94
150
|
```bash
|
|
95
|
-
|
|
151
|
+
create-fsd <project-name> [options]
|
|
96
152
|
```
|
|
97
153
|
|
|
98
|
-
###
|
|
154
|
+
### Options
|
|
99
155
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
- Valid author information
|
|
156
|
+
| Option | Alias | Description | Default |
|
|
157
|
+
|--------|-------|-------------|---------|
|
|
158
|
+
| `--template <name>` | `-t` | Template to use | `react` |
|
|
104
159
|
|
|
105
|
-
###
|
|
160
|
+
### Examples
|
|
106
161
|
|
|
107
162
|
```bash
|
|
108
|
-
|
|
109
|
-
|
|
163
|
+
# Create project with React template (default)
|
|
164
|
+
npx @t1ep1l0t/create-fsd my-app
|
|
110
165
|
|
|
111
|
-
|
|
166
|
+
# Explicitly specify template
|
|
167
|
+
npx @t1ep1l0t/create-fsd my-app --template react
|
|
112
168
|
|
|
113
|
-
|
|
114
|
-
|
|
169
|
+
# Short form
|
|
170
|
+
npx @t1ep1l0t/create-fsd my-app -t react
|
|
115
171
|
```
|
|
116
172
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
### Install dependencies
|
|
173
|
+
---
|
|
120
174
|
|
|
121
|
-
|
|
122
|
-
npm install
|
|
123
|
-
```
|
|
175
|
+
## ๐ Learn More
|
|
124
176
|
|
|
125
|
-
|
|
177
|
+
- [Feature-Sliced Design Documentation](https://feature-sliced.design/)
|
|
178
|
+
- [React Documentation](https://react.dev/)
|
|
179
|
+
- [Vite Documentation](https://vitejs.dev/)
|
|
180
|
+
- [TailwindCSS Documentation](https://tailwindcss.com/)
|
|
126
181
|
|
|
127
|
-
|
|
128
|
-
npm test
|
|
129
|
-
# or
|
|
130
|
-
node bin/cli.js test-project --template react
|
|
131
|
-
```
|
|
182
|
+
---
|
|
132
183
|
|
|
133
|
-
|
|
184
|
+
## ๐ค Contributing
|
|
134
185
|
|
|
135
|
-
|
|
136
|
-
2. Add all necessary files for the template
|
|
137
|
-
3. Update CLI help text if needed
|
|
186
|
+
Contributions are welcome! Feel free to:
|
|
138
187
|
|
|
139
|
-
|
|
188
|
+
- Report bugs
|
|
189
|
+
- Suggest new features
|
|
190
|
+
- Submit pull requests
|
|
191
|
+
- Add new framework templates
|
|
140
192
|
|
|
141
|
-
|
|
193
|
+
---
|
|
142
194
|
|
|
143
|
-
|
|
144
|
-
2. Create example usage in the appropriate FSD layer
|
|
145
|
-
3. Add configuration if needed (e.g., in `src/app/providers/`)
|
|
146
|
-
4. Update the template README with the new library
|
|
195
|
+
## ๐ License
|
|
147
196
|
|
|
148
|
-
|
|
197
|
+
MIT ยฉ [t1ep1l0t](https://github.com/t1ep1l0t)
|
|
149
198
|
|
|
150
|
-
|
|
151
|
-
```json
|
|
152
|
-
"react-hook-form": "^7.50.0"
|
|
153
|
-
```
|
|
199
|
+
---
|
|
154
200
|
|
|
155
|
-
|
|
201
|
+
<div align="center">
|
|
156
202
|
|
|
157
|
-
|
|
203
|
+
**Made with โค๏ธ for the developer community**
|
|
158
204
|
|
|
159
|
-
|
|
205
|
+
[Report Bug](https://github.com/t1ep1l0t/create-fsd/issues) ยท [Request Feature](https://github.com/t1ep1l0t/create-fsd/issues)
|
|
160
206
|
|
|
161
|
-
|
|
207
|
+
</div>
|