plotly dash chart: site can't be reached

Question

I am trying to run a plotly app on Google Colab:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
import socket
host = socket.gethostbyname(socket.gethostname())


themes = (
    raw.themes_simple.drop_duplicates()
    .sample(n=10, random_state=42)
)


app = dash.Dash(__name__)
app.layout = html.Div([
    html.P("Select y-axis"),
    dcc.Dropdown(
        id='y-axis',
        options=[
            {'label': x, 'value': x} 
            for x in ['themes_simple']],
        value='pop'
    ),
    dcc.Graph(id="graph"),
])

@app.callback(
    Output("graph", "figure"), 
    [Input("y-axis", "value")])
def display_area(y):
    fig = px.area(
        raw, x=raw.columns.to_list()[1:], y=y,
        color="themes_simple", line_group="countries")
    return fig

app.run_server(debug=False, host=host, port = 5000)

I am getting the message Dash is running on http://IP_address:5000/

• Serving Flask app " main " (lazy loading)
• Environment: production WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
• Debug mode: off
• Running on http://IP_address:5000/ (Press CTRL+C to quit)

However, when I click on the link, I get the message "page cannot be displayed".

Any idea what else I could try?

Answer 1

The problem is the link, the dash app is fine, you need to get a link you can access. The displayed link is the localhost of the server to which you don't have access. But you can have a proxy to the server:

from google.colab.output import eval_js
print(eval_js("google.colab.kernel.proxyPort(5000)"))

Execute the two lines first, then your app. Access the link that gets printed and you should be able to see your app.