Dash Bootstrap Components in Dataiku Webapp

Pierre_VDB

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 dataiku
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate

# use the style of examples on the Plotly documentation
app.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 routing
url_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 layout
app.layout = url_bar_and_content_div

# "complete" layout, need at least Dash 1.12
app.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, True
    else:
        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_1
    elif root_url + "page-2" == pathname :
        return layout_page_2
    else:
        return layout_index

---

Operating system used: windows

FlorentD

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