Dash Bootstrap Components in Dataiku Webapp

Options
Pierre_VDB
Pierre_VDB Registered Posts: 1

Hello everyone,

I am trying to create a webapp in Dataiku using Dash and the Dash Bootstrap Components package. I have successfully imported all the necessary packages into the environment and there are no errors when I run the webapp.

However, the problem I am encountering is that the visual rendering of Bootstrap is not working. While all functionalities are present, the webapp appears without any Bootstrap styling—it looks very basic and unstyled.

Important to know, I am working in a local environment without an internet connection.

Has anyone faced a similar issue or does anyone have any suggestions on how to get the Bootstrap styles to render correctly in a Dataiku webapp?

Thank you in advance for your help!

Best regards,

import dataikuimport dashimport dash_bootstrap_components as dbcimport dash_core_components as dccimport dash_html_components as htmlfrom dash.dependencies import Input, Output, Statefrom dash.exceptions import PreventUpdate# use the style of examples on the Plotly documentationapp.config.external_stylesheets = [dbc.themes.BOOTSTRAP]layout_navbar = html.Div(dbc.NavbarSimple(children=[dbc.NavItem(dbc.NavLink("Dashboard", href="page-1")),dbc.NavItem(dbc.NavLink("Data", href="page-2"))],brand="QUALITE DES DONNEES MSBS",color="primary",dark=True,))layout_index = html.Div([html.H2('Page d’accueil')])layout_page_1 = html.Div([html.H2('Page 1')])layout_page_2 = html.Div([html.H2('Page 2')])# url, root-url and first-loading are used for routingurl_bar_and_content_div = html.Div([dcc.Location(id='url', refresh=False),html.Div(id='root-url', style={'display': 'none'}),html.Div(id='first-loading', style={'display': 'none'}),layout_navbar,html.Div(id='page-content')])# index layoutapp.layout = url_bar_and_content_div# "complete" layout, need at least Dash 1.12app.validation_layout = html.Div([url_bar_and_content_div,layout_index,layout_page_1,layout_page_2,])# The following callback is used to dynamically instantiate the root-url@app.callback([dash.dependencies.Output('root-url', 'children'), dash.dependencies.Output('first-loading', 'children')],dash.dependencies.Input('url', 'pathname'),dash.dependencies.State('first-loading', 'children'))def update_root_url(pathname, first_loading):if first_loading is None:return pathname, Trueelse:raise PreventUpdate# We can now use the hidden root-url div to update the link in page-1 and page-2@app.callback(dash.dependencies.Output('page-1-root-link', 'href'),[dash.dependencies.Input('root-url', 'children')])def update_root_link(root_url):return root_url@app.callback(dash.dependencies.Output('page-2-root-link', 'href'),[dash.dependencies.Input('root-url', 'children')])def update_root_link(root_url):return root_url# This is the callback doing the routing@app.callback(dash.dependencies.Output('page-content', 'children'),[dash.dependencies.Input('root-url', 'children'),dash.dependencies.Input('url', 'pathname')])def display_page(root_url, pathname):if root_url + "page-1" == pathname :return layout_page_1elif root_url + "page-2" == pathname :return layout_page_2else:return layout_index


Operating system used: windows

Best Answer

  • FlorentD
    FlorentD Dataiker, Dataiku DSS Core Designer Posts: 25 Dataiker
    Answer ✓
    Options

    Hi @Pierre_VDB

    If you do not have internet access, you can't access Bootstrap, which is hosted on the web. So this

    app.config.external_stylesheets = [dbc.themes.BOOTSTRAP]

    won't work.

    You should download the library you need and store them anywhere.

    And then register them. For example, if the CSS file is stored in the local shared code:

    app.config.external_stylesheets = ["/local/static/file.css"]

    will allow you to use the CSS. `app.config.external_scripts` also exists and should allow you to use some javascript files.

    Hope this helps.

    Best

Setup Info
    Tags
      Help me…