create-synapse-mfe 1.0.1 → 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.
Files changed (3) hide show
  1. package/README.md +69 -0
  2. package/bin/index.js +24 -1
  3. package/package.json +1 -1
package/README.md ADDED
@@ -0,0 +1,69 @@
1
+ # create-synapse-mfe 🚀
2
+
3
+ A lightning-fast, zero-dependency CLI scaffolding tool for bootstrapping a modern, scalable **Micro-Frontend (MFE)** architecture using **Vite**, **React**, and **Module Federation**.
4
+
5
+ ## 🌟 Features
6
+
7
+ - **Zero Dependencies**: Built with native Node.js (`child_process`, `fs`) for instant execution.
8
+ - **Vite & Module Federation**: Pre-configured for high-performance React applications.
9
+ - **Enterprise Ready**: Includes a Host (Shell) app, Remote apps, and shared libraries out of the box.
10
+ - **Nx Monorepo Style**: Organized for scalable development.
11
+
12
+ ## 📦 Usage
13
+
14
+ You do not need to install this package globally. Simply run it directly using `npx`:
15
+
16
+ ```bash
17
+ npx create-synapse-mfe@latest
18
+ ```
19
+
20
+ The CLI will interactively ask for your project name (default: `synapse-workspace`).
21
+
22
+ ### Example
23
+
24
+ ```bash
25
+ npx create-synapse-mfe@latest my-awesome-mfe
26
+ ```
27
+
28
+ ## 🛠️ Next Steps After Scaffolding
29
+
30
+ Once your project is generated, follow these simple steps to spin up the entire Micro-Frontend ecosystem:
31
+
32
+ ```bash
33
+ # 1. Navigate into your new project
34
+ cd my-awesome-mfe
35
+
36
+ # 2. Install dependencies (pnpm is highly recommended)
37
+ pnpm install
38
+
39
+ # 3. Start the entire MFE network (Shell + Remotes) in parallel
40
+ pnpm run dev:new
41
+ ```
42
+
43
+ ## 🔐 Default Mock Credentials (Development)
44
+
45
+ Saat `MSW` aktif di mode development, gunakan akun berikut untuk login cepat:
46
+
47
+ - `auth-mfe` (`/auth/login`)
48
+ - `admin@Synapse.com` / `password123`
49
+ - `user@Synapse.com` / `password123`
50
+ - Standalone MFE generated (isolated port, mis. `:4003`)
51
+ - `dev@synapse.local` / `password123`
52
+
53
+ Catatan:
54
+
55
+ - `auth-mfe` menampilkan kredensial mock otomatis di bawah form login (dev + MSW).
56
+ - Dokumentasi detail tersedia di `/docs/api-mocking`, `/docs/api-interceptors`, dan `/docs/security`.
57
+
58
+ ## 🏗️ Architecture Blueprint
59
+
60
+ The generated workspace pulls from a clean-slate boilerplate that includes:
61
+
62
+ - `apps/shell`: The main host application router.
63
+ - `apps/auth-mfe`: A remote micro-frontend handling authentication.
64
+ - `apps/docs-mfe`: A remote documentation micro-frontend.
65
+ - `libs/`: Shared libraries holding UI components, types, and API logic.
66
+
67
+ ## 📄 License
68
+
69
+ MIT
package/bin/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  #!/usr/bin/env node
2
+ /* eslint-disable no-undef */
2
3
 
3
4
  const { execSync } = require('child_process');
4
5
  const fs = require('fs');
@@ -24,8 +25,13 @@ const rl = readline.createInterface({
24
25
  output: process.stdout,
25
26
  });
26
27
 
27
- console.log('\x1b[36m%s\x1b[0m', '🚀 Welcome to create-synapse-mfe CLI!');
28
+ console.log('\x1b[36m%s\x1b[0m', '🚀 Welcome to create-synapse-mfe CLI v1.0.5!');
28
29
  console.log('Scaffolding a Vite-powered Micro-Frontend Architecture...');
30
+ console.log('\x1b[32m✨ What\'s new in v1.0.4:\x1b[0m');
31
+ console.log(' \x1b[34m- Hardened security (removed token from query params & sessionStorage)\x1b[0m');
32
+ console.log(' \x1b[34m- Dynamic Redirect Whitelist matching remotes.json\x1b[0m');
33
+ console.log(' \x1b[34m- Basic Vitest Mock API integrations\x1b[0m');
34
+ console.log(' \x1b[34m- Updated Vite and React Router dependency versions\x1b[0m');
29
35
 
30
36
  const getProjectName = () => {
31
37
  return new Promise((resolve) => {
@@ -62,6 +68,17 @@ const getProjectName = () => {
62
68
  fs.rmSync(gitFolder, { recursive: true, force: true });
63
69
  }
64
70
 
71
+ // Clean up CLI internal tools and NPM workflows from the end-user's boilerplate
72
+ const cliFolder = path.join(projectPath, 'tools', 'create-synapse');
73
+ if (fs.existsSync(cliFolder)) {
74
+ fs.rmSync(cliFolder, { recursive: true, force: true });
75
+ }
76
+
77
+ const npmWorkflow = path.join(projectPath, '.github', 'workflows', 'publish-npm.yml');
78
+ if (fs.existsSync(npmWorkflow)) {
79
+ fs.rmSync(npmWorkflow, { force: true });
80
+ }
81
+
65
82
  console.log(`\x1b[32m🌱 Memulai repositori Git baru...\x1b[0m`);
66
83
  runCommand(`git init`, { cwd: projectPath });
67
84
 
@@ -70,6 +87,12 @@ const getProjectName = () => {
70
87
  console.log(`\x1b[33m cd ${projectName}\x1b[0m`);
71
88
  console.log('\x1b[33m pnpm install\x1b[0m');
72
89
  console.log('\x1b[33m pnpm run dev:new\n\x1b[0m');
90
+
91
+ console.log('\x1b[36m🔐 Mock credentials (development):\x1b[0m');
92
+ console.log(' \x1b[34m- auth-mfe (/auth/login): admin@Synapse.com / password123\x1b[0m');
93
+ console.log(' \x1b[34m- auth-mfe (/auth/login): user@Synapse.com / password123\x1b[0m');
94
+ console.log(' \x1b[34m- standalone MFE (isolated): dev@synapse.local / password123\x1b[0m');
95
+ console.log(' \x1b[34m- docs: /docs/api-mocking, /docs/api-interceptors, /docs/security\x1b[0m\n');
73
96
 
74
97
  console.log('\x1b[35mSelamat Mengoding Micro-Frontend! ⚛️\x1b[0m\n');
75
98
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-synapse-mfe",
3
- "version": "1.0.1",
3
+ "version": "1.0.5",
4
4
  "description": "Scaffolding tool to create a new Synapse Micro-Frontend workspace",
5
5
  "main": "bin/index.js",
6
6
  "bin": {