Basename support

Author: spugachev

src/react-app/src/app.tsx

@@ -7,7 +7,7 @@ const NotFound = lazy(() => import("./pages/not-found"));
 
 export default function App() {
   return (
-    <BrowserRouter>
+    <BrowserRouter basename={import.meta.env.BASE_URL}>
       <Suspense
         fallback={
           <div className="w-full h-full flex items-center justify-center">

src/react-app/src/assets/192x192.png

@@ -1,9 +1,11 @@
+import logo from "../../assets/192x192.png";
+
 export function Header() {
   return (
     <div className="flex items-center space-x-5">
       <div className="flex-shrink-0">
         <div className="relative">
-          <img className="h-16 w-16" src="/icons/192x192.png" alt="" />
+          <img className="h-16 w-16" src={logo} alt="" />
         </div>
       </div>
       <div>

src/react-app/src/components/home/header.tsx

@@ -11,6 +11,10 @@ import "prismjs/components/prism-typescript";
 import "prismjs/components/prism-markdown";
 
 registerServiceWorker();
+let basename = import.meta.env.BASE_URL;
+if (!basename.endsWith("/")) {
+  basename = basename + "/";
+}
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
@@ -27,7 +31,7 @@ root.render(
 function registerServiceWorker() {
   if ("serviceWorker" in navigator) {
     window.addEventListener("load", () => {
-      const url = `${import.meta.env.BASE_URL}service-worker.js`;
+      const url = `${basename}service-worker.js`;
 
       navigator.serviceWorker
         .register(url)

src/react-app/src/main.tsx

@@ -4,4 +4,5 @@ import react from "@vitejs/plugin-react";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  //base: "/aws-cdk-stack-builder-tool",
 });