Deploy H2O Wave application to Heroku? - heroku

Question

I am relatively new to deploying python web applications but I was trying to deploy my H2O wave app to Heroku but kept running into issues and I couldn't find much help in the documentation.
Everything works fine locally if I start the server using the command (in the SDK for wave):
$ ./waved
2021/01/22 10:26:38 #
2021/01/22 10:26:38 # ┌─────────────────────────┐
2021/01/22 10:26:38 # │ ┌ ┌ ┌──┐ ┌ ┌ ┌──┐ │ H2O Wave
2021/01/22 10:26:38 # │ │ ┌──┘ │──│ │ │ └┐ │ 0.11.0 20210118061246
2021/01/22 10:26:38 # │ └─┘ ┘ ┘ └──┘ └─┘ │ © 2020 H2O.ai, Inc.
2021/01/22 10:26:38 # └─────────────────────────┘
2021/01/22 10:26:38 #
2021/01/22 10:26:38 # {"address":":10101","t":"listen","webroot":"/Users/kenjohnson/Documents/TTT/H2O Wave/wave/www"}
2021/01/22 10:26:39 # {"addr":"127.0.0.1:64065","route":"/tennis-pred","t":"ui_add"}
2021/01/22 10:46:04 # {"host":"http://127.0.0.1:8000","route":"/counter","t":"app_add"}
then in the root directory of the project running:
uvicorn tennis_pred_app:main
For deployment, all I have other than my wave python file is a requirements.txt and a Procfile:
web: uvicorn tennis_pred_app:main --host 0.0.0.0 --port 10101
this is what my foo (tennis_pred_app.py) looks like (simplified):
from h2o_wave import Q, main, app, ui
#app("/tennis-pred")
async def serve(q: Q):
show_form(q)
await q.page.save()
The error I am currently running into is:
2021-01-22T00:28:41.000000+00:00 app[api]: Build started by user x
2021-01-22T00:31:07.040695+00:00 heroku[web.1]: State changed from crashed to starting
2021-01-22T00:31:06.879674+00:00 app[api]: Deploy 1dc65130 by user x
2021-01-22T00:31:06.879674+00:00 app[api]: Release v23 created by user x
2021-01-22T00:31:26.580199+00:00 heroku[web.1]: Starting process with command `uvicorn tennis_pred_app:main --host 0.0.0.0 --port 20819`
2021-01-22T00:31:30.299421+00:00 app[web.1]: INFO: Uvicorn running on http://0.0.0.0:20819 (Press CTRL+C to quit)
2021-01-22T00:31:30.299892+00:00 app[web.1]: INFO: Started parent process [4]
2021-01-22T00:31:46.000000+00:00 app[api]: Build succeeded
2021-01-22T00:32:27.041954+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2021-01-22T00:32:27.093099+00:00 heroku[web.1]: Stopping process with SIGKILL
2021-01-22T00:32:27.199933+00:00 heroku[web.1]: Process exited with status 137
2021-01-22T00:32:27.242769+00:00 heroku[web.1]: State changed from starting to crashed

Answer 1

You don't get to choose your port on Heroku. Instead, Heroku assigns you a port via the PORT environment variable.
Change your Procfile from
web: uvicorn foo:main --host 0.0.0.0 --port 10101
to
web: uvicorn foo:main --host 0.0.0.0 --port $PORT

Answer 2

See this blog post for the exact guide.
More explanation for why the other answer is generally correct but does not apply to H2O Wave:
If you look at architecture, you may notice there are actually 2 servers included. The first is a python (uvicorn) one that is used for your Wave app - this is not exposed to the outside directly but uses a kind of a proxy server - the second server. This second (Golang) server communicates directly with a browser (outside) and thus should be started on the $PORT Heroku assigned to you, e.g. via the H2O_WAVE_LISTEN env variable - see other config options.