feat: support pwa, add bundle-analyzer

.env.example

@@ -0,0 +1,10 @@
+#############################################
+############ OIDC Server Configs ############
+#############################################
+
+# oidc server url, e.g. https://kubeagi.com/oidc
+OIDC_SERVER_URL=[oidc_server_url]
+
+# oidc server client id && secret
+CLIENT_ID=client_id
+CLIENT_SECRET=client_secret

.gitignore

@@ -50,9 +50,12 @@ test-output
 
 # dev
 .env.development
+.env.production
 
 # misc
 *.pem
+/cert/*.crt
+/cert/*.key
 
 # local env files
 .env*.local
@@ -66,3 +69,5 @@ next-env.d.ts
 
 # misc
 # add other ignore file below
+public/*.js
+public/*.js.map

README.md

@@ -26,13 +26,41 @@ bun dev
 
 Open <http://localhost:3000> with your browser to see the result.
 
-## Development OIDC 配置
+## .env 配置 (示例: ./.env.example)
 
-根目录新建 `.env.development`
+### 开发模式
 
 ```
-OIDC_SERVER_URL=[OIDC_SERVER_URL]
-CLIENT_ID=[CLIENT_ID]
-CLIENT_SECRET=[CLIENT_SECRET]
-CLIENT_ORIGIN=[CLIENT_ORIGIN]
+cp .env.example .env.development
+```
+
+复制并重命名为 .env.development, 修改 oidc(必须) 等参数
+
+### 生产模式
+
+```
+cp .env.example .env.production
+```
+
+复制并重命名为 .env.production, 修改 oidc(必须) 等参数
+
+## 本地运行 pwa (添加到桌面)
+
+- 构建
+
+```
+npm run build
+```
+
+- 安装 [mkcert](https://github.com/FiloSottile/mkcert) 并生成证书
+
+```
+mkcert -install
+mkcert localhost
+```
+
+- 运行带自签名证书的生产模式
+
+```
+npm run start:https
 ```

next.config.mjs

@@ -1,8 +1,20 @@
+import nextPWA from '@ducanh2912/next-pwa';
+import analyzer from '@next/bundle-analyzer';
 
-import config from './src/config/oidc.mjs';
-const oidcUrl = config.server.url;
 const isProd = process.env.NODE_ENV === 'production';
 
+const withBundleAnalyzer = analyzer({
+  enabled: process.env.ANALYZE === 'true',
+});
+
+const withPWA = nextPWA({
+  dest: 'public',
+  register: true,
+  workboxOptions: {
+    skipWaiting: true,
+  },
+});
+
 const nextConfig = {
   compress: isProd,
   typescript: {
@@ -26,15 +38,6 @@ const nextConfig = {
   },
   reactStrictMode: true,
   transpilePackages: ['antd', '@ant-design', 'antd-style', '@lobehub/ui', 'antd-mobile'],
-  // async rewrites() {
-  //   return [
-  //     {
-  //       source: '/oidc/token',
-  //       destination: `${oidcUrl}/oidc/token`,
-  //       secure: false,
-  //     },
-  //   ]
-  // },
   webpack: (config) => {
     config.experiments = {
       asyncWebAssembly: true,
@@ -59,4 +62,4 @@ const nextConfig = {
   },
 }
 
-export default nextConfig
+export default isProd ? withBundleAnalyzer(withPWA(nextConfig)) : nextConfig;

package.json

@@ -3,8 +3,9 @@
   "version": "0.1.0",
   "scripts": {
     "build": "next build",
+    "build:analyze": "cross-env ANALYZE=true next build",
     "dev": "cross-env NODE_TLS_REJECT_UNAUTHORIZED=0 next dev",
-    "dev-https": "cross-env NODE_TLS_REJECT_UNAUTHORIZED=0 next dev --experimental-https --experimental-https-key ./cert/key.pem --experimental-https-cert ./cert/cert.pem",
+    "dev:https": "cross-env NODE_TLS_REJECT_UNAUTHORIZED=0 next dev --experimental-https --experimental-https-key ./cert/key.pem --experimental-https-cert ./cert/cert.pem",
     "lint": "npm run lint:es && npm run lint:style",
     "lint-fix": "npm run lint-fix:es && npm run lint-fix:style",
     "lint-fix:es": "eslint --ext .jsx,.js,.tsx,.ts src --fix",
@@ -13,7 +14,8 @@
     "lint:style": "stylelint \"{src,tests}/**/*.{css,less,js,jsx,ts,tsx}\"",
     "prepare": "husky install",
     "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
-    "start": "next start"
+    "start": "next start",
+    "start:https": "cross-env NODE_ENV=production node server.mjs"
   },
   "lint-staged": {
     "*.md": [
@@ -60,6 +62,8 @@
     "ua-parser-js": "2.0.0-alpha.2"
   },
   "devDependencies": {
+    "@ducanh2912/next-pwa": "^10.2.2",
+    "@next/bundle-analyzer": "^14.1.0",
     "@types/mdx": "^2.0.10",
     "@types/node": "^20",
     "@types/query-string": "^6.3.0",
@@ -77,7 +81,8 @@
     "remark": "^15.0.1",
     "remark-cli": "^12.0.0",
     "stylelint": "^15",
-    "typescript": "^5"
+    "typescript": "^5",
+    "webpack": "^5.89.0"
   },
   "packageManager": "[email protected]",
   "engines": {