# 現有架構下切多個前端 app
## :book: 遇到的問題
開發 AI Embedded 時，遇到 line liff 套件噴錯，影響UI無法嵌入致 iframe 下。
### 原因
Omnisegment bundle 裡面有一堆 ai popup, Embedded 頁面用不到的東西。
## :book: 解法思路
1. 再弄一個 next.js 出來。 （但整個架構複雜&麻煩，又要想 build步驟 和 如何deploy
2. 單點突破，遇到問題一個一個解。 （未來無限量的bug吃到飽
3. 想辦法在現有架構上將前端做切分。
## :book: 現有 Front-End Artitechture
#### :small_blue_diamond: 並非前後端分離
## :book: 會面對什麼問題
不同目的前端頁面混在一起，統一由 site.html serve。
#### :small_blue_diamond: Omnisegment Application (Sass 服務)
#### :small_blue_diamond: AI page（Embedded, Popup）(To C頁面，在獨立的 iFrame環境下執行)
#### :small_blue_diamond: Liff page (To C頁面，在 line browser 環境執行)
#### :small_blue_diamond: 健康報表頁面 (CS 後台)
## :pencil: Webpack Multple Entry
https://webpack.js.org/concepts/entry-points/#multi-page-application
* 模組化開發：可以將不同的模組或頁面獨立開發，每個入口點代表著一個模組或頁面。
* 獨立打包：每個入口點都可以產生獨立的打包輸出，這意味著你可以針對不同的需求進行優化和配置。
* 分割代碼（Code Splitting）：多入口功能也為分割代碼提供了更多彈性。
* 多頁面應用（Multiple Page Application）：更好地管理和維護不同頁面之間的相依關係，同時保持每個頁面的獨立性。
webpack.config.js
```javascript
module.exports = {
entry: {
main: './src/client.js',
aiPage: './ui/pages/ai',
},
...,
}
```
url.py
```python
urlpatterns = [
path("admin/", admin.site.urls),
path("", HomePage.as_view(), {"themePath": "MainRouter"}),
path("accounts/login/", HomePage.as_view(), {"themePath": "MainRouter"}),
re_path(r"^features/", HomePage.as_view(), {"themePath": "MainRouter"}),
...
...
re_path(r"^liff/", HomePage.as_view(), {"themePath": "MainRouter"}),
re_path(r"^ai/", AIPage.as_view(), { "webpackBundleName": "aiPage"}),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
```
frontpage/view.py
```python
class HomePage(TemplateView):
template_name = "site.html"
def get_context_data(self, **kwargs):
import json
context = super().get_context_data(**kwargs)
contextData = context.copy()
del contextData['view']
context['context_data'] = json.dumps(contextData)
return context
class AIPage(TemplateView):
template_name = 'ai.html'
@method_decorator(never_cache)
def dispatch(self, request, *args, **kwargs):
response = super().dispatch(request, *args, **kwargs)
response['Content-Security-Policy'] = "frame-ancestors 'self' *;"
return response
```
ai.html
+
[django-webpack-loader](https://github.com/django-webpack/django-webpack-loader)
```typescript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
{% load render_bundle from webpack_loader %}
{% render_bundle webpackBundleName attrs='defer' %}
<meta name="description" content="AI Page" />
<meta
http-equiv="X-UA-Compatible"
content="IE=edge; IE=11; IE=10; IE=9; IE=8;"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="app"></div>
</body>
</html>
<script src="/static/cdn/moment.min.js"></script>
```
## :pencil: 什麼時候該切多個 entry
依照不同目的想切就可以切，但 Sass 產品和 To C 的頁面得切開。
## :pencil: 結論
1. 在現有架構下，可以有多個 Front-End app，不會造成太高 cost.
2. 未來To C 的頁面就直接切起來，不該與 To B的 OS 混在一起.
3. 找到更好的方法，做對的事情。
Sign in with Wallet
Connect another wallet