How to generate previews of plotly dash app when the link to dash app is shared?

Dash Python
1

How to make the generated dash link fixed so I can send it to someone and be able to view the dash?

2

Hi @GlendaTavares
Welcome to the community. I’m glad you are interested in sharing a Dash app.

Let me see if I understand your question correctly. You have a Dash app, for example:

from dash import Dash, dcc, html, Input, Output
import plotly.express as px

import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')

app = Dash(__name__)

app.layout = html.Div([
    dcc.Graph(id='graph-with-slider'),
    dcc.Slider(
        df['year'].min(),
        df['year'].max(),
        step=None,
        value=df['year'].min(),
        marks={str(year): str(year) for year in df['year'].unique()},
        id='year-slider'
    )
])


@app.callback(
    Output('graph-with-slider', 'figure'),
    Input('year-slider', 'value'))
def update_figure(selected_year):
    filtered_df = df[df.year == selected_year]

    fig = px.scatter(filtered_df, x="gdpPercap", y="lifeExp",
                     size="pop", color="continent", hover_name="country",
                     log_x=True, size_max=55)

    fig.update_layout(transition_duration=500)

    return fig


if __name__ == '__main__':
    app.run_server(debug=True)

By executing this app, it would open up in your browser as http://127.0.0.1:8050/.

And you would like to be able to share this link so others can run your app and be able to interact with it?

1 Like
3

Hi @GlendaTavares

If you are trying to share a link when you are running an app locally, I don’t think that’s possible, but I’ll let @adamschroeder answer that question.

Assuming you have an app deployed and want to have a nicely formatted card with an image title and description when you share a link to your app on social media, you can do that with meta tags.

Find more information on social media meta tags at Mozilla.org You may also find this Essential Meta Tags for Social Media article helpful.

Note - if you make a multi-page app with the pages plugin in dash-labs, it will automatically create these meta tags for you and update them for each page of your multi-page app . :tada:

But here is how to do it with a single page app: See the code for this app in github

from dash import Dash, dcc, html, dash_table, Input, Output, State, callback_context
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
import pandas as pd

app_description = """
How does asset allocation affect portfolio performance?   Select the percentage of stocks, bonds and cash
 in a portfolio and see annual returns over any time period from 1928 to 2021.
"""
app_title = "Asset Allocation Visualizer"
app_image = "https://www.wealthdashboard.app/assets/app.png"

metas = [
    {"name": "viewport", "content": "width=device-width, initial-scale=1"},
    {"property": "twitter:card", "content": "summary_large_image"},
    {"property": "twitter:url", "content": "https://www.wealthdashboard.app/"},
    {"property": "twitter:title", "content": app_title},
    {"property": "twitter:description", "content": app_description},
    {"property": "twitter:image", "content": app_image},
    {"property": "og:title", "content": app_title},
    {"property": "og:type", "content": "website"},
    {"property": "og:description", "content": app_description},
    {"property": "og:image", "content": app_image},
]

app = Dash(
    __name__,
    external_stylesheets=[dbc.themes.SPACELAB, dbc.icons.FONT_AWESOME],
    meta_tags=metas,
    title=app_title,
)

... see the rest of the app in the github link above
3 Likes
4

Thanks for the reception.

Yes, that’s exactly it!

5

Thank you for your help!!

I will read the article and I will look this page.