Merge pull request #19 from morph-data/fix/frontend-architecture

fix: run frontend project in local .morph/frontend directory

core/morph/api/app.py

@@ -22,37 +22,10 @@
 from morph.api.error import ApiBaseError, InternalError
 from morph.api.handler import router
 
-# TODO: clean build process & use mangum for lambda
-
 # configuration values
-build_required = os.getenv("MORPH_FRONT_BUILD", "false")
-host = os.getenv("MORPH_UVICORN_HOST", "0.0.0.0")
-port = os.getenv("MORPH_UVICORN_PORT", "9002")
-server_url = f"http://{host}:{port}"
-front_url = "http://localhost:3000"
-token = "dummy"
-environment = "development"
-entrypoint_filename = "main.tsx"
-template_dir = os.path.join(Path(__file__).resolve().parent, "templates", "development")
-
-if build_required == "true":
-    environment = "production"
-    entrypoint_filename = "main-prod.tsx"
-    template_dir = os.path.join(
-        Path(__file__).resolve().parent, "templates", "production"
-    )
-else:
-    init_index_template_path = os.path.join(
-        Path(__file__).resolve().parent, "templates", "index.html"
-    )
-    with open(init_index_template_path, "r") as f:
-        content = f.read()
-        content = content.replace("FRONT_URL", front_url)
-    index_template = os.path.join(template_dir, "index.html")
-    with open(index_template, "w") as f:
-        f.write(content)
 
-templates = Jinja2Templates(directory=template_dir)
+# set true to MORPH_LOCAL_DEV_MODE to use local frontend server
+is_local_dev_mode = True if os.getenv("MORPH_LOCAL_DEV_MODE") == "true" else False
 
 app = FastAPI()
 app.add_middleware(SessionMiddleware, secret_key="secret_key")
@@ -65,34 +38,52 @@
     inertia_request_validation_exception_handler,
 )
 
-frontend_dir = os.path.join(Path(__file__).resolve().parents[1], "frontend")
-
-manifest_json = os.path.join(frontend_dir, "dist", "manifest.json")
-inertia_config = InertiaConfig(
-    templates=templates,
-    manifest_json_path=manifest_json,
-    environment=environment,
-    use_flash_messages=True,
-    use_flash_errors=True,
-    entrypoint_filename=entrypoint_filename,
-    assets_prefix="/src",
-    dev_url=front_url,
-)
-InertiaDep = Annotated[Inertia, Depends(inertia_dependency_factory(inertia_config))]
+frontend_dir = os.path.join(os.getcwd(), ".morph", "frontend")
+
+
+def get_inertia_config():
+    templates_dir = os.path.join(Path(__file__).resolve().parent, "templates")
+
+    if is_local_dev_mode:
+        frontend_url = "http://localhost:3000"  # TODO: 被ったらずらす
+        templates = Jinja2Templates(directory=templates_dir)
+        templates.env.globals["local_dev_mode"] = True
+        templates.env.globals["frontend_url"] = frontend_url
+
+        return InertiaConfig(
+            templates=templates,
+            environment="development",
+            use_flash_messages=True,
+            use_flash_errors=True,
+            entrypoint_filename="main.tsx",
+            assets_prefix="/src",
+            dev_url=frontend_url,
+        )
+
+    return InertiaConfig(
+        templates=Jinja2Templates(directory=templates_dir),
+        manifest_json_path=os.path.join(frontend_dir, "dist", "manifest.json"),
+        environment="production",
+        entrypoint_filename="main.tsx",
+    )
 
-frontend_dir = (
-    os.path.join(frontend_dir, "dist")
-    if inertia_config.environment != "development"
-    else os.path.join(frontend_dir, "src")
-)
 
-app.mount("/src", StaticFiles(directory=frontend_dir), name="src")
-app.mount(
-    "/assets",
-    StaticFiles(directory=os.path.join(frontend_dir, "assets")),
-    name="assets",
-)
+inertia_config = get_inertia_config()
 
+InertiaDep = Annotated[Inertia, Depends(inertia_dependency_factory(inertia_config))]
+
+if is_local_dev_mode:
+    app.mount(
+        "/src",
+        StaticFiles(directory=os.path.join(frontend_dir, "src")),
+        name="src",
+    )
+else:
+    app.mount(
+        "/assets",
+        StaticFiles(directory=os.path.join(frontend_dir, "dist", "assets")),
+        name="assets",
+    )
 
 app.add_middleware(
     CORSMiddleware,
@@ -137,8 +128,8 @@ async def index(inertia: InertiaDep) -> InertiaResponse:
     return await inertia.render(
         "index",
         {
-            "baseUrl": server_url,
-            "token": token,
+            "baseUrl": "/",
+            "token": "dummy",
         },
     )
 
@@ -155,15 +146,10 @@ async def health_check():
 
 @app.get("/{full_path:path}", response_model=None)
 async def subpages(full_path: str, inertia: InertiaDep) -> InertiaResponse:
-    cwd = os.getcwd()
-    pages_dir = os.path.join(cwd, "src", "pages")
-    if not os.path.exists(os.path.join(pages_dir, f"{full_path}.mdx")):
-        return await inertia.render("404")
-
     return await inertia.render(
         full_path,
         {
-            "baseUrl": server_url,
-            "token": token,
+            "baseUrl": "/",
+            "token": "dummy",
         },
     )

core/morph/api/templates/index.html

@@ -1,16 +1,22 @@
 <!DOCTYPE html>
 <html>
-    <head>
+  <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     {% inertia_head %}
+
+    <!-- For Vite -->
+
+    {% if local_dev_mode and frontend_url %}
     <script type="module">
-      import RefreshRuntime from "FRONT_URL/@react-refresh";
+      import RefreshRuntime from "{{ frontend_url }}/@react-refresh";
       RefreshRuntime.injectIntoGlobalHook(window);
       window.$RefreshReg$ = () => {};
       window.$RefreshSig$ = () => (type) => type;
       window.__vite_plugin_react_preamble_installed__ = true;
     </script>
+    {% endif %}
+
     <script src="https://cdn.tailwindcss.com"></script>
   </head>
   <body>

core/morph/cli/main.py

@@ -172,6 +172,7 @@ def sync(
 @params.stop
 @params.build
 @params.no_log
+@params.preview
 @click.pass_context
 @global_flags
 @requires.preflight

core/morph/cli/params.py

@@ -251,3 +251,9 @@ def convert_value(val: str) -> Any:
     type=str,
     help="Specify the project id.",
 )
+
+preview = click.option(
+    "--preview",
+    is_flag=True,
+    help="Serve application with pre-built frontend assets locally to simulate a production environment for testing.",
+)