refactor: Improving public path support

scottsut · Aug 15, 2023 · 7ae0fe8 · 7ae0fe8
1 parent 61eb69e
commit 7ae0fe8
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 17 deletions.
diff --git a/frontend/craco.config.js b/frontend/craco.config.js
@@ -61,7 +61,7 @@ module.exports = {
  chunkFilename: 'static/js/[name].[contenthash:8].js',
  },
  // path: path.resolve(__dirname, 'dist'), // 修改输出文件目录
- publicPath: '/',
+ publicPath: `${process.env.PUBLIC_URL || ''}/`,
  };
  /**
  * webpack split chunks

diff --git a/frontend/src/app/AppRouter.tsx b/frontend/src/app/AppRouter.tsx
@@ -19,7 +19,7 @@
 import { ConfigProvider, message } from 'antd';
 import echartsDefaultTheme from 'app/assets/theme/echarts_default_theme.json';
 import { registerTheme } from 'echarts';
-import { StorageKeys } from 'globalConstants';
+import { PUBLIC_URL, StorageKeys } from 'globalConstants';
 import { antdLocales } from 'locales/i18n';
 import { useEffect, useLayoutEffect } from 'react';
 import { Helmet } from 'react-helmet-async';
@@ -65,7 +65,7 @@ export function AppRouter() {
 
  return (
  <ConfigProvider locale={antdLocales[i18n.language]}>
- <BrowserRouter>
+ <BrowserRouter basename={PUBLIC_URL}>
  <Helmet
  titleTemplate="%s - Datart"
  defaultTitle="Datart"

diff --git a/frontend/src/app/pages/DashBoardPage/utils/index.ts b/frontend/src/app/pages/DashBoardPage/utils/index.ts
@@ -40,6 +40,7 @@ import { getTime, splitRangerDateFilters } from 'app/utils/time';
 import {
  DATE_FORMATTER,
  FilterSqlOperator,
+ PUBLIC_URL,
  TIME_FORMATTER,
 } from 'globalConstants';
 import moment from 'moment';
@@ -73,7 +74,7 @@ export const dateFormatObj = {
 
 export const convertImageUrl = (urlKey: string = ''): string => {
  if (urlKey.startsWith(BOARD_FILE_IMG_PREFIX)) {
- return `${window.location.origin}/${urlKey}`;
+ return `${window.location.origin}${PUBLIC_URL}/${urlKey}`;
  }
  return urlKey;
 };

diff --git a/frontend/src/app/pages/SharePage/Chart/Router.tsx b/frontend/src/app/pages/SharePage/Chart/Router.tsx
@@ -19,6 +19,7 @@
 import { ConfigProvider } from 'antd';
 import echartsDefaultTheme from 'app/assets/theme/echarts_default_theme.json';
 import { registerTheme } from 'echarts';
+import { PUBLIC_URL } from 'globalConstants';
 import { antdLocales } from 'locales/i18n';
 import { useTranslation } from 'react-i18next';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
@@ -33,13 +34,11 @@ export function Router() {
 
  return (
  <ConfigProvider locale={antdLocales[i18n.language]}>
- <BrowserRouter>
+ <BrowserRouter basename={PUBLIC_URL}>
  <HelmetPageTitle lang={i18n.language} />
- <BrowserRouter>
- <Switch>
- <Route path="/shareChart/:token" component={LazyShareChart} />
- </Switch>
- </BrowserRouter>
+ <Switch>
+ <Route path="/shareChart/:token" component={LazyShareChart} />
+ </Switch>
  <GlobalStyles />
  </BrowserRouter>
  </ConfigProvider>

diff --git a/frontend/src/app/pages/SharePage/Dashboard/Router.tsx b/frontend/src/app/pages/SharePage/Dashboard/Router.tsx
@@ -19,6 +19,7 @@
 import { ConfigProvider } from 'antd';
 import echartsDefaultTheme from 'app/assets/theme/echarts_default_theme.json';
 import { registerTheme } from 'echarts';
+import { PUBLIC_URL } from 'globalConstants';
 import { antdLocales } from 'locales/i18n';
 import { useTranslation } from 'react-i18next';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
@@ -33,7 +34,7 @@ export function Router() {
 
  return (
  <ConfigProvider locale={antdLocales[i18n.language]}>
- <BrowserRouter>
+ <BrowserRouter basename={PUBLIC_URL}>
  <HelmetPageTitle lang={i18n.language} />
  <Switch>
  <Route path="/shareDashboard/:token" component={LazyShareDashboard} />

diff --git a/frontend/src/app/pages/SharePage/StoryPlayer/Router.tsx b/frontend/src/app/pages/SharePage/StoryPlayer/Router.tsx
@@ -19,6 +19,7 @@
 import { ConfigProvider } from 'antd';
 import echartsDefaultTheme from 'app/assets/theme/echarts_default_theme.json';
 import { registerTheme } from 'echarts';
+import { PUBLIC_URL } from 'globalConstants';
 import { antdLocales } from 'locales/i18n';
 import { useTranslation } from 'react-i18next';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
@@ -33,7 +34,7 @@ export function Router() {
 
  return (
  <ConfigProvider locale={antdLocales[i18n.language]}>
- <BrowserRouter>
+ <BrowserRouter basename={PUBLIC_URL}>
  <HelmetPageTitle lang={i18n.language} />
  <Switch>
  <Route

diff --git a/frontend/src/app/utils/fetch.ts b/frontend/src/app/utils/fetch.ts
@@ -30,6 +30,7 @@ import {
  transformToViewConfig,
 } from 'app/utils/internalChartHelper';
 import { saveAs } from 'file-saver';
+import { PUBLIC_URL } from 'globalConstants';
 import i18next from 'i18next';
 import qs from 'qs';
 import { request2, requestWithHeader } from 'utils/request';
@@ -250,7 +251,7 @@ export async function downloadFile(id) {
 
 export async function fetchPluginChart(path) {
  const result = await request2(path, {
- baseURL: '/',
+ baseURL: PUBLIC_URL,
  headers: { Accept: 'application/javascript' },
  }).catch(error => {
  console.error(error);

diff --git a/frontend/src/globalConstants.ts b/frontend/src/globalConstants.ts
@@ -37,8 +37,9 @@ export enum StorageKeys {
  Theme = 'THEME',
 }
 
-export const BASE_API_URL = '/api/v1';
-export const BASE_RESOURCE_URL = '/';
+export const PUBLIC_URL = process?.env?.PUBLIC_URL || '';
+export const BASE_API_URL = `${PUBLIC_URL}/api/v1`;
+export const BASE_RESOURCE_URL = `${PUBLIC_URL}/`;
 // 1 hour
 export const DEFAULT_AUTHORIZATION_TOKEN_EXPIRATION = 1000 * 60 * 60;
 

diff --git a/frontend/src/utils/request.ts b/frontend/src/utils/request.ts
@@ -18,7 +18,7 @@
 
 import { message } from 'antd';
 import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
-import { BASE_API_URL } from 'globalConstants';
+import { BASE_API_URL, PUBLIC_URL } from 'globalConstants';
 import i18next from 'i18next';
 import { APIResponse } from 'types';
 import { getToken, removeToken, setToken } from './auth';
@@ -93,7 +93,7 @@ export function requestWithHeader(
 }
 
 export const getServerDomain = () => {
- return `${window.location.protocol}//${window.location.host}`;
+ return `${window.location.protocol}//${window.location.host}${PUBLIC_URL}`;
 };
 
 function unAuthorizationErrorHandler(error) {