Challenging Backend Problem (URL generation at runtime)

[traderi77]

I am trying to embed a dash app within a Flask application. I followed this article https://hackersandslackers.com/plotly-dash-with-flask/ which worked great locally.

However, in production I am getting some errors (the page is loading, but the GET requests are referencing the wrong URL (which is likely the one before the server instance started). This is the error: GET https://dss-20eb47c0-dde60339-dku.eu-west-3.app.dataiku.io/dashapp/ 404 (Not Found)

The issue is that I have written a dash application with many dependencies (it's using the assets folder, the pages folder and many more written modules) and it is not feasible to use the built-in dash webapp possibility (as the app is constructed by dataiku and does not allow to specify the assets or pages folder). 

I've been trying to get this to work for at least 3 days (and 15 hours) but just cannot do it. Help would be massively appreciated. I'm open to other setups or structuring of this project.  

This is my Flask backend (app is provided by dataiku -> its a Flask instance):

import dataiku
import pandas as pd
from flask import request, Flask
from dash import Dash, dash, html
from datetime import datetime 

server = app
dash_app = dash.Dash(server=server, routes_pathname_prefix="/dashapp/",)
dash_app.layout = html.Div("This is the dash app")



@server.route("/dashapp/")
def my(server):
    return dash_app.index()

@server.route("/firstcall")
def index():
    current_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    return json.dumps({"status": "ok", "data": current_time})

const backendURL = dataiku.getWebAppBackendUrl("/firstcall");

window.onload = function() {
    var ifrm = document.createElement("iframe");
    ifrm.setAttribute("src", backendURL);
    document.body.append(ifrm);

    // Create a link to navigate to "/dashapp/"
    var link = document.createElement("a");
    link.href = "/dashapp/";
    link.textContent = "Go to Dash App";
    document.body.appendChild(link);
};

[AlexT]

Hi @traderi77 ,The part "dash_app = dash.Dash(server=server, routes_pathname_prefix="/dashapp/",)" can't work as DSS manages dash server startup.

For Dataiku Cloud, it's also not yet possible to add vanity URLs yourself at this. possible https://doc.dataiku.com/dss/latest/webapps/public.html
If this is a blocker, please contact support via support chat for further guidance. 

There some solutions to customize the Dash webapp in DSS and use external_stylesheets and. external_scripts by leveraging :

https://developer.dataiku.com/latest/tutorials/webapps/standard/custom-static-files-kb/index.html

For example, my 'file-name.js' is located in '<Data Directory>/local/static/file-name.js' in DSS instance, and I load the JavaScript file like this in the Python code of my Dash app:

app.config.external_scripts = ['/local/static/file-name.js']

Note on Dataiku the Assets folder is available if you give your group permission to edit global libs:

If note of these is sufficient you will need to use a Code Studio webapp with a custom entry point to run Dash, this can be complex to implement if you need assistance please reach out to support. 

Thanks

[traderi77]

Hi @AlexT thank you for your response. It makes sense that DSS is taking care of the server startup of dash. I have tried everything around somehow adding the Flask server as the server for dash and just can't get around it. 

The other possibilities with static assets are not really an alternative as we have a quite complex dash application with many modules that have a huge amount of custom styling, callbacks and components. 

Could you kindly elaborate how I could go about using a 'Code Studio Webapp' with custom entry point to dash? I thought the way I've tried to instantiate a dash object was already a custom entry point. I would greatly appreciate any guidance in that direction. 

[Turribeach]

My advice will be that you abandon this path since it is clearly going against the flow. Dataiku is never going to be a good place to host complex web apps. Sure it can do some simple ones but that’s about it.
I think the best approach for your requirement will be for you to host your Python web apps separately and then use the Dataiku Python API to load whatever datasets you need to visualise in your apps and interact with Dataiku via the Python API. We do this at my current company with Plotly and it works really well.