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 bro

Answer 1

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

Answer 2

Here is an example that illustrates starting a webserver and serving resources to a Colab output frame.

https://colab.research.google.com/notebooks/snippets/advanced_outputs.ipynb#scrollTo=R8ZvCXC5A0wT

Colab caches served outputs so that notebooks will render without reexecution. For live servers, users will need to reexecute the code to start the server. But, afterwards, Colab will proxy requests from the output frame that reference localhost to the Colab backend.

Answer 3

The below solution, explains

1. running the python script/API in the background
2. Get a web link to access the script output in browser tab
3. Configure the script as web server on ip:port using cherrypy
4. Create definitions(end points, ex: /index) within the script.

To run the script in the background, use below code, that will output a link that looks like https://wrea1crizb-496ff2e9c6d22116-8888-colab.googleusercontent.com/ through which output can be seen on a web browser.

!pip install CherryPy #webserver package

#bind the port 8888 and get a weblink to access
from google.colab.output import eval_js
print(eval_js("google.colab.kernel.proxyPort(8888)"))

#run the script/API in the background
import subprocess
subprocess.Popen(["python", "/content/test.py", "8888"]) 

Create test.py file and add the below code,

import cherrypy
import sys

class HelloWorld:
    def index(self):
        return "Hello World!"
    index.exposed = True
if __name__ == '__main__':
   config = {'server.socket_host': '0.0.0.0','server.socket_port' : int(sys.argv[1])}
   cherrypy.config.update(config)
   cherrypy.quickstart(HelloWorld())

Answer 4

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.