*資料夾結構*
― [project name]
└ frontend
└ web
└ mobile(pwa)
└ backend
會這樣命名跟(推1)有關。
*技術選擇*
Angular + ngrx
Apollo
Nest.js + GraphQL
Rxjs
MongoDB
最放會放到 Google App Engine
原本想過用一個 Angular專案,
Web, Mobile用 Module 並 rouer + lazy loading
這樣能最大化共用 node_modules, ngrx ...
但考慮到案子的發展與維護,
第一次嘗試以 兩個 Angular專案包一個Nest,
踩了坑來寫點紀錄。
如果 Angular與 Nest 是一對一的情況:
...
const app = await NestFactory.create<NestExpressApplication>(AppModule);
app.useStaticAssets(join(__dirname, '../../frontend/dist/frontend'));
...
$ nest g mi frontend
...
use(req: any, res: any, next: () => void) {
res.sendFile(path.resolve('../frontend/dist/frontend/index.html'))
}
...
...
export class AppModule implements NestModule {
configure(consumer: MiddlewareConsumer) {
consumer
.apply(FrontendMiddleware)
.forRoutes(
{
path: '/**', // For all routes
method: RequestMethod.ALL, // For all methods
},
);
}
}
// terminal for Nest
$ cd backend
$ npm run start:dev
// 新增 Terminal window
// terminal for Angular
$ cd frontend
$ ng build --watch
如果 Angular與 Nest 是多對一的情況:
...
const app = await NestFactory.create<NestExpressApplication>(AppModule);
app.useStaticAssets(join(__dirname, '../../frontend/web/dist/web'),{prefix:'/web'});
app.useStaticAssets(join(__dirname, '../../frontend/mobile/dist/mobile'),{prefix:'/mobile'});
...
(同上):
到 ./backend/src/frontend.middleware.ts,
根據 request的 url切換載入的專案切入點。
...
use(req: any, res: any, next: () => void) {
if (req['url'].includes('web'))
res.sendFile(path.resolve('../frontend/web/dist/web/index.html'))
else if (req['url'].includes('mobile'))
res.sendFile(path.resolve('../frontend/mobile/dist/mobile/index.html'))
}
...
5. 這步很重要!試了很久!
到 ./frontend/web/src/index.html,
及 ./frontend/mobile/src/index.html,
...
// 找到base tag
// 把"絕對路徑"改成"相對路徑"
// 把 href="/" 改成 href="./" 如下:
<base href="./">
...
這時要注意
在 Angular routes使用上有幾個要注意的點,
假設有個網址:http://localhost:3000/order/3
那在 app-routing.module.ts中原本應該如下:
...
const routes: Routes = [
{ path: 'order/:id', component: OrderComponent },
];
...
因為 index.html被改成相對路徑加上 nest用的 prefix,
所以我們把上面的程式碼稍微改一下,如下:
...
const routes: Routes = [
{ path: ':id', component: OrderComponent },
];
...
你可以這樣理解,
...
const routes: Routes = [
{ path: '', component: AppComponent, childern:[
{ path: ':id', component: OrderComponent },
]},
];
...
// terminal for Nest
$ cd backend
$ npm run start:dev
// 新增 Terminal window
// 分割 Terminal window
// terminal for Angular
$ cd frontend/web
$ ng build --watch
$ cd frontend/mobile
$ ng build --watch
(2019/09/24)
專案剛開始,
日後踩坑了還記得的話再回來補,
有任何問題或是說錯的地方,
歡迎大神們多多指教。
特別感謝:
CK大大: https://www.facebook.com/CKNotepad/
(提供思路解決多 client對一 server )
VS Code插件推薦:
(1) Material Icon Theme:https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
參考資料:
(1) nest cli: https://docs.nestjs.com/cli/usages
(2) nest middleware: https://docs.nestjs.com/middleware
(3) nest MVC: https://docs.nestjs.com/techniques/mvc
(4) mutiple static with Nest: https://stackoverflow.com/questions/54475802/setup-two-different-static-folders-with-nest
(5) redirect Angular routes in Nest: https://stackoverflow.com/questions/54838260/how-to-redirect-all-routes-to-index-html-angular-in-nest-js/54840961#54840961