use sirv with spa fallback (#5711)

* use sirv with spa fallback

* don't get rid of 404

* define spa fallback

* bruh

Author: adhami3310

pyi_hashes.json

@@ -14,7 +14,6 @@
   "reflex/components/core/__init__.pyi": "007170b97e58bdf28b2aee381d91c0c7",
   "reflex/components/core/auto_scroll.pyi": "10c4cf71d0d0c1d46a8e1205bd119c11",
   "reflex/components/core/banner.pyi": "3c07547afc4f215aefd5e5afa409aa25",
-  "reflex/components/core/client_side_routing.pyi": "57a7917e993f625c623bcef50b60b804",
   "reflex/components/core/clipboard.pyi": "a844eb927d9bc2a43f5e88161b258539",
   "reflex/components/core/debounce.pyi": "055da7aa890f44fb4d48bd5978f1a874",
   "reflex/components/core/helmet.pyi": "43f8497c8fafe51e29dca1dd535d143a",

reflex/.templates/web/app/routes.js

@@ -2,7 +2,6 @@ import { route } from "@react-router/dev/routes";
 import { flatRoutes } from "@react-router/fs-routes";
 
 export default [
-  route("404", "routes/[404]._index.jsx", { id: "404" }),
   ...(await flatRoutes({
     ignoredRouteFiles: ["routes/\\[404\\]._index.jsx"],
   })),

reflex/.templates/web/utils/client_side_routing.js

@@ -67,10 +67,6 @@
     connection_toaster,
 )
 from reflex.components.core.breakpoints import set_breakpoints
-from reflex.components.core.client_side_routing import (
-    default_404_page,
-    wait_for_client_redirect,
-)
 from reflex.components.core.sticky import sticky
 from reflex.components.core.upload import Upload, get_upload_dir
 from reflex.components.radix import themes
@@ -775,8 +771,10 @@ def add_page(
 
         if route == constants.Page404.SLUG:
             if component is None:
-                component = default_404_page
-            component = wait_for_client_redirect(self._generate_component(component))
+                from reflex.components.el.elements import span
+
+                component = span("404: Page not found")
+            component = self._generate_component(component)
             title = title or constants.Page404.TITLE
             description = description or constants.Page404.DESCRIPTION
             image = image or constants.Page404.IMAGE
@@ -1312,7 +1310,9 @@ def memoized_toast_provider():
                 self.head_components,
                 html_lang=self.html_lang,
                 html_custom_attrs=(
-                    {**self.html_custom_attrs} if self.html_custom_attrs else {}
+                    {"suppressHydrationWarning": "true", **self.html_custom_attrs}
+                    if self.html_custom_attrs
+                    else {"suppressHydrationWarning": "true"}
                 ),
             )
         )

reflex/app.py

@@ -174,6 +174,8 @@ class ReactRouter(Javascript):
         rf"(?:{DEV_FRONTEND_LISTENING_REGEX}|{PROD_FRONTEND_LISTENING_REGEX})(.*)"
     )
 
+    SPA_FALLBACK = "__spa-fallback.html"
+
 
 # Color mode variables
 class ColorMode(SimpleNamespace):

reflex/components/core/client_side_routing.py

@@ -106,7 +106,7 @@ class Commands(SimpleNamespace):
 
         DEV = "react-router dev --host"
         EXPORT = "react-router build"
-        PROD = "serve ./build/client"
+        PROD = "sirv ./build/client --single 404.html --host"
 
     PATH = "package.json"
 
@@ -127,7 +127,7 @@ def DEPENDENCIES(cls) -> dict[str, str]:
             "react-router": cls._react_router_version,
             "react-router-dom": cls._react_router_version,
             "@react-router/node": cls._react_router_version,
-            "serve": "14.2.4",
+            "sirv-cli": "3.0.1",
             "react": cls._react_version,
             "react-helmet": "6.1.0",
             "react-dom": cls._react_version,

reflex/constants/base.py

@@ -1008,7 +1008,7 @@ def _run_frontend(self):
             / reflex.constants.Dirs.STATIC
         )
         error_page_map = {
-            404: web_root / "404" / "index.html",
+            404: web_root / "404.html",
         }
         with Subdir404TCPServer(
             ("", 0),

reflex/constants/installer.py

@@ -200,6 +200,10 @@ def build():
     )
     processes.show_progress("Creating Production Build", process, checkpoints)
     _duplicate_index_html_to_parent_dir(wdir / constants.Dirs.STATIC)
+    path_ops.cp(
+        wdir / constants.Dirs.STATIC / constants.ReactRouter.SPA_FALLBACK,
+        wdir / constants.Dirs.STATIC / "404.html",
+    )
 
 
 def setup_frontend(