refactor(React template): Add easier setup using HashRoute (#97)

Author: Pive01

templates/react/{{cookiecutter.project_slug}}/Makefile

@@ -43,10 +43,10 @@ build-frontend: # Build the React app
 	@if [ ! -d "$(FRONTEND_FOLDER)/node_modules" ]; then \
 		$(MAKE) install-frontend; \
 	fi
-	cd $(FRONTEND_FOLDER); rm -rf build && REACT_APP_DEVELOPMENT_ENVIRONMENT=false NODE_ENV=prod npm run build
+	cd $(FRONTEND_FOLDER); rm -rf build && NODE_ENV=prod npm run build
 
 start-frontend: ## Start the frontend in dev mode (hot reload)
-	cd $(FRONTEND_FOLDER); REACT_APP_DEVELOPMENT_ENVIRONMENT=true yarn start
+	cd $(FRONTEND_FOLDER); yarn start
 
 install: venv install-backend install-frontend ## Install dependencies
 

templates/react/{{cookiecutter.project_slug}}/backend/{{cookiecutter.module_name}}/api/web.py

@@ -1,12 +1,21 @@
-from localstack.http import route, Request, Response
+import logging
+
+from localstack.http import Request, Response, route
 
 from .. import static
 
+LOG = logging.getLogger(__name__)
+
+
 class WebApp:
     @route("/")
     def index(self, request: Request, *args, **kwargs):
         return Response.for_resource(static, "index.html")
-    
+
     @route("/<path:path>")
     def index2(self, request: Request, path: str, **kwargs):
-        return Response.for_resource(static, path)
+        try:
+            return Response.for_resource(static, path)
+        except Exception:
+            LOG.debug(f"File {path} not found, serving index.html")
+            return Response.for_resource(static, "index.html")

templates/react/{{cookiecutter.project_slug}}/frontend/package.json

@@ -8,9 +8,6 @@
     "@emotion/styled": "^11.11.5",
     "@localstack/integrations": "^1.0.0",
     "@mui/material": "^5.15.20",
-    "@testing-library/react": "^13.4.0",
-    "@types/node": "^16.18.99",
-    "@types/react-dom": "^17.0.11",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.24.0",
@@ -19,6 +16,10 @@
   },
   "devDependencies": {
     "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
+    "@testing-library/react": "^13.4.0",
+    "@types/node": "^16.18.99",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^17.0.11",
     "concurrently": "^8.2.2",
     "esbuild": "^0.16.6",
     "esbuild-envfile-plugin": "^1.0.2",

templates/react/{{cookiecutter.project_slug}}/frontend/src/constants.ts

@@ -1,25 +1,14 @@
-import ReactDOM from 'react-dom';
-import './index.css';
-import { CustomRoutes } from './CustomRoutes';
-import { BrowserRouter } from 'react-router-dom';
-import { LocalStackThemeProvider } from '@localstack/integrations'
-import { DEVELOPMENT_ENVIRONMENT } from './constants';
-
-const EXTENSION_NAME = '{{cookiecutter.project_slug}}'
-
-const getBaseName = () => {
-  if (window.location.origin.includes(EXTENSION_NAME) || DEVELOPMENT_ENVIRONMENT) {
-    return '';
-  }
-
-  return `/_extension/${EXTENSION_NAME}`;
-};
+import ReactDOM from "react-dom";
+import "./index.css";
+import { CustomRoutes } from "./CustomRoutes";
+import { HashRouter } from "react-router-dom";
+import { LocalStackThemeProvider } from "@localstack/integrations";
 
 ReactDOM.render(
   <LocalStackThemeProvider useExtensionLayout>
-    <BrowserRouter basename={getBaseName()}>
+    <HashRouter>
       <CustomRoutes />
-    </BrowserRouter >
+    </HashRouter>
   </LocalStackThemeProvider>,
-  document.getElementById('root'),
+  document.getElementById("root")
 );