Is there a general way to run Web Applications on Google Colab?
Answer is found here
Launch a Dash app in a Google Colab Notebook
### Install ngrok
!wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip
!unzip ngrok-stable-linux-amd64.zip
### Run ngrok to tunnel Dash app port 8050 to the outside world.
### This command runs in the background.
get_ipython().system_raw('./ngrok http 8050 &')
### Get the public URL where you can access the Dash app. Copy this URL.
! curl -s http://localhost:4040/api/tunnels | python3 -c \
"import sys, json; print(json.load(sys.stdin)['tunnels'][0]['public_url'])"
Then launch your webapp on port 8050
You can plan to start a server on a port, e.g. port=8000. Find the URL to use this way.
from google.colab.output import eval_js
print(eval_js("google.colab.kernel.proxyPort(8000)"))
# https://z4spb7cvssd-496ff2e9c6d22116-8000-colab.googleusercontent.com/
Then, start the server, e.g.
!python -m http.server 8000
And click the first link above (instead of localhost or 127.0.0.1), it will open in a new tab.
Display in cell
You can display the result in an iframe in the output part. I made it into an easy function to call.
from IPython.display import Javascript
def show_port(port, height=400):
display(Javascript("""
(async ()=>{
fm = document.createElement('iframe')
fm.src = await google.colab.kernel.proxyPort(%s)
fm.width = '95%%'
fm.height = '%d'
fm.frameBorder = 0
document.body.append(fm)
})();
""" % (port, height) ))
Now you can start a webapp (here it is http.server) in a background. And display the result as an iframe below it.
get_ipython().system_raw('python3 -m http.server 8888 &')
show_port(8888)
To stop the server, you can call ps
and kill the process.