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, eg 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, eg

!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.

Answer 2

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 3

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 4

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 5

You can check my sample notebook

https://colab.research.google.com/github/popcornylu/web-server-in-colab/blob/main/web_server_in_colab.ipynb

1. Define the line magic

from IPython.core.magic import register_line_magic
import subprocess

@register_line_magic
def run_local_server(line):
    handle = IPython.display.display(
            IPython.display.Pretty("Launching my server..."),
            display_id=True,
    )
    subprocess.Popen(['python', '-m', 'http.server'])
    shell = """
        (async () => {
            const url = new URL(await google.colab.kernel.proxyPort(8000, {'cache': true}));
            const iframe = document.createElement('iframe');
            iframe.src = url;
            iframe.setAttribute('width', '100%');
            iframe.setAttribute('height', '400');
            iframe.setAttribute('frameborder', 0);
            document.body.appendChild(iframe);
        })();
    """
    script = IPython.display.Javascript(shell)
    handle.update(script)

2. use the line magic in another cell

%run_local_server

It allows you to implement your line magic in your application package.