frontend: remove runtime public path config (#711)

* build: remove protobufjs dependency

* chore: support runtime config

* v2.0.0-beta.44

* fix: api url build config

* v2.0.0-beta.45

* fix: give up runtime config

* fix code style

* use publicPath config in i18n

* fix python app typo

.gitignore

@@ -112,3 +112,5 @@ ENV/
 
 # asdf
 .tool-versions
+
+docker-compose.override.yml

frontend/lerna.json

@@ -2,7 +2,7 @@
     "packages": [
         "packages/*"
     ],
-    "version": "2.0.0-beta.43",
+    "version": "2.0.0-beta.45",
     "npmClient": "yarn",
     "useWorkspaces": true,
     "command": {

frontend/packages/cli/package.json

 {
     "name": "@visualdl/cli",
-    "version": "2.0.0-beta.43",
+    "version": "2.0.0-beta.45",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",
@@ -34,7 +34,7 @@
         "dist"
     ],
     "dependencies": {
-        "@visualdl/server": "2.0.0-beta.43",
+        "@visualdl/server": "2.0.0-beta.45",
         "open": "7.0.4",
         "ora": "4.0.4",
         "pm2": "4.4.0",

frontend/packages/core/components/ChartPage.tsx

@@ -11,6 +11,8 @@ import groupBy from 'lodash/groupBy';
 import styled from 'styled-components';
 import useSearchValue from '~/hooks/useSearchValue';
 
+const PUBLIC_PATH = process.env.PUBLIC_PATH;
+
 const StyledPagination = styled(Pagination)`
     margin-top: ${rem(20)};
 `;
@@ -52,7 +54,7 @@ const Empty = styled.div<{height?: string}>`
     height: ${props => props.height ?? 'auto'};
     padding: ${rem(320)} 0 ${rem(70)};
     background-color: ${backgroundColor};
-    background-image: url(${`${process.env.PUBLIC_PATH}/images/empty.svg`});
+    background-image: url(${`${PUBLIC_PATH}/images/empty.svg`});
     background-repeat: no-repeat;
     background-position: calc(50% + ${rem(25)}) ${rem(70)};
     background-size: ${rem(280)} ${rem(244)};

frontend/packages/core/components/Error.tsx

@@ -4,6 +4,8 @@ import {WithStyled, backgroundColor, em, link, rem, size, textColor, textLightCo
 
 import styled from 'styled-components';
 
+const PUBLIC_PATH = process.env.PUBLIC_PATH;
+
 const Wrapper = styled.div`
     display: flex;
     justify-content: center;
@@ -13,7 +15,7 @@ const Wrapper = styled.div`
     width: 100%;
 
     > .image {
-        background-image: url(${`${process.env.PUBLIC_PATH}/images/empty.svg`});
+        background-image: url(${`${PUBLIC_PATH}/images/empty.svg`});
         background-repeat: no-repeat;
         background-position: center center;
         background-size: 100% 100%;

frontend/packages/core/components/GraphsPage/Graph.tsx

@@ -8,6 +8,8 @@ import styled from 'styled-components';
 import {toast} from 'react-toastify';
 import {useTranslation} from '~/utils/i18n';
 
+const PUBLIC_PATH = process.env.PUBLIC_PATH;
+
 const toolboxHeight = rem(40);
 
 const Wrapper = styled.div`
@@ -247,7 +249,7 @@ const Graph = React.forwardRef<GraphRef, GraphProps>(
                     <Content>
                         <iframe
                             ref={iframe}
-                            src={`${process.env.PUBLIC_PATH ?? ''}/_next/static/netron/index.html`}
+                            src={`${PUBLIC_PATH ?? ''}/_next/static/netron/index.html`}
                             frameBorder={0}
                             scrolling="no"
                             marginWidth={0}
@@ -259,7 +261,7 @@ const Graph = React.forwardRef<GraphRef, GraphProps>(
                             target="_blank"
                             rel="noreferrer"
                         >
-                            Powered by <img src={`${process.env.PUBLIC_PATH ?? ''}/images/netron.png`} alt="netron" />
+                            Powered by <img src={`${PUBLIC_PATH ?? ''}/images/netron.png`} alt="netron" />
                         </a>
                     </Content>
                 </RenderContent>

frontend/packages/core/components/GraphsPage/NodeDocumentationSidebar.tsx

@@ -171,11 +171,10 @@ const NodeDocumentationSidebar: FunctionComponent<NodeDocumentationSidebarProps>
                     <>
                         <h2>{t('graphs:documentation.support')}</h2>
                         <dl>
-                            {/* eslint-disable prettier/prettier */}
+                            {/* prettier-ignore */}
                             <Trans i18nKey="graphs:documentation.support-info">
                                 In domain <code>{{domain: data.domain}}</code> since version <code>{{since_version: data.since_version}}</code> at support level <code>{{support_level: data.support_level}}</code>.
                             </Trans>
-                            {/* eslint-enable prettier/prettier */}
                         </dl>
                     </>
                 )}

frontend/packages/core/components/Navbar.tsx

@@ -21,7 +21,8 @@ import styled from 'styled-components';
 import useNavItems from '~/hooks/useNavItems';
 import {useRouter} from 'next/router';
 
-const API_TOKEN_KEY: string = globalThis.__vdl_api_token_key__ || '';
+const API_TOKEN_KEY = process.env.API_TOKEN_KEY;
+const PUBLIC_PATH = process.env.PUBLIC_PATH;
 
 const Nav = styled.nav`
     background-color: ${navbarBackgroundColor};
@@ -105,7 +106,7 @@ const Navbar: FunctionComponent = () => {
     const indexUrl = useMemo(() => {
         // TODO: fix type
         const subpath = (i18n.options as InitConfig).localeSubpaths?.[i18n.language];
-        let path = process.env.PUBLIC_PATH ?? '';
+        let path = PUBLIC_PATH ?? '';
         if (subpath) {
             path += `/${subpath}`;
         }
@@ -125,7 +126,7 @@ const Navbar: FunctionComponent = () => {
         <Nav>
             <div className="left">
                 <Logo href={indexUrl}>
-                    <img alt="PaddlePaddle" src={`${process.env.PUBLIC_PATH}/images/logo.svg`} />
+                    <img alt="PaddlePaddle" src={`${PUBLIC_PATH}/images/logo.svg`} />
                     <span>VisualDL</span>
                 </Logo>
                 {navItems.map(name => {

frontend/packages/core/components/Preloader.tsx

@@ -20,7 +20,7 @@ type PreloaderProps = {
 };
 
 const Preloader: FunctionComponent<PreloaderProps> = ({url, as}) =>
-    process.env.API_TOKEN_KEY || globalThis.__vdl_api_token_key__ ? null : (
+    process.env.API_TOKEN_KEY ? null : (
         <Head>
             <link rel="preload" href={process.env.API_URL + url} crossOrigin="anonymous" as={as || 'fetch'} />
         </Head>

frontend/packages/core/next.config.d.ts

 declare type NextEnv = {
+    PUBLIC_PATH: string;
     API_URL: string;
     DEFAULT_LANGUAGE: string;
     LANGUAGES: string[];

frontend/packages/core/next.config.js

@@ -22,7 +22,6 @@ const LANGUAGES = ['en', 'zh'];
 const otherLanguages = LANGUAGES.filter(lang => lang !== DEFAULT_LANGUAGE);
 
 module.exports = {
-    target: 'serverless',
     assetPrefix: publicPath,
     distDir,
     poweredByHeader: false,
@@ -31,8 +30,9 @@ module.exports = {
         DEFAULT_LANGUAGE,
         LOCALE_PATH,
         LANGUAGES,
+        API_URL: apiUrl,
         PUBLIC_PATH: publicPath,
-        API_URL: apiUrl
+        API_TOKEN_KEY: process.env.API_TOKEN_KEY || ''
     },
     exportPathMap: defaultPathMap => ({
         ...defaultPathMap,

frontend/packages/core/package.json

 {
     "name": "@visualdl/core",
-    "version": "2.0.0-beta.43",
+    "version": "2.0.0-beta.44",
     "title": "VisualDL",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
@@ -34,9 +34,9 @@
     },
     "dependencies": {
         "@tippyjs/react": "4.0.5",
-        "@visualdl/i18n": "2.0.0-beta.43",
-        "@visualdl/netron": "2.0.0-beta.43",
-        "@visualdl/wasm": "2.0.0-beta.43",
+        "@visualdl/i18n": "2.0.0-beta.44",
+        "@visualdl/netron": "2.0.0-beta.44",
+        "@visualdl/wasm": "2.0.0-beta.44",
         "bignumber.js": "9.0.0",
         "d3-format": "1.4.4",
         "echarts": "4.8.0",
@@ -78,7 +78,7 @@
         "@types/react": "16.9.41",
         "@types/react-dom": "16.9.8",
         "@types/styled-components": "5.1.0",
-        "@visualdl/mock": "2.0.0-beta.43",
+        "@visualdl/mock": "2.0.0-beta.44",
         "babel-plugin-emotion": "10.0.33",
         "babel-plugin-styled-components": "1.10.7",
         "babel-plugin-typescript-to-proptypes": "1.3.2",

frontend/packages/core/pages/_app.tsx

-import App, {AppContext, AppProps} from 'next/app';
 import {Router, appWithTranslation} from '~/utils/i18n';
-import {fetcher, getApiToken, setApiToken} from '~/utils/fetch';
+import {fetcher, getApiToken} from '~/utils/fetch';
 
+import App from 'next/app';
 import {GlobalStyle} from '~/utils/style';
 import Head from 'next/head';
 import Layout from '~/components/Layout';
@@ -12,17 +12,10 @@ import {ToastContainer} from 'react-toastify';
 import queryString from 'query-string';
 import {withRouter} from 'next/router';
 
-const API_TOKEN_KEY: string = globalThis.__vdl_api_token_key__ || '';
+const API_TOKEN_KEY = process.env.API_TOKEN_KEY;
+const PUBLIC_PATH = process.env.PUBLIC_PATH;
 
 class VDLApp extends App {
-    constructor(props: AppProps) {
-        super(props);
-        if (process.browser && API_TOKEN_KEY) {
-            const query = queryString.parse(window.location.search);
-            setApiToken(query[API_TOKEN_KEY]);
-        }
-    }
-
     componentDidMount() {
         Router.events.on('routeChangeStart', () => NProgress.start());
         Router.events.on('routeChangeComplete', (url: string) => {
@@ -55,7 +48,7 @@ class VDLApp extends App {
             <>
                 <Head>
                     <title>{process.env.title}</title>
-                    <link rel="shortcut icon" href={`${process.env.PUBLIC_PATH}/favicon.ico`} />
+                    <link rel="shortcut icon" href={`${PUBLIC_PATH}/favicon.ico`} />
                     <meta
                         name="viewport"
                         content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no,shrink-to-fit=no"
@@ -80,15 +73,6 @@ class VDLApp extends App {
             </>
         );
     }
-
-    static async getInitialProps(appContext: AppContext) {
-        const appProps = await App.getInitialProps(appContext);
-
-        if (API_TOKEN_KEY) {
-            setApiToken(appContext.router.query[API_TOKEN_KEY]);
-        }
-        return {...appProps};
-    }
 }
 
 export default appWithTranslation(withRouter(VDLApp));

frontend/packages/core/pages/_document.tsx

@@ -56,12 +56,6 @@ export default class VDLDocument extends Document<VDLDocumentProps> {
             <Html lang={language} dir={languageDir}>
                 <Head />
                 <body>
-                    <script
-                        dangerouslySetInnerHTML={{__html: `__vdl_public_path__='${process.env.PUBLIC_PATH}'`}}
-                    ></script>
-                    <script
-                        dangerouslySetInnerHTML={{__html: `__vdl_api_token_key__='${process.env.API_TOKEN_KEY}'`}}
-                    ></script>
                     <Main />
                     <NextScript />
                 </body>

frontend/packages/core/types/global.d.ts

 declare global {
     interface Window {
         __visualdl_instance_id__?: string | string[];
-        __vdl_api_token_key__?: string;
     }
 
     namespace globalThis {
         // eslint-disable-next-line no-var
         var __visualdl_instance_id__: string | string[] | undefined;
-        // eslint-disable-next-line no-var
-        var __vdl_api_token_key__: string | undefined;
     }
 }
 
 declare namespace NodeJS {
     interface Global {
         __visualdl_instance_id__?: string | string[];
-        __vdl_api_token_key__?: string;
     }
 }
 

frontend/packages/core/utils/fetch.ts

@@ -2,11 +2,18 @@
 // https://github.com/zeit/swr/blob/master/examples/axios-typescript/libs/useRequest.ts
 
 import fetch from 'isomorphic-unfetch';
+import queryString from 'query-string';
 
-const API_TOKEN_KEY: string = globalThis.__vdl_api_token_key__ || '';
+const API_TOKEN_KEY = process.env.API_TOKEN_KEY;
 
 const API_TOKEN_HEADER = 'X-VisualDL-Instance-ID';
 
+const instanceId = process.browser && API_TOKEN_KEY ? queryString.parse(window.location.search)[API_TOKEN_KEY] : '';
+
+export function getApiToken(): string | string[] | null {
+    return instanceId ?? null;
+}
+
 function addApiToken(options?: RequestInit): RequestInit | undefined {
     const id = getApiToken();
     if (!API_TOKEN_KEY || !id) {
@@ -25,14 +32,6 @@ function addApiToken(options?: RequestInit): RequestInit | undefined {
     };
 }
 
-export function setApiToken(id?: string | string[] | null) {
-    globalThis.__visualdl_instance_id__ = id || '';
-}
-
-export function getApiToken(): string | string[] | null {
-    return globalThis.__visualdl_instance_id__ || '';
-}
-
 export const fetcher = async <T = unknown>(url: string, options?: RequestInit): Promise<T> => {
     const res = await fetch(process.env.API_URL + url, addApiToken(options));
     const response = await res.json();

frontend/packages/core/utils/i18n.ts

@@ -15,6 +15,7 @@ allLanguages.forEach(async (lang: string) => {
 });
 
 const nextI18Next = new NextI18Next({
+    publicPath: env.PUBLIC_PATH,
     localePath: env.LOCALE_PATH,
     browserLanguageDetection: !isDev,
     serverLanguageDetection: !isDev,

frontend/packages/core/utils/style.ts

@@ -7,6 +7,8 @@ import tippy from '!!css-loader!tippy.js/dist/tippy.css';
 import toast from '!!css-loader!react-toastify/dist/ReactToastify.css';
 import vdlIcon from '!!css-loader!~/public/style/vdl-icon.css';
 
+const PUBLIC_PATH = process.env.PUBLIC_PATH;
+
 export {default as styled} from 'styled-components';
 export * from 'styled-components';
 export * from 'polished';
@@ -15,7 +17,7 @@ export {borderRadius as borderRadiusShortHand, borderColor as borderColorShortHa
 
 const {math, size, lighten, darken, normalize, fontFace, transitions, border, position} = polished;
 
-export const iconFontPath = `${process.env.PUBLIC_PATH}/style/fonts/vdl-icon`;
+export const iconFontPath = `${PUBLIC_PATH}/style/fonts/vdl-icon`;
 
 // sizes
 const fontSize = '14px';

frontend/packages/i18n/package.json

 {
     "name": "@visualdl/i18n",
-    "version": "2.0.0-beta.43",
+    "version": "2.0.0-beta.44",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",

frontend/packages/i18n/src/config/create-config.ts

@@ -96,7 +96,7 @@ export const createConfig = (userConfig: Config): Config => {
         /*
             Set client side backend
         */
-        const publicPath = (window as any).__vdl_public_path__ || '';
+        const publicPath = combinedConfig.publicPath;
         combinedConfig.backend = {
             loadPath: `${publicPath}/${clientLocalePath}/${localeStructure}.${localeExtension}`,
             addPath: `${publicPath}/${clientLocalePath}/${localeStructure}.missing.${localeExtension}`

frontend/packages/i18n/src/config/default-config.ts

@@ -8,6 +8,7 @@ const LOCALE_STRUCTURE = '{{lng}}/{{ns}}';
 const LOCALE_EXTENSION = 'json';
 
 export const defaultConfig = {
+    publicPath: '',
     defaultLanguage: DEFAULT_LANGUAGE,
     otherLanguages: OTHER_LANGUAGES,
     load: 'currentOnly',

frontend/packages/i18n/src/hocs/app-with-translation.tsx

@@ -56,8 +56,8 @@ export const appWithTranslation = function (this: NextI18Next, WrappedComponent:
                     const {query} = router;
                     let {pathname, asPath} = router;
 
-                    if (process.env.PUBLIC_PATH) {
-                        const publicPath = process.env.PUBLIC_PATH;
+                    if (config.publicPath) {
+                        const publicPath = config.publicPath;
                         if (pathname.indexOf(publicPath) === 0) {
                             pathname = pathname.replace(publicPath, '');
                         }

frontend/packages/i18n/types.d.ts

@@ -18,6 +18,7 @@ import {LinkProps} from 'next/link';
 import {SingletonRouter} from 'next/router';
 
 export type InitConfig = {
+    publicPath?: string;
     projectRoot?: string;
     browserLanguageDetection?: boolean;
     serverLanguageDetection?: boolean;

frontend/packages/mock/package.json

 {
     "name": "@visualdl/mock",
-    "version": "2.0.0-beta.43",
+    "version": "2.0.0-beta.44",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",

frontend/packages/netron/package.json

 {
     "name": "@visualdl/netron",
-    "version": "2.0.0-beta.43",
+    "version": "2.0.0-beta.44",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",

frontend/packages/server/index.ts

@@ -13,6 +13,7 @@ const host = process.env.HOST || 'localhost';
 const port = Number.parseInt(process.env.PORT || '', 10) || 8999;
 const backend = process.env.BACKEND;
 const delay = Number.parseInt(process.env.DELAY || '', 10);
+const publicPath = process.env.PUBLIC_PATH || '/';
 
 const server = express();
 
@@ -31,7 +32,7 @@ async function start() {
         const compiler = webpack(webpackConfig);
         server.use(
             webpackDevMiddleware(compiler, {
-                publicPath: '/'
+                publicPath
             })
         );
     }
@@ -52,6 +53,12 @@ async function start() {
         console.warn('Server is running in production mode but no backend address specified.');
     }
 
+    if (publicPath !== '/') {
+        server.get('/', (_req, res) => {
+            res.redirect(publicPath);
+        });
+    }
+
     const {default: nextI18Next} = await import('@visualdl/core/utils/i18n');
     await nextI18Next.initPromise;
     server.use(nextI18NextMiddleware(nextI18Next));

frontend/packages/server/package.json

 {
     "name": "@visualdl/server",
-    "version": "2.0.0-beta.43",
+    "version": "2.0.0-beta.45",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",
@@ -24,7 +24,7 @@
     },
     "scripts": {
         "dev": "cross-env NODE_ENV=development nodemon --watch index.ts --watch webpack.config.js --exec \"ts-node index.ts\"",
-        "build": "cross-env API_URL=/api ts-node --script-mode build.ts",
+        "build": "cross-env ts-node --script-mode build.ts",
         "build:webpack": "webpack",
         "start": "pm2-runtime ecosystem.config.js",
         "test": "echo \"Error: no test specified\" && exit 0; #"
@@ -37,8 +37,8 @@
         "ecosystem.config.d.ts"
     ],
     "dependencies": {
-        "@visualdl/core": "2.0.0-beta.43",
-        "@visualdl/i18n": "2.0.0-beta.43",
+        "@visualdl/core": "2.0.0-beta.44",
+        "@visualdl/i18n": "2.0.0-beta.44",
         "express": "4.17.1",
         "http-proxy-middleware": "1.0.4",
         "next": "9.4.4",
@@ -50,7 +50,7 @@
         "@types/shelljs": "0.8.8",
         "@types/webpack": "4.41.18",
         "@types/webpack-dev-middleware": "3.7.1",
-        "@visualdl/mock": "2.0.0-beta.43",
+        "@visualdl/mock": "2.0.0-beta.44",
         "cross-env": "7.0.2",
         "nodemon": "2.0.4",
         "shelljs": "0.8.4",

frontend/packages/serverless/package.json

 {
     "name": "@visualdl/serverless",
-    "version": "2.0.0-beta.43",
+    "version": "2.0.0-beta.44",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [
         "visualdl",
@@ -33,7 +33,7 @@
     "devDependencies": {
         "@types/node": "14.0.14",
         "@types/rimraf": "3.0.0",
-        "@visualdl/core": "2.0.0-beta.43",
+        "@visualdl/core": "2.0.0-beta.44",
         "cross-env": "7.0.2",
         "rimraf": "3.0.2",
         "ts-node": "8.10.2",

frontend/packages/wasm/package.json

 {
     "name": "@visualdl/wasm",
-    "version": "2.0.0-beta.43",
+    "version": "2.0.0-beta.44",
     "title": "VisualDL",
     "description": "A platform to visualize the deep learning process and result.",
     "keywords": [

visualdl/server/app.py

@@ -89,7 +89,7 @@ def create_app(args):
             lang = get_locale()
             if lang == default_language:
                 return redirect(public_path + '/index', code=302)
-            lang = support_language[0] if lang is None else lang
+            lang = default_language if lang is None else lang
             return redirect(public_path + '/' + lang + '/index', code=302)
 
         @app.route(public_path + '/<path:filename>')