Add support for subpath deployment

Fix #31

Author: danielfdsilva

packages/client/.env

@@ -8,4 +8,7 @@ REACT_APP_STAC_API=
 
 ## Theming
 # REACT_APP_THEME_PRIMARY_COLOR='#6A5ACD'
-# REACT_APP_THEME_SECONDARY_COLOR='#048A81'
+# REACT_APP_THEME_SECONDARY_COLOR='#048A81'
+
+## Don't set the public url here. Check the README.md file for more information
+# PUBLIC_URL= Do not set here

packages/client/README.md

@@ -14,6 +14,7 @@ Some client options are controlled by environment variables. These are:
 ## Title and description of the app for metadata
 APP_TITLE
 APP_DESCRIPTION
+PUBLIC_URL
 
 # API
 ## If the app is being served in from a subfolder, the domain url must be set.
@@ -26,6 +27,15 @@ REACT_APP_THEME_PRIMARY_COLOR
 REACT_APP_THEME_SECONDARY_COLOR
 ```
 
+**Public URL**  
+It is recommended to always set the `PUBLIC_URL` environment variable on a production build.
+If the app is being served from a subfolder, the `PUBLIC_URL` should include the subfolder path. **Do not include a trailing slash.**
+
+For example, if the app is being served from `https://example.com/stac-manager`, the `PUBLIC_URL` should be set to `https://example.com/stac-manager`.
+
+> [!IMPORTANT]
+> The `PUBLIC_URL` environment variable must be set before running the build script, and therefore the `.env` file cannot be used to set this variable.
+
 You must provide a value for the `REACT_APP_STAC_API` environment variable. This should be the URL of the STAC API you wish to interact with.
 
 If the `REACT_APP_STAC_BROWSER` environment variable is not set, [Radiant Earth's STAC Browser](https://radiantearth.github.io/stac-browser/) will be used by default, which will connect to the STAC API specified in `REACT_APP_STAC_API`.

packages/client/src/App.tsx

@@ -25,11 +25,21 @@ import CollectionDetail from './pages/CollectionDetail';
 import Sandbox from './pages/Sandbox';
 import { config } from './plugin-system/config';
 
+let basename: string | undefined;
+if (process.env.PUBLIC_URL) {
+  try {
+    basename = new URL(process.env.PUBLIC_URL).pathname;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (error) {
+    // no-op
+  }
+}
+
 export const App = () => (
   <ChakraProvider theme={theme}>
     <StacApiProvider apiUrl={process.env.REACT_APP_STAC_API!}>
       <PluginConfigProvider config={config}>
-        <Router>
+        <Router basename={basename}>
           <Container
             maxW='container.xl'
             minH='100vh'
@@ -46,7 +56,7 @@ export const App = () => (
             >
               <Flex gap={4} alignItems='center'>
                 <Image
-                  src='/meta/icon-512.png'
+                  src={`${process.env.PUBLIC_URL}/meta/icon-512.png`}
                   width={8}
                   aspectRatio={1}
                   borderRadius='md'

packages/client/src/pages/Home.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
+import { Navigate } from 'react-router-dom';
 
 import { usePageTitle } from '../hooks';
-import { Navigate } from 'react-router-dom';
 
 function Home() {
-  usePageTitle('STAC Admin');
+  usePageTitle(process.env.APP_TITLE!);
 
   return <Navigate to='/collections' replace />;
 }

packages/client/tasks/build.mjs

@@ -35,14 +35,22 @@ async function copyFiles() {
 }
 
 async function parcelServe() {
+  const publicUrl = process.env.PUBLIC_URL || '';
+
+  if (publicUrl) {
+    log.warn(`🌍 Building using public URL: ${publicUrl}`);
+  } else {
+    log.warn(`🌍 Building without public URL`);
+  }
+
   const bundler = new Parcel({
     entries: `${__dirname}/../src/index.html`,
     defaultConfig: `${__dirname}/../.parcelrc`,
     cacheDir: `${__dirname}/../.parcel-cache`,
     mode: 'production',
     defaultTargetOptions: {
       distDir: `${__dirname}/../dist`,
-      publicUrl: process.env.PUBLIC_URL || '/'
+      publicUrl
     },
     additionalReporters: [
       {