How to deploy as a web application?

[crxi]

Firstly, a big THANK YOU to @ramedina86 for making GUI development fun and efficient again!

I am creating a KNN demo for teaching purposes. Initially I tried Anvil (https://knn-demo.anvil.app/). Then Dash on Jupyter. Both experience was so-so. By chance, I came across StreamSync (the pigeon demo) and decided to give it a try. It was AWESOME! I love the separation of UI from backend code and the elegant UI designer.

So my KNN demo in StreamSync is now on GitHub (https://github.com/crxi/knn). I am looking for a way to deploy it (like the Anvil version). How do I go about doing that? Do I have to run it in Docker and host it on Google cloud? I am looking for a low-cost solution so that I can let my students interact with it instead of just watching me demo it over Zoom lessons. Any advice is appreciated.

[FabienArcellier]

Hi @crxi, I have developped a blueprint that show on how to use streamsync inside gitpod. gitpod should match your usecase to allow students to start an environment from your code and play with it on a sandbox.

If you want to release an application, you have to package it. We don't have option yet to host automatically streamsync project. It's recommended to use it with docker.

[FabienArcellier]

I can open a PR on your repo to implement this mechanism if it may help you. Let me know

[ramedina86]

Thanks @crxi that's an incredible compliment! I'm glad you find it useful.

I encourage you to try the approach @FabienArcellier mentioned. When I first tried it I couldn't believe how straightforward it was.

On Google Cloud (and Azure) you can deploy for free if you size it appropriately, check the free tiers.

In the future (few months from now, at least), we'll likely be able to allow users to deploy to our own cloud, using a command like streamsync deploy. For now, I agree that deployment isn't as straightforward as with something like Anvil (but the Gitpod approach comes close).

[crxi]

Thanks @FabienArcellier and @ramedina86 for the replies. I tried pip install streamsync on gitpod and it failed for some reason.

Anyway the good news is I figured out how to do it on render.com! Here are two apps:

• https://knn-with-streamsync.onrender.com/
• https://wwt-with-streamsync.onrender.com/

The steps are easy. Add requirements.txt and serve.py (as documented in streamsync doc) and have "python serve.py" as the execution command on Render. See https://github.com/crxi/knn and See https://github.com/crxi/wwt for the code.

The next thing I want to do is to combine them into one repository so that both apps can be served out by one instance of the webservice. I tried the script for FastAPI as shown here (https://www.streamsync.cloud/custom-server.html#multiple-apps-at-once) but it failed with "SyntaxError: Unexpected token 'I', "Internal S"... is not valid JSON" when I go to https://127.0.0.1:3333/knn on my local PC.

Are the instructions/script on that page correct? I can't find much info about multi-app deployment on the net. Here is my serve.py for the combined app.

import argparse
import uvicorn
import streamsync.serve
from fastapi import FastAPI, Response

parser = argparse.ArgumentParser(description='serve.py')
parser.add_argument('--loglevel', type=str, default='info',
                    help='Log level for the server script')
args = parser.parse_args()

root_asgi_app = FastAPI()
knn_app = streamsync.serve.get_asgi_app("./knn", "run")
wwt_app = streamsync.serve.get_asgi_app("./wwt", "run")

root_asgi_app.mount("/knn", knn_app)
root_asgi_app.mount("/wwt", wwt_app)

@root_asgi_app.get("/")
async def init():
    return Response("""
    <h1>Welcome to ML Demo</h1>
    """)

uvicorn.run(root_asgi_app,
    host="0.0.0.0",
    port=3333,
    log_level=args.loglevel,
    ws_max_size=streamsync.serve.MAX_WEBSOCKET_MESSAGE_SIZE)

[FabienArcellier]

Hi @crxi,

That great you find a way to run it on Renders.

I have already noticed this problem in #186 (comment). I did not document it and I did not open an issue to fix it. We use a FastAPI mechanism called lifespan which is incompatible with sub asgi application.

We need to adapt your code to make your program work. Cloud you try that and tell me if it's work fine ?

import argparse
from contextlib import asynccontextmanager

import uvicorn
import streamsync.serve
from fastapi import FastAPI, Response

parser = argparse.ArgumentParser(description='serve.py')
parser.add_argument('--loglevel', type=str, default='info',
                    help='Log level for the server script')
args = parser.parse_args()

knn_app = streamsync.serve.get_asgi_app("./knn", "run")
wwt_app = streamsync.serve.get_asgi_app("./wwt", "run")


@asynccontextmanager
async def lifespan_context(app: FastAPI):
    async with knn_app.router.lifespan_context(app):
        async with wwt_app.router.lifespan_context(app):
            yield

root_asgi_app = FastAPI(lifespan=lifespan_context)
root_asgi_app.mount("/knn", knn_app)
root_asgi_app.mount("/wwt", wwt_app)

@root_asgi_app.get("/")
async def init():
    return Response("""
    <h1>Welcome to ML Demo</h1>
    """)

uvicorn.run(root_asgi_app,
    host="0.0.0.0",
    port=3333,
    log_level=args.loglevel,
    ws_max_size=streamsync.serve.MAX_WEBSOCKET_MESSAGE_SIZE)

[crxi]

Thanks @FabienArcellier! That worked really well! See https://mldemo.onrender.com. It combines both demos now.

[FabienArcellier]

The result feels amazing 🥳. I really enjoy trying it.

If you want to share your work with student, I would advocate to try again on gitpod it shoud amaze you how it would be easy for your student to leverage and tune your apps. If you feel curious, contact me through discord.

[crxi]

Thanks for your help! I will give gitpod another shot in the coming weeks. Didn't seem to get it right the first time.

Right now I just need something that works to explain concepts to my students. 🤣

[ramedina86]

We really liked your app and discussed it during our scrum today. Thanks for sharing!