create-synapse-mfe 1.0.11 โ 1.1.0
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 +7 -7
- package/bin/index.js +30 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
# create-synapse-mfe
|
|
1
|
+
# create-synapse-mfe
|
|
2
2
|
|
|
3
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
4
|
|
|
5
|
-
##
|
|
5
|
+
## Features
|
|
6
6
|
|
|
7
7
|
- **Zero Dependencies**: Built with native Node.js (`child_process`, `fs`) for instant execution.
|
|
8
8
|
- **Vite & Module Federation**: Pre-configured for high-performance React applications.
|
|
9
9
|
- **Enterprise Ready**: Includes a Host (Shell) app, Remote apps, and shared libraries out of the box.
|
|
10
10
|
- **Nx Monorepo Style**: Organized for scalable development.
|
|
11
11
|
|
|
12
|
-
##
|
|
12
|
+
## Usage
|
|
13
13
|
|
|
14
14
|
You do not need to install this package globally. Simply run it directly using `npx`:
|
|
15
15
|
|
|
@@ -25,7 +25,7 @@ The CLI will interactively ask for your project name (default: `synapse-workspac
|
|
|
25
25
|
npx create-synapse-mfe@latest my-awesome-mfe
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
-
##
|
|
28
|
+
## Next Steps After Scaffolding
|
|
29
29
|
|
|
30
30
|
Once your project is generated, follow these simple steps to spin up the entire Micro-Frontend ecosystem:
|
|
31
31
|
|
|
@@ -40,7 +40,7 @@ pnpm install
|
|
|
40
40
|
pnpm run dev:new
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
-
##
|
|
43
|
+
## Default Mock Credentials (Development)
|
|
44
44
|
|
|
45
45
|
Saat `MSW` aktif di mode development, gunakan akun berikut untuk login cepat:
|
|
46
46
|
|
|
@@ -55,7 +55,7 @@ Catatan:
|
|
|
55
55
|
- `auth-mfe` menampilkan kredensial mock otomatis di bawah form login (dev + MSW).
|
|
56
56
|
- Dokumentasi detail tersedia di `/docs/api-mocking`, `/docs/api-interceptors`, dan `/docs/security`.
|
|
57
57
|
|
|
58
|
-
##
|
|
58
|
+
## Architecture Blueprint
|
|
59
59
|
|
|
60
60
|
The generated workspace pulls from a clean-slate boilerplate that includes:
|
|
61
61
|
|
|
@@ -64,6 +64,6 @@ The generated workspace pulls from a clean-slate boilerplate that includes:
|
|
|
64
64
|
- `apps/docs-mfe`: A remote documentation micro-frontend.
|
|
65
65
|
- `libs/`: Shared libraries holding UI components, types, and API logic.
|
|
66
66
|
|
|
67
|
-
##
|
|
67
|
+
## License
|
|
68
68
|
|
|
69
69
|
MIT
|
package/bin/index.js
CHANGED
|
@@ -25,9 +25,9 @@ const rl = readline.createInterface({
|
|
|
25
25
|
output: process.stdout,
|
|
26
26
|
});
|
|
27
27
|
|
|
28
|
-
console.log('\x1b[36m%s\x1b[0m', '
|
|
28
|
+
console.log('\x1b[36m%s\x1b[0m', 'Welcome to create-synapse-mfe CLI v1.0.5!');
|
|
29
29
|
console.log('Scaffolding a Vite-powered Micro-Frontend Architecture...');
|
|
30
|
-
console.log("\x1b[
|
|
30
|
+
console.log("\x1b[32mWhat's new in v1.0.4:\x1b[0m");
|
|
31
31
|
console.log(
|
|
32
32
|
' \x1b[34m- Hardened security (removed token from query params & sessionStorage)\x1b[0m'
|
|
33
33
|
);
|
|
@@ -50,20 +50,35 @@ const getProjectName = () => {
|
|
|
50
50
|
});
|
|
51
51
|
};
|
|
52
52
|
|
|
53
|
+
const getScopeName = () => {
|
|
54
|
+
return new Promise((resolve) => {
|
|
55
|
+
if (process.argv[3]) {
|
|
56
|
+
resolve(process.argv[3]);
|
|
57
|
+
} else {
|
|
58
|
+
rl.question('\n\x1b[33m? Nama NPM scope organisasi Anda:\x1b[0m (@synapse) ', (answer) => {
|
|
59
|
+
let scope = answer.trim() || '@synapse';
|
|
60
|
+
if (!scope.startsWith('@')) scope = '@' + scope;
|
|
61
|
+
resolve(scope);
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
};
|
|
66
|
+
|
|
53
67
|
(async () => {
|
|
54
68
|
const projectName = await getProjectName();
|
|
69
|
+
const scopeName = await getScopeName();
|
|
55
70
|
const currentDir = process.cwd();
|
|
56
71
|
const projectPath = path.join(currentDir, projectName);
|
|
57
72
|
|
|
58
73
|
if (fs.existsSync(projectPath)) {
|
|
59
74
|
console.error(
|
|
60
|
-
`\n\x1b[
|
|
75
|
+
`\n\x1b[31mError: Folder "${projectName}" sudah ada! Harap pilih nama lain.\x1b[0m`
|
|
61
76
|
);
|
|
62
77
|
process.exit(1);
|
|
63
78
|
}
|
|
64
79
|
|
|
65
80
|
console.log(
|
|
66
|
-
`\n\x1b[
|
|
81
|
+
`\n\x1b[32mMengkloning blueprint MFE ke dalam \x1b[1m${projectName}\x1b[0m...\x1b[0m`
|
|
67
82
|
);
|
|
68
83
|
|
|
69
84
|
const cloneCmd = `git clone --depth 1 ${GIT_REPO} "${projectName}"`;
|
|
@@ -71,7 +86,7 @@ const getProjectName = () => {
|
|
|
71
86
|
process.exit(1);
|
|
72
87
|
}
|
|
73
88
|
|
|
74
|
-
console.log(`\n\x1b[
|
|
89
|
+
console.log(`\n\x1b[32mMembersihkan jejak git lama (Re-initializing)...\x1b[0m`);
|
|
75
90
|
const gitFolder = path.join(projectPath, '.git');
|
|
76
91
|
if (fs.existsSync(gitFolder)) {
|
|
77
92
|
fs.rmSync(gitFolder, { recursive: true, force: true });
|
|
@@ -88,16 +103,22 @@ const getProjectName = () => {
|
|
|
88
103
|
fs.rmSync(npmWorkflow, { force: true });
|
|
89
104
|
}
|
|
90
105
|
|
|
91
|
-
console.log(`\x1b[
|
|
106
|
+
console.log(`\x1b[32mMemulai repositori Git baru...\x1b[0m`);
|
|
92
107
|
runCommand(`git init`, { cwd: projectPath });
|
|
93
108
|
|
|
94
|
-
|
|
109
|
+
if (scopeName !== '@synapse') {
|
|
110
|
+
console.log(`\n\x1b[32mMengganti NPM scope menjadi \x1b[1m${scopeName}\x1b[0m...\x1b[0m`);
|
|
111
|
+
// Memanggil script rebranding otomatis yang sudah ada dalam template
|
|
112
|
+
runCommand(`node scripts/setup-scope.js ${scopeName}`, { cwd: projectPath });
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
console.log(`\n\x1b[36mBerhasil! Proyek "\x1b[1m${projectName}\x1b[0m\x1b[36m" telah siap.\n`);
|
|
95
116
|
console.log('Langkah selanjutnya yang harus Anda lakukan:');
|
|
96
117
|
console.log(`\x1b[33m cd ${projectName}\x1b[0m`);
|
|
97
118
|
console.log('\x1b[33m pnpm install\x1b[0m');
|
|
98
119
|
console.log('\x1b[33m pnpm run dev:new\n\x1b[0m');
|
|
99
120
|
|
|
100
|
-
console.log('\x1b[
|
|
121
|
+
console.log('\x1b[36mMock credentials (development):\x1b[0m');
|
|
101
122
|
console.log(' \x1b[34m- auth-mfe (/auth/login): admin@Synapse.com / password123\x1b[0m');
|
|
102
123
|
console.log(' \x1b[34m- auth-mfe (/auth/login): user@Synapse.com / password123\x1b[0m');
|
|
103
124
|
console.log(' \x1b[34m- standalone MFE (isolated): dev@synapse.local / password123\x1b[0m');
|
|
@@ -105,7 +126,7 @@ const getProjectName = () => {
|
|
|
105
126
|
' \x1b[34m- docs: /docs/api-mocking, /docs/api-interceptors, /docs/security\x1b[0m\n'
|
|
106
127
|
);
|
|
107
128
|
|
|
108
|
-
console.log('\x1b[35mSelamat Mengoding Micro-Frontend
|
|
129
|
+
console.log('\x1b[35mSelamat Mengoding Micro-Frontend!\x1b[0m\n');
|
|
109
130
|
|
|
110
131
|
rl.close();
|
|
111
132
|
process.exit(0);
|