Use PUBLIC_URL throughout the app

See #254.

Fixes


Fix auth URL

Author: dennisreimann

app/src/Routes.tsx

@@ -3,6 +3,7 @@ import { Route, Router, Switch } from 'react-router';
 import { useStore } from 'store';
 import Loading from 'components/common/Loading';
 import { Layout } from 'components/layout';
+import { PUBLIC_URL } from 'config';
 
 const LazyAuthPage = React.lazy(() => import('components/auth/AuthPage'));
 const LazyLoopPage = React.lazy(() => import('components/loop/LoopPage'));
@@ -12,20 +13,19 @@ const LazySettingsPage = React.lazy(() => import('components/settings/SettingsPa
 
 const Routes: React.FC = () => {
   const { router } = useStore();
-
   return (
     <Suspense fallback={<Loading delay={500} />}>
       <Router history={router.history}>
         <Switch>
-          <Route path="/" exact component={LazyAuthPage} />
+          <Route path={`${PUBLIC_URL}/`} exact component={LazyAuthPage} />
           <Route>
             <Layout>
               <Switch>
                 <Suspense fallback={<Loading delay={500} />}>
-                  <Route path="/loop" component={LazyLoopPage} />
-                  <Route path="/history" component={LazyHistoryPage} />
-                  <Route path="/pool" component={LazyPoolPage} />
-                  <Route path="/settings" component={LazySettingsPage} />
+                  <Route path={`${PUBLIC_URL}/loop`} component={LazyLoopPage} />
+                  <Route path={`${PUBLIC_URL}/history`} component={LazyHistoryPage} />
+                  <Route path={`${PUBLIC_URL}/pool`} component={LazyPoolPage} />
+                  <Route path={`${PUBLIC_URL}/settings`} component={LazySettingsPage} />
                 </Suspense>
               </Switch>
             </Layout>

app/src/components/layout/NavMenu.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { Badge, HeaderFour } from 'components/base';
+import { PUBLIC_URL } from '../../config';
 
 const Styled = {
   NavHeader: styled(HeaderFour)`
@@ -52,7 +53,9 @@ const NavItem: React.FC<{
 }> = observer(({ page, preview, onClick }) => {
   const { l } = usePrefixedTranslation('cmps.layout.NavMenu');
   const { router } = useStore();
-  const className = router.location.pathname === `/${page}` ? 'active' : '';
+  const className = router.location.pathname.startsWith(`${PUBLIC_URL}/${page}`)
+    ? 'active'
+    : '';
 
   return (
     <Styled.NavItem className={className}>

app/src/components/settings/SettingsPage.tsx

@@ -6,6 +6,7 @@ import BalanceSettings from './BalanceSettings';
 import ExplorerSettings from './ExplorerSettings';
 import GeneralSettings from './GeneralSettings';
 import UnitSettings from './UnitSettings';
+import { PUBLIC_URL } from '../../config';
 
 const Styled = {
   Wrapper: styled.div`
@@ -19,10 +20,10 @@ const SettingsPage: React.FC = () => {
   return (
     <Wrapper>
       <Switch>
-        <Route path="/settings" exact component={GeneralSettings} />
-        <Route path="/settings/unit" component={UnitSettings} />
-        <Route path="/settings/balance" component={BalanceSettings} />
-        <Route path="/settings/explorers" component={ExplorerSettings} />
+        <Route path={`${PUBLIC_URL}/settings`} exact component={GeneralSettings} />
+        <Route path={`${PUBLIC_URL}/settings/unit"`} component={UnitSettings} />
+        <Route path={`${PUBLIC_URL}/settings/balance`} component={BalanceSettings} />
+        <Route path={`${PUBLIC_URL}/settings/explorers`} component={ExplorerSettings} />
       </Switch>
     </Wrapper>
   );

app/src/config.ts

@@ -7,6 +7,8 @@ export const IS_PROD = process.env.NODE_ENV === 'production';
 // flag to check if the app is running in a a test environment
 export const IS_TEST = process.env.NODE_ENV === 'test';
 
+export const PUBLIC_URL = process.env.PUBLIC_URL;
+
 // detect the host currently serving the app files
 const { protocol, hostname, port } = window.location;
 const host = `${protocol}//${hostname}:${port}`;

app/src/store/store.ts

@@ -29,6 +29,7 @@ import {
   RegisterSidecarView,
   RenewAccountView,
 } from './views';
+import { PUBLIC_URL } from '../config';
 
 /**
  * The store used to manage global app state
@@ -125,7 +126,7 @@ export class Store {
           // entering a password or from loading the credentials from storage.
           // only do this if the auth page is currently being viewed, otherwise
           // stay on the current page (ex: history, settings)
-          if (document.location.pathname === '/') {
+          if (document.location.pathname === `${PUBLIC_URL}/`) {
             runInAction(() => {
               this.appView.goToLoop();
             });

app/src/store/views/appView.ts

@@ -5,6 +5,7 @@ import Big from 'big.js';
 import { AuthenticationError } from 'util/errors';
 import { prefixTranslation } from 'util/translate';
 import { Store } from 'store';
+import { PUBLIC_URL } from '../../config';
 
 const { l } = prefixTranslation('stores.appView');
 
@@ -28,7 +29,7 @@ export default class AppView {
   }
 
   get fullWidth() {
-    return this._store.router.location.pathname === '/pool';
+    return this._store.router.location.pathname === `${PUBLIC_URL}/pool`;
   }
 
   /** navigate to the specified route */
@@ -40,13 +41,13 @@ export default class AppView {
 
   /** Change to the Auth page */
   gotoAuth() {
-    this.goTo('/');
+    this.goTo(`${PUBLIC_URL}/`);
     this._store.log.info('Go to the Auth page');
   }
 
   /** Change to the Loop page */
   goToLoop() {
-    this.goTo('/loop');
+    this.goTo(`${PUBLIC_URL}/loop`);
     this._store.settingsStore.autoCollapseSidebar();
     if (!this._store.settingsStore.tourAutoShown) {
       this.showTour();
@@ -57,22 +58,22 @@ export default class AppView {
 
   /** Change to the History page */
   goToHistory() {
-    this.goTo('/history');
+    this.goTo(`${PUBLIC_URL}/history`);
     this._store.settingsStore.autoCollapseSidebar();
     this._store.log.info('Go to the History page');
   }
 
   /** Change to the Pool page */
   goToPool() {
-    this.goTo('/pool');
+    this.goTo(`${PUBLIC_URL}/pool`);
     // always collapse the sidebar to make room for the Pool sidebar
     this._store.settingsStore.sidebarVisible = false;
     this._store.log.info('Go to the Pool page');
   }
 
   /** Change to the Settings page */
   goToSettings() {
-    this.goTo('/settings');
+    this.goTo(`${PUBLIC_URL}/settings`);
     this._store.settingsStore.autoCollapseSidebar();
     this._store.log.info('Go to the Settings page');
   }
@@ -163,7 +164,7 @@ export default class AppView {
   /** sets the selected setting to display */
   showSettings(name: SettingName) {
     const path = name === '' ? '' : `/${name}`;
-    this.goTo(`/settings${path}`);
+    this.goTo(`${PUBLIC_URL}/settings${path}`);
     this._store.log.info('Switch to Setting screen', name);
   }