Support prefix for webui static files (#3874)

ts/webui/config/webpack.config.js

@@ -54,19 +54,16 @@ module.exports = function(webpackEnv) {
   // Webpack uses `publicPath` to determine where the app is being served from.
   // It requires a trailing slash, or the file assets will get an incorrect path.
   // In development, we always serve from the root. This makes config easier.
-  const publicPath = isEnvProduction
-    ? paths.servedPath
-    : isEnvDevelopment && '/';
+  //const publicPath = isEnvProduction ? paths.servedPath : isEnvDevelopment && '/';
+  const publicPath = './';
   // Some apps do not use client-side routing with pushState.
   // For these, "homepage" can be set to "." to enable relative asset paths.
-  const shouldUseRelativeAssetPaths = publicPath === './';
+  const shouldUseRelativeAssetPaths = true;
 
   // `publicUrl` is just like `publicPath`, but we will provide it to our app
   // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
   // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-  const publicUrl = isEnvProduction
-    ? publicPath.slice(0, -1)
-    : isEnvDevelopment && '';
+  const publicUrl = '.';
   // Get environment variables to inject into our app.
   const env = getClientEnvironment(publicUrl);
 

ts/webui/src/components/stateless-component/NNItabs.tsx

 import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 
+import { getPrefix } from '../../static/function';
+
 const OVERVIEWTABS = (
     <NavLink to='/oview' activeClassName='selected' className='common-tabs'>
         Overview
@@ -15,7 +17,7 @@ const DETAILTABS = (
 
 const NNILOGO = (
     <NavLink to='/oview'>
-        <img src='/logo.png' alt='NNI logo' style={{ height: 40 }} />
+        <img src={(getPrefix() || '') + '/logo.png'} alt='NNI logo' style={{ height: 40 }} />
     </NavLink>
 );
 

ts/webui/src/index.tsx

@@ -17,7 +17,7 @@ ReactDOM.render(
         <Suspense
             fallback={
                 <div className='loading'>
-                    <img src='/loading.gif' />
+                    <img src={(path || '') + '/loading.gif'} />
                 </div>
             }
         >