@multisystemsuite/create-mf-app 1.0.5
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 +249 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1774 -0
- package/package.json +51 -0
package/README.md
ADDED
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
# create-mf-app
|
|
2
|
+
|
|
3
|
+
TypeScript CLI that scaffolds enterprise microfrontend applications and monorepos using React 19, Vite 7, Module Federation, React Router, Docker, and npm workspaces.
|
|
4
|
+
|
|
5
|
+
## What it generates
|
|
6
|
+
|
|
7
|
+
- Single app scaffold (`child` mode)
|
|
8
|
+
- Parent monorepo scaffold (`parent` mode) with:
|
|
9
|
+
- `apps/main` host
|
|
10
|
+
- multiple remote apps
|
|
11
|
+
- shared app(s) such as `sharedlib`
|
|
12
|
+
- root scripts for dev/build/watch/preview/release
|
|
13
|
+
|
|
14
|
+
## Quick start
|
|
15
|
+
|
|
16
|
+
Single app:
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npx create-mf-app inventory --template=tsx --port=3001
|
|
20
|
+
cd inventory
|
|
21
|
+
npm install
|
|
22
|
+
npm run dev
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Parent monorepo:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npx create-mf-app my-platform --type=parent --children=billing,orders,analytics,warehouse --shared=corelib --template=tsx
|
|
29
|
+
cd my-platform
|
|
30
|
+
npm install
|
|
31
|
+
npm run local
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## CLI usage
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
npx create-mf-app <project-name> [options]
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
Options:
|
|
41
|
+
|
|
42
|
+
- `--port=3001`
|
|
43
|
+
- `--template=tsx|jsx`
|
|
44
|
+
- `--typescript` (alias for `--template=tsx`)
|
|
45
|
+
- `--javascript` (alias for `--template=jsx`)
|
|
46
|
+
- `--type=parent|child`
|
|
47
|
+
- `--children=billing,orders,analytics`
|
|
48
|
+
- `--shared=sharedlib`
|
|
49
|
+
- `--docker=true|false`
|
|
50
|
+
- `--federation=true|false`
|
|
51
|
+
- `-y`, `--yes`
|
|
52
|
+
- `-h`, `--help`
|
|
53
|
+
|
|
54
|
+
## Interactive flow
|
|
55
|
+
|
|
56
|
+
When running `npx create-mf-app`:
|
|
57
|
+
|
|
58
|
+
- Project Name
|
|
59
|
+
- Application Type (Parent / Child)
|
|
60
|
+
- Child Applications (for parent)
|
|
61
|
+
- Shared Applications (for parent)
|
|
62
|
+
- Template (TSX / JSX)
|
|
63
|
+
- Port
|
|
64
|
+
- Module Federation (Yes/No)
|
|
65
|
+
- Docker (Yes/No)
|
|
66
|
+
|
|
67
|
+
## Parent mode behavior
|
|
68
|
+
|
|
69
|
+
- `main` is mandatory and reserved as host.
|
|
70
|
+
- `main` is auto-created and cannot be passed in `children` or `shared`.
|
|
71
|
+
- If `--shared` is omitted in parent mode, generator auto-adds `sharedlib`.
|
|
72
|
+
- Children can be passed comma-separated or space-separated.
|
|
73
|
+
|
|
74
|
+
Example:
|
|
75
|
+
|
|
76
|
+
```bash
|
|
77
|
+
npx create-mf-app my-platform --type parent --children billing orders analytics --template tsx
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
You can use any project/module names (for example `billing`, `orders`, `analytics`) except reserved `main`.
|
|
81
|
+
|
|
82
|
+
## Generated parent structure
|
|
83
|
+
|
|
84
|
+
```text
|
|
85
|
+
my-platform/
|
|
86
|
+
├── apps/
|
|
87
|
+
│ ├── main/
|
|
88
|
+
│ ├── billing/
|
|
89
|
+
│ ├── orders/
|
|
90
|
+
│ ├── analytics/
|
|
91
|
+
│ └── corelib/
|
|
92
|
+
├── packages/
|
|
93
|
+
│ ├── shared-ui/
|
|
94
|
+
│ ├── shared-utils/
|
|
95
|
+
│ └── shared-auth/
|
|
96
|
+
├── scripts/
|
|
97
|
+
├── docker-compose.yml
|
|
98
|
+
├── .env
|
|
99
|
+
├── package.json
|
|
100
|
+
├── live-reload.js
|
|
101
|
+
├── smart-build.js
|
|
102
|
+
├── print-env.js
|
|
103
|
+
└── README.md
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## Root workspace scripts (parent mode)
|
|
107
|
+
|
|
108
|
+
Generated root scripts include:
|
|
109
|
+
|
|
110
|
+
- `local`, `dev`, `dev:watch`, `dev:fast`, `dev:safe`
|
|
111
|
+
- `build:local`, `build:dev`, `build:staging`, `build:uat`, `build:production`
|
|
112
|
+
- app-specific scripts like `billing`, `orders`, `analytics`, `warehouse`
|
|
113
|
+
- `watch:*`, `preview:*`, `watch:local:*`, `preview:local:*`
|
|
114
|
+
- `release`, `release:minor`, `release:major`
|
|
115
|
+
|
|
116
|
+
## Module Federation wiring
|
|
117
|
+
|
|
118
|
+
Generator configures:
|
|
119
|
+
|
|
120
|
+
- `remoteEntry.js`
|
|
121
|
+
- host remotes registration in `main`
|
|
122
|
+
- remote exposes (`./App`)
|
|
123
|
+
- shared singleton dependencies:
|
|
124
|
+
- `react`
|
|
125
|
+
- `react-dom`
|
|
126
|
+
- `react-router-dom`
|
|
127
|
+
|
|
128
|
+
### Sharedlib integration
|
|
129
|
+
|
|
130
|
+
- `corelib` exposes `./SharedBadge`
|
|
131
|
+
- child apps consume `corelib/SharedBadge`
|
|
132
|
+
- `main` app provides navbar + route-based remote loading:
|
|
133
|
+
- `/billing/*`
|
|
134
|
+
- `/orders/*`
|
|
135
|
+
- `/analytics/*`
|
|
136
|
+
- etc.
|
|
137
|
+
|
|
138
|
+
## Shared configuration system (enterprise)
|
|
139
|
+
|
|
140
|
+
For parent mode with shared app (for example `sharedlib` or `corelib`), generator scaffolds centralized runtime configuration:
|
|
141
|
+
|
|
142
|
+
```text
|
|
143
|
+
apps/sharedlib/src/config/
|
|
144
|
+
├── AppConfigProvider.tsx
|
|
145
|
+
├── configStore.ts
|
|
146
|
+
├── defaultConfig.ts
|
|
147
|
+
├── themeGenerator.ts
|
|
148
|
+
├── useAppConfig.ts
|
|
149
|
+
└── types.ts
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
It powers:
|
|
153
|
+
|
|
154
|
+
- branding and title settings
|
|
155
|
+
- color and typography runtime changes
|
|
156
|
+
- sidebar/navbar/layout toggles
|
|
157
|
+
- dark/light mode switching
|
|
158
|
+
- preset themes
|
|
159
|
+
- import/export config JSON
|
|
160
|
+
- localStorage persistence
|
|
161
|
+
|
|
162
|
+
MUI settings page is generated at:
|
|
163
|
+
|
|
164
|
+
- `apps/sharedlib/src/pages/Settings/SettingsPage.tsx`
|
|
165
|
+
|
|
166
|
+
Main app exposes routes:
|
|
167
|
+
|
|
168
|
+
- `/settings/theme`
|
|
169
|
+
- `/settings/layout`
|
|
170
|
+
- `/settings/branding`
|
|
171
|
+
|
|
172
|
+
Shared UI foundation is also generated:
|
|
173
|
+
|
|
174
|
+
```text
|
|
175
|
+
apps/sharedlib/src/shared-ui/
|
|
176
|
+
├── AppButton/
|
|
177
|
+
├── AppCard/
|
|
178
|
+
├── AppDialog/
|
|
179
|
+
├── AppTable/
|
|
180
|
+
├── AppInput/
|
|
181
|
+
├── AppNavbar/
|
|
182
|
+
├── AppSidebar/
|
|
183
|
+
└── ThemeProvider/
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
Additional enterprise placeholders are scaffolded (permissions, feature flags, plugin registry, route guard, error boundary, global snackbar, i18n starter, command palette, notification center, profile dropdown, analytics/audit placeholders).
|
|
187
|
+
|
|
188
|
+
## Template support
|
|
189
|
+
|
|
190
|
+
### TSX template
|
|
191
|
+
|
|
192
|
+
- `App.tsx`, `main.tsx`, `vite.config.ts`, `tsconfig.json`
|
|
193
|
+
- Type declaration files for federated remotes are generated automatically in parent mode
|
|
194
|
+
|
|
195
|
+
### JSX template
|
|
196
|
+
|
|
197
|
+
- `App.jsx`, `main.jsx`, `vite.config.js`, `jsconfig.json`
|
|
198
|
+
|
|
199
|
+
## Environment files
|
|
200
|
+
|
|
201
|
+
Each app gets app-level `.env`:
|
|
202
|
+
|
|
203
|
+
```env
|
|
204
|
+
VITE_PORT=3001
|
|
205
|
+
VITE_APP_NAME=billing
|
|
206
|
+
VITE_REMOTE_ENTRY=http://localhost:3001/assets/remoteEntry.js
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
Parent workspace also gets root `.env` with all app ports/remote URLs.
|
|
210
|
+
|
|
211
|
+
## Docker support
|
|
212
|
+
|
|
213
|
+
- Dockerfile generated per app (if Docker enabled)
|
|
214
|
+
- parent mode generates `docker-compose.yml`
|
|
215
|
+
|
|
216
|
+
## Node version requirement
|
|
217
|
+
|
|
218
|
+
Generated projects use Vite 7. Use Node:
|
|
219
|
+
|
|
220
|
+
- `>=20.19.0` or
|
|
221
|
+
- `>=22.12.0` (recommended: Node 22)
|
|
222
|
+
|
|
223
|
+
If using Node 18, Vite commands will fail.
|
|
224
|
+
|
|
225
|
+
## Troubleshooting
|
|
226
|
+
|
|
227
|
+
- **`"local" cannot be used as a mode name`**
|
|
228
|
+
- fixed by using `localdev` mode in generated scripts
|
|
229
|
+
- **`useRoutes() may be used only in context of a <Router>`**
|
|
230
|
+
- fixed by sharing `react-router-dom` singleton in federation config
|
|
231
|
+
- **MUI/CSS not applied across remotes**
|
|
232
|
+
- fixed by sharing `@mui/material`, `@mui/icons-material`, `@emotion/react`, and `@emotion/styled` as federation singletons
|
|
233
|
+
- **`Cannot find module 'billing/App'` in TS**
|
|
234
|
+
- fixed via generated `.d.ts` federation module declarations in TSX parent apps
|
|
235
|
+
- **`Task not found: live-reload`**
|
|
236
|
+
- fixed via generated root script `"live-reload": "node live-reload.js"`
|
|
237
|
+
- **Install succeeded but Vite binary missing (`ERR_MODULE_NOT_FOUND ... vite/dist/node/cli.js`)**
|
|
238
|
+
- clean and reinstall in generated workspace:
|
|
239
|
+
```bash
|
|
240
|
+
rmdir /s /q node_modules
|
|
241
|
+
del package-lock.json
|
|
242
|
+
npm cache verify
|
|
243
|
+
npm install
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
Published files:
|
|
247
|
+
|
|
248
|
+
- `dist/`
|
|
249
|
+
- `README.md`
|
package/dist/index.d.ts
ADDED