get starlette and tornado to work

Author: rmorshea

src/client/package-lock.json

@@ -1,6 +1,6 @@
 {
   "devDependencies": {
-    "snowpack": "^3.5.2"
+    "snowpack": "^3.0.11"
   },
   "license": "MIT",
   "repository": {

src/client/package.json

@@ -2,8 +2,7 @@
   "author": "Ryan Morshead",
   "dependencies": {
     "idom-client-react": "file:packages/idom-client-react",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "preact": "^10.7.0"
   },
   "description": "A client application for IDOM implemented in React",
   "devDependencies": {

src/client/packages/idom-app-react/package-lock.json

@@ -4,7 +4,6 @@ export function mount(mountPoint) {
   const serverInfo = new LayoutServerInfo({
     host: document.location.hostname,
     port: document.location.port,
-    path: "../",
     query: queryParams.user.toString(),
     secure: document.location.protocol == "https:",
   });

src/client/packages/idom-app-react/package.json

@@ -8,7 +8,11 @@ export function mountWithLayoutServer(
   maxReconnectTimeout
 ) {
   const loadImportSource = (source, sourceType) =>
-    import(sourceType == "NAME" ? serverInfo.path.module(source) : source);
+    import(
+      sourceType == "NAME" ? serverInfo.path.module(source) : source
+    ).catch(() => {
+      console.error("Import failed");
+    });
 
   mountLayoutWithWebSocket(
     element,
@@ -18,13 +22,13 @@ export function mountWithLayoutServer(
   );
 }
 
-export function LayoutServerInfo({ host, port, path, query, secure }) {
+export function LayoutServerInfo({ host, port, query, secure }) {
   const wsProtocol = "ws" + (secure ? "s" : "");
   const httpProtocol = "http" + (secure ? "s" : "");
 
   const uri = host + ":" + port;
-  path = new URL(path, document.baseURI).pathname;
-  const url = (uri + path).split("/").slice(0, -1).join("/");
+  const path = new URL(document.baseURI).pathname;
+  const url = uri + path;
 
   const wsBaseUrl = wsProtocol + "://" + url;
   const httpBaseUrl = httpProtocol + "://" + url;
@@ -36,7 +40,7 @@ export function LayoutServerInfo({ host, port, path, query, secure }) {
   }
 
   this.path = {
-    stream: wsBaseUrl + "/stream" + query,
+    stream: wsBaseUrl + "/_stream" + query,
     module: (source) => httpBaseUrl + `/modules/${source}`,
   };
 }

src/client/packages/idom-app-react/src/index.js

@@ -4,4 +4,8 @@ module.exports = {
   buildOptions: { out: "../idom/client" },
   mount: { public: { url: "/", static: true } },
   optimize: { bundle: true, target: "es2018" },
+  alias: {
+    react: "preact/compat",
+    "react-dom": "preact/compat",
+  },
 };

src/client/packages/idom-client-react/src/server.js

@@ -3,6 +3,7 @@
 import asyncio
 import json
 import logging
+import os
 from asyncio import Queue as AsyncQueue
 from dataclasses import dataclass
 from queue import Queue as ThreadQueue
@@ -33,7 +34,7 @@
 from idom.core.serve import serve_json_patch
 from idom.core.types import ComponentType, RootComponentConstructor
 
-from .utils import CLIENT_BUILD_DIR
+from .utils import CLIENT_BUILD_DIR, client_build_dir_path
 
 
 logger = logging.getLogger(__name__)
@@ -55,14 +56,20 @@ def configure(
     """
     options = options or Options()
     blueprint = Blueprint("idom", __name__, url_prefix=options.url_prefix)
+
     _setup_common_routes(blueprint, options)
+
+    # this route should take priority so set up it up first
     _setup_single_view_dispatcher_route(app, options, component)
+
     app.register_blueprint(blueprint)
 
 
 def create_development_app() -> Flask:
     """Create an application instance for development purposes"""
-    return Flask(__name__)
+    os.environ["FLASK_DEBUG"] = "true"
+    app = Flask(__name__)
+    return app
 
 
 async def serve_development_app(
@@ -154,9 +161,13 @@ def _setup_common_routes(blueprint: Blueprint, options: Options) -> None:
 
     if options.serve_static_files:
 
-        @blueprint.route("/client/<path:path>")
-        def send_client_dir(path: str) -> Any:
-            return send_from_directory(str(CLIENT_BUILD_DIR), path)
+        @blueprint.route("/app")
+        @blueprint.route("/app<path:path>")
+        def send_client_dir(path: str = "") -> Any:
+            return send_from_directory(
+                str(CLIENT_BUILD_DIR),
+                client_build_dir_path(path),
+            )
 
         @blueprint.route("/modules/<path:path>")
         def send_modules_dir(path: str) -> Any:
@@ -167,11 +178,7 @@ def send_modules_dir(path: str) -> Any:
             @blueprint.route("/")
             def redirect_to_index() -> Any:
                 return redirect(
-                    url_for(
-                        "idom.send_client_dir",
-                        path="index.html",
-                        **request.args,
-                    )
+                    url_for("idom.send_client_dir", path="", **request.args)
                 )
 
 
@@ -180,7 +187,7 @@ def _setup_single_view_dispatcher_route(
 ) -> None:
     sockets = Sockets(app)
 
-    @sockets.route(_join_url_paths(options.url_prefix, "/stream"))  # type: ignore
+    @sockets.route(_join_url_paths(options.url_prefix, "/app<path:path>/_stream"))  # type: ignore
     def model_stream(ws: WebSocket) -> None:
         def send(value: Any) -> None:
             ws.send(json.dumps(value))

src/client/snowpack.config.js

@@ -41,8 +41,12 @@ def configure(
     """Configure an application instance to display the given component"""
     options = options or Options()
     blueprint = Blueprint(f"idom_dispatcher_{id(app)}", url_prefix=options.url_prefix)
+
     _setup_common_routes(blueprint, options)
+
+    # this route should take priority so set up it up first
     _setup_single_view_dispatcher_route(blueprint, component)
+
     app.blueprint(blueprint)
 
 
@@ -108,7 +112,7 @@ def _setup_common_routes(blueprint: Blueprint, options: Options) -> None:
         CORS(blueprint, **cors_params)
 
     if options.serve_static_files:
-        blueprint.static("/client", str(CLIENT_BUILD_DIR))
+        blueprint.static("/app", str(CLIENT_BUILD_DIR))
         blueprint.static("/modules", str(IDOM_WEB_MODULES_DIR.current))
 
         if options.redirect_root:
@@ -125,7 +129,7 @@ def redirect_to_index(
 def _setup_single_view_dispatcher_route(
     blueprint: Blueprint, constructor: RootComponentConstructor
 ) -> None:
-    @blueprint.websocket("/stream")  # type: ignore
+    @blueprint.websocket("/app<path:path>/_stream")  # type: ignore
     async def model_stream(
         request: request.Request, socket: WebSocketCommonProtocol
     ) -> None:

src/idom/server/flask.py

@@ -11,7 +11,7 @@
 from starlette.requests import Request
 from starlette.responses import RedirectResponse
 from starlette.staticfiles import StaticFiles
-from starlette.types import Scope
+from starlette.types import Receive, Scope, Send
 from starlette.websockets import WebSocket, WebSocketDisconnect
 
 from idom.config import IDOM_WEB_MODULES_DIR
@@ -26,7 +26,7 @@
 from idom.core.types import RootComponentConstructor
 
 from ._asgi import serve_development_asgi
-from .utils import CLIENT_BUILD_DIR
+from .utils import CLIENT_BUILD_DIR, client_build_dir_path
 
 
 logger = logging.getLogger(__name__)
@@ -51,9 +51,12 @@ def configure(
         options: Options for configuring server behavior
     """
     options = options or Options()
-    _setup_common_routes(options, app)
+
+    # this route should take priority so set up it up first
     _setup_single_view_dispatcher_route(options.url_prefix, app, constructor)
 
+    _setup_common_routes(options, app)
+
 
 def create_development_app() -> Starlette:
     """Return a :class:`Starlette` app instance in debug mode"""
@@ -116,39 +119,53 @@ def _setup_common_routes(options: Options, app: Starlette) -> None:
     # This really should be added to the APIRouter, but there's a bug in Starlette
     # BUG: https://github.com/tiangolo/fastapi/issues/1469
     url_prefix = options.url_prefix
+
     if options.serve_static_files:
-        app.mount(
-            f"{url_prefix}/client",
-            StaticFiles(
-                directory=str(CLIENT_BUILD_DIR),
-                html=True,
-                check_dir=True,
-            ),
-            name="idom_client_files",
-        )
+
+        mount_serve_single_page_app_files(app, url_prefix)
+
         app.mount(
             f"{url_prefix}/modules",
             StaticFiles(
                 directory=str(IDOM_WEB_MODULES_DIR.current),
                 html=True,
                 check_dir=False,
             ),
-            name="idom_web_module_files",
         )
 
         if options.redirect_root:
 
-            @app.route(f"{url_prefix}/")
+            @app.route(url_prefix or "/")
             def redirect_to_index(request: Request) -> RedirectResponse:
-                return RedirectResponse(
-                    f"{url_prefix}/client/index.html?{request.query_params}"
-                )
+                redirect_url = url_prefix + "/app"
+                if request.query_params:
+                    redirect_url = f"{url_prefix}/app?{request.query_params}"
+                else:
+                    redirect_url = f"{url_prefix}/app"
+                return RedirectResponse(redirect_url)
+
+
+def mount_serve_single_page_app_files(app: Starlette, url_prefix: str) -> None:
+    asgi_app = StaticFiles(
+        directory=CLIENT_BUILD_DIR,
+        html=True,
+        check_dir=False,
+    )
+
+    async def spa_app(scope: Scope, receive: Receive, send: Send) -> None:
+        return await asgi_app(
+            {**scope, "path": client_build_dir_path(scope["path"])},
+            receive,
+            send,
+        )
+
+    app.mount(url_prefix + "/app", spa_app)
 
 
 def _setup_single_view_dispatcher_route(
     url_prefix: str, app: Starlette, constructor: RootComponentConstructor
 ) -> None:
-    @app.websocket_route(f"{url_prefix}/stream")
+    @app.websocket_route(url_prefix + "/app{path:path}/_stream")
     async def model_stream(socket: WebSocket) -> None:
         await socket.accept()
         send, recv = _make_send_recv_callbacks(socket)