fix: propagate frontend_path to base in vite.config.js (#5677)

Author: tartansandal

reflex/.templates/web/vite.config.js …emplates/jinja/web/vite.config.js.jinja2reflex/.templates/web/vite.config.js renamed to reflex/.templates/jinja/web/vite.config.js.jinja2 reflex/.templates/web/vite.config.js renamed to reflex/.templates/jinja/web/vite.config.js.jinja2

@@ -25,6 +25,7 @@ function alwaysUseReactDomServerNode() {
 }
 
 export default defineConfig((config) => ({
+  base: "{{base}}",
   plugins: [
     alwaysUseReactDomServerNode(),
     reactRouter(),

reflex/compiler/templates.py

@@ -149,6 +149,9 @@ def from_string(source: str) -> Template:
 # Code that generate the package json file
 PACKAGE_JSON = get_template("web/package.json.jinja2")
 
+# Code that generate the vite.config.js file
+VITE_CONFIG = get_template("web/vite.config.js.jinja2")
+
 # Template containing some macros used in the web pages.
 MACROS = get_template("web/pages/macros.js.jinja2")
 

reflex/constants/base.py

@@ -160,6 +160,9 @@ class ReactRouter(Javascript):
     # The react router config file
     CONFIG_FILE = "react-router.config.js"
 
+    # The associated Vite config file
+    VITE_CONFIG_FILE = "vite.config.js"
+
     # Regex to check for message displayed when frontend comes up
     DEV_FRONTEND_LISTENING_REGEX = r"Local:[\s]+"
 

reflex/utils/prerequisites.py

@@ -972,6 +972,9 @@ def initialize_web_directory():
     console.debug("Initializing the react-router.config.js file.")
     update_react_router_config()
 
+    console.debug("Initializing the vite.config.js file.")
+    initialize_vite_config()
+
     console.debug("Initializing the reflex.json file.")
     # Initialize the reflex json file.
     init_reflex_json(project_hash=project_hash)
@@ -996,6 +999,20 @@ def initialize_package_json():
     output_path.write_text(_compile_package_json())
 
 
+def _compile_vite_config(config: Config):
+    # base must have exactly one trailing slash
+    base = "/"
+    if frontend_path := config.frontend_path.strip("/"):
+        base += frontend_path + "/"
+    return templates.VITE_CONFIG.render(base=base)
+
+
+def initialize_vite_config():
+    """Render and write in .web the vite.config.js file using Reflex config."""
+    vite_config_file_path = get_web_dir() / constants.ReactRouter.VITE_CONFIG_FILE
+    vite_config_file_path.write_text(_compile_vite_config(get_config()))
+
+
 def initialize_bun_config():
     """Initialize the bun config file."""
     bun_config_path = get_web_dir() / constants.Bun.CONFIG_PATH

tests/units/test_prerequisites.py

@@ -10,6 +10,7 @@
 from reflex.testing import chdir
 from reflex.utils.prerequisites import (
     CpuInfo,
+    _compile_vite_config,
     _update_react_router_config,
     cached_procedure,
     get_cpu_info,
@@ -59,6 +60,37 @@ def test_update_react_router_config(config, export, expected_output):
     assert output == expected_output
 
 
+@pytest.mark.parametrize(
+    ("config", "expected_output"),
+    [
+        (
+            Config(
+                app_name="test",
+                frontend_path="",
+            ),
+            'base: "/",',
+        ),
+        (
+            Config(
+                app_name="test",
+                frontend_path="/test",
+            ),
+            'base: "/test/",',
+        ),
+        (
+            Config(
+                app_name="test",
+                frontend_path="/test/",
+            ),
+            'base: "/test/",',
+        ),
+    ],
+)
+def test_initialise_vite_config(config, expected_output):
+    output = _compile_vite_config(config)
+    assert expected_output in output
+
+
 def test_cached_procedure():
     call_count = 0