Is there a general way to run Web Applications on Google Colab?

Question

I would like to develop web apps in Google colab. The only issue is that you need a browser connected to local host to view the web app, but Google colab doesn't have a browser inside the notebook.

But it seems that there are ways around this. For example run_with_ngrok is a library for running flaks apps in colab/jupyter notebooks

https://github.com/gstaff/flask-ngrok#inside-jupyter--colab-notebooks

When you use it, it gives a random address , "Running on http://.ngrok.io"

And somehow the webapp that's running on Google colab is running on that address.

This is a great solution for Flask apps, but I am looking to run webapps in general on Google Colab, not just Flask ones. Is there a general method for running webapps in colab/jupyter notebooks?

Answer 1

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.