Eksperimen awal menggunakan microfrontend dengan kondisi aplikasi versi jadul (Angular 7.x.x)
Untuk aplikasinya gunakan angular versi 7.x.x, dengan single-spa-angular v.3 beta.
Untuk Core antar aplikasinya gunakan single-spa versi 5.x.x, dan dengan NodeJS versi 16, karena command webpack banyak berjalan di node versi 12 keatas.
Untuk bisa switch Node dengan mudah bisa menggunakan nvm package, nonton tutorialnya disini. Karena angularnya versi 7 yang kompatibel dengan NodeJS versi 10 dan single-spa 5 yang kompatibel dengan Node versi 12 keatas, sehingga cukup berguna ketika bisa switch versi Node dengan cepat.
Kelengkapan library bisa dicek di masing-masing aplikasinya. jika ada error module not found, bisa install saja masing-masing librarynya.
Saya sendiri menggunakan Node v.10 (untuk create angular app) dan Node v.16 (untuk compile webpack / single-spa pada host app). Jika ingin belajar membuat single-spa dari awal, bisa menggunakan built-in create-single-spa
dengan system Node v.16. Cara installnya seperti dibawah ini
npm install -g create-single-spa
Selain itu dibutuhkan juga webpack-cli
pada environment global. Install terlebih dahulu webpack-cli
via Node v.16 dengan
npm i -g webpack-cli
-
Install dulu di masing-masing aplikasinya, termasuk di hostnya.
npm install
atau lebih mudah menggunakan command di root folder ini
(mfe-angular)
dengan:npm run install:all
kemudian tunggu beberapa saat agar library-library terinstall dengan sempurna.
-
Compile terlebih dahulu part-part aplikasinya
npm run serve:nav
npm run serve:home
npm run serve:my-app
npm run serve:child1
pastikan masing-masing command tersebut dijalankan di terminal yang berbeda-beda
-
Compile host microfrontendnya
npm run start
Tunggu semua aplikasi tercompile dengan sempurna, kemudian buka
localhost:9000
-
Switch terlebih dahulu ke Node versi 10 menggunakan nvm use
-
buat aplikasi Angular 7 dengan command berikut:
ng new [nama-aplikasi] --routing --defaults --prefix [nama-aplikasi]
-
Change directory ke
[nama-aplikasi]
-
kemudian tambahkan library single-spa-angular v.3 dengan command berikut
ng add single-spa-angular@beta
-
Buka
app.module.ts
, kemudian ubah sesuai dengan iniimport { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { EmptyRouteComponent } from './empty-route/empty-route.component'; @NgModule({ declarations: [ AppComponent, EmptyRouteComponent // <-- tambahkan ini ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
-
Buka
app-routing.module.ts
, ubah bagianroutes
danproviders
seperti di bawah iniimport { APP_BASE_HREF } from '@angular/common'; import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { EmptyRouteComponent } from './empty-route/empty-route.component'; const routes: Routes = [{ path: '**', component: EmptyRouteComponent }]; @NgModule({ imports: [RouterModule.forRoot(routes)], providers: [{provide: APP_BASE_HREF, useValue: '/'}], exports: [RouterModule] }) export class AppRoutingModule { }
-
Buka
package.json
. kemudian pada bagianscript
untukserve:single-spa
danbuild:single-spa
diubah portnya dari4200
menjadi port yang belum digunakan (dalam hal ini4200
,4201
,4202
sudah digunakan oleh aplikasi existing) -
Kembali ke root folder. pada
package.json
buatlah script baru untuk install dan serve aplikasi yang baru dibuat.Misal aplikasi yang baru dibuat ada di folder
child03
maka script barunya adalah"serve:child03": "cd ./child03 && npm run serve:single-spa"
"install:child03": "cd ./child03 && npm i"
-
Jalankan aplikasi
child03
dengannpm run serve:child03
-
(versi sebelumnya) Buka folder simple host
simple-host
dan masuk ke fileindex.ejs
. Pada bagianimports
yang ada di dalam tag<script type="systemjs-importmap">
tambahkan aplikasi baru yang telah dibuat dan dijalankan tadi."child03":"//localhost:4203/main.js"
Port
4203
ini disesuaikan dengan setting yang dilakukan dipackage.json
di AngularApp pada step 7.(versi terbaru - gunakan step ini) buka folder
public/assets
, kemudian buka fileimport-map-local.json
, tambahkan aplikasi yang telah dibuat dan dijalankan tadi."child03":"//localhost:4203/main.js"
Port
4203
ini disesuaikan dengan setting yang dilakukan dipackage.json
di AngularApp pada step 7. -
Selanjutnya buka file
microfrontend-layout
. pada file main tambahkan aplikasi tadi dengan<route path="child03"> <application name="child03"></application> </route>
untuk
route path="child03"
ini ketika menjalankan host aplikasinya akan terbuka pada pathlocalhost:9000/child03
. Agar bisa muncul dilocalhost:9000/
, maka dapat menggunakan pathroute default
. -
kembali ke root folder. Kembalilah ke Node versi 16 dan jalankan
npm run start
. Aplikasi baru tadi dapat di jalankan di microfrontend single-spa
Demi keperluan build, repo ini dipecah menjadi beberapa repo yaitu:
- mfea7v2-root-app sebagai host / root configuration
- mfea7v2-microapp-nav sebagai microapp navigation
- mfea7v2-microapp-home sebagai microapp home app
- mfea7v2-microapp-myapp sebagai microapp my-app
- mfea7v2-microapp-child1 sebagai microapp child1
Juga hasil build yang berhasil bisa dilihat di sini -> Demo
Cara buildnya sebetulnya cukup mudah, namun sedikit tricky terutama di microappnya karena ada kondisi bahwa app membutuhkan module-module atau script yg hanya ada di dalam microapp.
Untuk masing-masing microappnya dibuild dengan cara di bawah ini
> node ./node_modules/@angular/cli/bin/ng build --prod --output-hashing none"
script diatas digunakan jika buildnya di local, untuk build di hosting / container gunakan script ini
> node ./node_modules/@angular/cli/bin/ng build --prod --output-hashing none --deploy-url "[link-url-microapp]"
Untuk root config dibuild dengan cara di bawah ini
npm run build:webpack
- Build Configuration
- Sharing App (apakah component dan service yang ada di aplikasi yang berbeda bisa digunakan juga?)
- Build optimization (apakah bisa dioptimize lagi?)
- handling CORS (masih problem)
- Custom URL yg diencrypt (masih problem juga)