Change application to run on subpath (#207)

* added baseurl to application * small splash screen on /
cmu15122 · Jan 16, 2023 · fabb8c4 · fabb8c4
1 parent ccd20e9
commit fabb8c4
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -138,6 +138,7 @@ Create a `.env` file in the `client` folder with the following fields:
 | REACT_APP_DOMAIN | Domain used for the host address | | Angela |
 | REACT_APP_SOCKET_PATH | Path for sockets to use coming from the domain, usually ends with `/socket.io` | | Angela |
 | REACT_APP_SERVER_PATH | Path to make API calls to the server | | Angela |
+| PUBLIC_URL | URL for where the application will run | | Pranav |
 
 Add them to the `.env` file like so:
 ```

diff --git a/client/public/index.html b/client/public/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+  <base href="%PUBLIC_URL%/">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -41,7 +41,7 @@ function App() {
                 <StudentDataContextProvider>
                   <AdminSettingsContextProvider>
                     <AllStudentsContextProvider>
-                      <Router>
+                      <Router basename={process.env.PUBLIC_URL}>
                         <Routes>
                           <Route path='/' element={<Home theme={theme || darkTheme}/>} />
                           <Route path='/settings' element={<Settings/>} />

diff --git a/client/src/components/navbar/Navbar.tsx b/client/src/components/navbar/Navbar.tsx
@@ -64,8 +64,8 @@ export default function Navbar(props) {
     const newPages = [];
 
     if (userData.isAuthenticated && userData.isTA) {
-      newPages.push(createPage('Settings', '/settings'));
-      newPages.push(createPage('Metrics', '/metrics'));
+      newPages.push(createPage('Settings', 'settings'));
+      newPages.push(createPage('Metrics', 'metrics'));
     }
 
     setPages(newPages);
@@ -77,7 +77,7 @@ export default function Navbar(props) {
 
   function handleLogout() {
     removeCookie('user');
-    window.location.href = '/';
+    window.location.href = '';
   }
 
   function openAlert() {

diff --git a/client/src/components/navbar/OHQueueHeader.tsx b/client/src/components/navbar/OHQueueHeader.tsx
@@ -5,7 +5,7 @@ import {
 
 export default function OHQueueHeader() {
   return (
-    <Link variant="h6" color="#FFFFFF" fontWeight='bold' href="/" underline="none" sx={{pt: 0.3}}>
+    <Link variant="h6" color="#FFFFFF" fontWeight='bold' href="" underline="none" sx={{pt: 0.3}}>
       15-122 Office Hours Queue
     </Link>
   );

diff --git a/client/src/http-common.tsx b/client/src/http-common.tsx
@@ -29,7 +29,7 @@ httpInstance.interceptors.response.use(
     (res) => {
       if (res.data.isOwner && !window.location.href.includes('settings')) {
       // Redirect owner to settings page
-        window.location.href = '/settings';
+        window.location.href = 'settings';
       }
       // COMMENTED OUT SO ONLY TOAST IF ERROR
       // if (res.data.message) {
@@ -40,7 +40,7 @@ httpInstance.interceptors.response.use(
     (err) => {
       if (err.response.status === 404) {
       // Redirect to homepage
-        window.location.href = '/';
+        window.location.href = '';
       }
       if (err.response.data.message) {
         const message = err.message + ': ' + err.response.data.message;