feat: ROUTER_BASENAME compatible sub dir deploy on nginx

SolidZORO · Jun 25, 2020 · b9c89c6 · b9c89c6
1 parent f3da7d9
commit b9c89c6
Show file tree

Hide file tree

Showing 13 changed files with 69 additions and 29 deletions.
diff --git a/packages/leaa-dashboard/_env.js.example b/packages/leaa-dashboard/_env.js.example
@@ -6,6 +6,9 @@ const __ENV_DATA__ = {
   API_URL: 'http://localhost:5000',
   API_VERSION: 'v1',
 
+  // if using nginx to deploy to a sub dir, can modify, e.g. `/dash`
+  ROUTER_BASENAME: '/',
+
   // phone | email (Primary Display at UI)
   PRIMARY_ACCOUNT_TYPE: 'email',
 

diff --git a/packages/leaa-dashboard/package.json b/packages/leaa-dashboard/package.json
@@ -5,6 +5,7 @@
   "private": false,
   "sideEffect": false,
   "license": "BSD-3-Clause-Clear",
+  "homepage": ".",
   "engines": {
     "node": ">=12",
     "npm": ">=6.4.0",

diff --git a/packages/leaa-dashboard/src/configs/build.config.ts b/packages/leaa-dashboard/src/configs/build.config.ts
@@ -3,4 +3,4 @@ import { IBuild } from '@leaa/dashboard/src/interfaces';
 const buildDataEl = document.getElementById('__BUILD_DATA__');
 
 // ./packages/leaa-dashboard/tools/webpack/_webpack_plugin.js - outputHtmlOption - build
-export const buildConfig: IBuild = buildDataEl ? JSON.parse(atob(buildDataEl.innerHTML)) : {};
+export const buildConfig: IBuild = buildDataEl ? JSON.parse(buildDataEl.innerHTML) : {};
diff --git a/packages/leaa-dashboard/src/configs/env.config.ts b/packages/leaa-dashboard/src/configs/env.config.ts
@@ -2,4 +2,29 @@ import { IDotEnv } from '@leaa/dashboard/src/interfaces';
 
 // @ts-ignore
 // eslint-disable-next-line no-underscore-dangle
-export const envConfig: IDotEnv = window.__ENV_DATA__;
+const wENV: IDotEnv = window.__ENV_DATA__;
+
+const dotenv: IDotEnv = {
+  ...{
+    __ENV__: 'dev',
+    //
+    SITE_NAME: 'Leaa',
+    API_URL: 'PLS_SET_API_URL',
+    API_VERSION: 'v1',
+    //
+    ROUTER_BASENAME: '/',
+    PRIMARY_ACCOUNT_TYPE: 'email',
+    LOGO_BLACK_FILENAME: 'default-logo-black.svg',
+    LOGO_WHITE_FILENAME: 'default-logo-white.svg',
+    ANALYTICS_CODE: '',
+    //
+    DEMO_MODE: false,
+    DEBUG_MODE: false,
+    SERVER_PROTOCOL: 'http',
+    SERVER_PORT: 7007,
+    SERVER_HOST: 'localhost',
+  },
+  ...wENV,
+};
+
+export const envConfig: IDotEnv = dotenv;
diff --git a/packages/leaa-dashboard/src/interfaces/config.interface.ts b/packages/leaa-dashboard/src/interfaces/config.interface.ts
@@ -1,16 +1,21 @@
 export interface IDotEnv {
-  DEMO_MODE: boolean;
-  DEBUG_MODE: boolean;
+  __ENV__: 'prod' | 'dev';
+  //
   SITE_NAME: string;
+  API_URL: string;
+  API_VERSION: string;
+  //
+  ROUTER_BASENAME: string;
   PRIMARY_ACCOUNT_TYPE: 'email' | 'phone';
   LOGO_BLACK_FILENAME: string;
   LOGO_WHITE_FILENAME: string;
+  ANALYTICS_CODE: string;
+  //
+  DEMO_MODE: boolean;
+  DEBUG_MODE: boolean;
   SERVER_PROTOCOL: 'http' | 'https';
   SERVER_PORT: number;
   SERVER_HOST: string;
-  API_URL: string;
-  API_VERSION: string;
-  ANALYTICS_CODE: string;
 }
 
 export interface ISetting {

diff --git a/packages/leaa-dashboard/src/layouts/MasterLayout/_components/LayoutSidebar/LayoutSidebar.tsx b/packages/leaa-dashboard/src/layouts/MasterLayout/_components/LayoutSidebar/LayoutSidebar.tsx
@@ -22,8 +22,13 @@ interface IProps extends RouteComponentProps {
   collapsedHash?: number;
 }
 
-const LOGO_WHITE = `/assets/images/logo/${envConfig.LOGO_WHITE_FILENAME || 'default-logo-white.svg'}`;
-const LOGO_BLACK = `/assets/images/logo/${envConfig.LOGO_BLACK_FILENAME || 'default-logo-black.svg'}`;
+const LOGO_WHITE = `${envConfig.ROUTER_BASENAME}assets/images/logo/${
+  envConfig.LOGO_WHITE_FILENAME || 'default-logo-white.svg'
+}`;
+
+const LOGO_BLACK = `${envConfig.ROUTER_BASENAME}assets/images/logo/${
+  envConfig.LOGO_BLACK_FILENAME || 'default-logo-black.svg'
+}`;
 
 export const LayoutSidebar = (props: IProps) => {
   const isMobile = useMedia(IS_MOBILE_SCREEN);

diff --git a/packages/leaa-dashboard/src/pages/Auth/Login/Login.tsx b/packages/leaa-dashboard/src/pages/Auth/Login/Login.tsx
@@ -23,7 +23,9 @@ import { LoginForm } from './_components/LoginForm/LoginForm';
 
 import style from './style.module.less';
 
-const LOGO_BLACK = `/assets/images/logo/${envConfig.LOGO_BLACK_FILENAME || 'default-logo-black.svg'}`;
+const LOGO_BLACK = `${envConfig.ROUTER_BASENAME}assets/images/logo/${
+  envConfig.LOGO_BLACK_FILENAME || 'default-logo-black.svg'
+}`;
 
 const DEMO_ACCOUNT = envConfig.DEBUG_MODE
   ? { account: 'admin@local.com', password: 'h8Hx9qvPKoHMLQgj' }

diff --git a/packages/leaa-dashboard/src/pages/Category/CategoryList/CategoryList.tsx b/packages/leaa-dashboard/src/pages/Category/CategoryList/CategoryList.tsx
@@ -15,6 +15,7 @@ import { HtmlMeta, PageCard, TableColumnDeleteButton } from '@leaa/dashboard/src
 
 import 'react-sortable-tree/style.css';
 import style from './style.module.less';
+import { CREATE_BUTTON_ICON } from '@leaa/dashboard/src/constants';
 
 const API_PATH = 'categories';
 
@@ -74,7 +75,7 @@ export default (props: IPage) => {
                 className={style['tree-item-delete-button']}
               />,
               <Button key={`${node.id}`} title={_.toString(node)} size="small">
-                <Link to={`/categories/create?parent_id=${node.id}`}>CREATE_BUTTON_ICON</Link>
+                <Link to={`/categories/create?parent_id=${node.id}`}>{CREATE_BUTTON_ICON}</Link>
               </Button>,
               <span key={`${node.id}`}>&nbsp;</span>,
             ],

diff --git a/packages/leaa-dashboard/src/pages/Setting/SettingList/SettingList.tsx b/packages/leaa-dashboard/src/pages/Setting/SettingList/SettingList.tsx
@@ -194,7 +194,7 @@ export default (props: IPage) => {
 
       <SettingListForm ref={settingsFormRef} items={list} onClickLabelEditCallback={onOpenUpdateSetting} />
 
-      <SubmitBar>
+      <SubmitBar full>
         <Button
           type="primary"
           size="large"
@@ -211,7 +211,6 @@ export default (props: IPage) => {
         title={`${t(`_lang:${modalType}`)}${modalData?.name ? `  ${modalData?.name}` : ''}`}
         // visible={modalVisible}
         visible={modalVisible}
-        getContainer={false}
         onOk={() => (modalType === 'update' ? onUpdateSetting(modalData?.id) : onCreateSetting(modalData?.id))}
         // confirmLoading={updateSettingMutation.loading}
         className={style['setting-modal']}

diff --git a/packages/leaa-dashboard/src/pages/_document.ejs b/packages/leaa-dashboard/src/pages/_document.ejs
@@ -17,7 +17,7 @@
   <script src="<%= htmlWebpackPlugin.options.__ENV_FILE__ %>?<%= htmlWebpackPlugin.options.version_hash %>"></script>
 </head>
 <body>
-  <noscript>Out-of-the-box mid-stage front/design solution!</noscript>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="app"></div>
   <script id="__BUILD_DATA__" type="application/json"><%= htmlWebpackPlugin.options.__BUILD_DATA__ %></script>
   <%= htmlWebpackPlugin.options.__ANALYTICS_CODE__ %>

diff --git a/packages/leaa-dashboard/src/routes/index.tsx b/packages/leaa-dashboard/src/routes/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
 import { MasterLayout } from '@leaa/dashboard/src/layouts';
+import { envConfig } from '@leaa/dashboard/src/configs';
 import Error404 from '@leaa/dashboard/src/pages/Error/404/404';
 
 import { testRoute } from './test.route';
@@ -11,7 +12,7 @@ export * from './master.route';
 export * from './test.route';
 
 export const Routes = () => (
-  <Router>
+  <Router basename={envConfig.ROUTER_BASENAME}>
     <Switch>
       {authRoute}
       {testRoute}

diff --git a/packages/leaa-dashboard/tools/webpack/_const.js b/packages/leaa-dashboard/tools/webpack/_const.js
@@ -82,8 +82,8 @@ WPCONST.PAGES_DIR = path.join(WPCONST.SRC_DIR, 'pages');
 // BUILD PATH
 WPCONST.BUILD_DIR_NAME = WPCONST.__DEV__ ? '.cache' : '_dist';
 
-// e.g. xxx.com/statics/
-WPCONST.OUTPUT_PUBLIC_PATH = '/statics/';
+// envConfig.ROUTER_BASENAME || '/'
+WPCONST.OUTPUT_PUBLIC_PATH = `${WPCONST.ROUTER_BASENAME}`;
 
 // e.g. /_dist
 WPCONST.BUILD_DIR = path.join(WPCONST.ROOT_DIR, WPCONST.BUILD_DIR_NAME);

diff --git a/packages/leaa-dashboard/tools/webpack/_plugins.js b/packages/leaa-dashboard/tools/webpack/_plugins.js
@@ -26,16 +26,14 @@ class ShowEnvInfoWebpackPlugin {
 
 // HtmlWebpackPlugin
 const htmlWebpackPluginOption = {
-  __ENV_FILE__: `/${WPCONST.ENV_FILE_NAME}`,
-  __BUILD_DATA__: Buffer.from(
-    JSON.stringify({
-      VERSION: `v${process.env.npm_package_version}`,
-      VERSION_SLUG: `v${process.env.npm_package_version}-${getGitVersion}`,
-      MODE: WPCONST.MODE,
-      BUILDTIME: moment().format('YYYYMMDD-HHmmss'),
-      GIT_VERSION: getGitVersion,
-    }),
-  ).toString('base64'),
+  __ENV_FILE__: `${WPCONST.ROUTER_BASENAME}${WPCONST.ENV_FILE_NAME}`,
+  __BUILD_DATA__: JSON.stringify({
+    VERSION: `v${process.env.npm_package_version}`,
+    VERSION_SLUG: `v${process.env.npm_package_version}-${getGitVersion}`,
+    MODE: WPCONST.MODE,
+    BUILDTIME: moment().format('YYYYMMDD-HHmmss'),
+    GIT_VERSION: getGitVersion,
+  }),
   title: `${WPCONST.SITE_NAME || '-'}`,
   manifest: `${WPCONST.OUTPUT_PUBLIC_PATH}manifest.json`,
   filename: `${WPCONST.BUILD_DIR}/index.html`,
@@ -97,15 +95,15 @@ const plugins = [
     patterns: [
       {
         from: `${WPCONST.PUBLIC_DIR}/assets/**/*`,
-        to: WPCONST.BUILD_DIR,
+        to: `${WPCONST.BUILD_DIR}${WPCONST.OUTPUT_PUBLIC_PATH}`,
         transformPath(targetPath) {
           return `${targetPath}`.replace('public/', '');
         },
         cacheTransform: true,
       },
       {
         from: WPCONST.ENV_FILE_PATH,
-        to: WPCONST.BUILD_DIR,
+        to: `${WPCONST.BUILD_DIR}${WPCONST.OUTPUT_PUBLIC_PATH}`,
         transformPath(targetPath) {
           return `${targetPath}`.replace('public/', '');
         },