Dash with Flask templating

I would like to embed a Dash app inside a Flask webapp that is based on the flask templating.
I saw that some suggested using iframe, but how this can be done actually?
Aren’t there any better solutions to do this?

2 Likes

To embed a Dash app as an iframe, run the dash app in a separate python process and then use the iframe markup to embed it by URL:

<iframe src="the-url-of-your-dash-app" style="border: none;"/>

There are not any better solutions to this right now, however there will be in the future. If anyone reading this would like to sponsor the development of a better solution, please reach out: Consulting, Training & Open-Source Development

2 Likes

I figure out a way to handle Dash apps and Flask templates, you can see my code :slightly_smiling_face: https://github.com/jimmybow/Dash_app_with_Flask_template/tree/master

2 Likes

good job man~~

I have another question ,can u help me?
above u settled a problem with adding dash to flask project.
what i want to do is adding flask into dash app .
the problem coming from here : I draw a map in flask , but i want it to display in a dash app as one of its components.

2 Likes

Maybe you can iframe your map to dash app… :thinking:
but you can’t transform it as a dash component unless you make it be a react.js component.

I worked this out by renderring the map as a local html file and reading the string into an iframe object. Thanks.




梁凡

邮箱:tasselmi@yeah.net

签名由 网易邮箱大师 定制

1 Like

HI, can you do me a favor ? SOS !
I want to use a flask app as one part of a dash app webpage , but I don’t know how to do it .

I konw one method is to render the map as a local html file and them read the html file into a dash iframe object.
But I’M curious about if a dash app can comunicate with a flask app.
Do you kown how?

dash app and jinja2 can’t comunicate directly because they are different render way.
Currently, the only way i known to comunicate with a flask app is use url argument … ,or you need to use dash directly … with the map wrap in a react.js :thinking:

CAN YOU show me how to use url argument?

use ‘search’ prop. of dcc.Location in dash app.

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='index')
])

  @app.callback(
            Output('index', 'children'),
            [Input('url', 'search')])
    def display_page(request_args):
        if request_args:
            rr = pd.Series(str(request_args)[1:].split('&')).str.split('=')
            key = rr.str.get(0)
            value = rr.str.slice(1,).str.join('=')   
            if 'secret' in list(key) and value[key == 'secret'].iloc[0] == create_secret(str(datetime.now()).split(':')[0]):
                return  html.Div([
                            html.Div(id='target'),
                            dcc.Input(id='input', type='text', value='')
                        ])
        return html.Div('Error  !')
1 Like

I figure out a way to handle Dash apps and Flask templates, you can see my code :slightly_smiling_face:https://github.com/jimmybow/Dash_app_with_Flask_template/tree/master

@jimmybow this is great! I’m using this to make Dash work with the flask-login user functionality - users won’t be able to get to the dash app with a URL; they must be logged in. Thank you.

Great, I also imporve the code recently, :slightly_smiling_face:

1 Like

Hi just got to your example I’m having an OS error which seems to be a problem using 64/32 bit version of a program, can you tell me your config where you developed this? OS, python ver fo instance?

the error message is: (when I run python run.py)
OSError: [Errno 8] Exec format error:

Best.

got it fixed, for some reason had to set

if name == “main”:
app.run(debug = False)

in app.py, i wol have a closer look at this.

Best.

I found this while searching for similar problem. turning off debug mode fixed my problem.

OS = ubuntu app in windows 10
python 3.7.3
pip install dash==1.6.1
pip install dash-daq==0.3.1

print("name = ", name)
if name == ‘main’:
print(“start server”)
#app.run_server(debug=True) # this causes errors - OSError: [Errno 8] Exec format error:
app.run_server(debug=False)

Appears related to this git issue below.


https://flask.palletsprojects.com/en/1.0.x/cli/

I know this post is from a long time ago but thank you Jimmy! Your project has allowed me to insert dash apps below a common navigation bar for the outer flask app container!

wonderful.
I have another question ,can you help me?
Currently I have to read data from my database to draw the chart.
I want some way to connect my database directly. When the database changes, the chart also updates
Thank you