Challenging Backend Problem (URL generation at runtime)

Options
traderi77
traderi77 Registered Posts: 2
edited July 16 in Setup & Configuration

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);
};

Answers

  • Alexandru
    Alexandru Dataiker, Dataiku DSS Core Designer, Dataiku DSS ML Practitioner, Dataiku DSS Adv Designer, Registered Posts: 1,209 Dataiker
    Options

    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:

    Screenshot 2024-01-18 at 5.47.01 PM.png


    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
    traderi77 Registered Posts: 2
    Options

    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
    Turribeach Dataiku DSS Core Designer, Neuron, Dataiku DSS Adv Designer, Registered, Neuron 2023 Posts: 1,727 Neuron
    Options

    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.

Setup Info
    Tags
      Help me…