Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Dash not loading CSS when frozen with cx_freeze

I am running a multi-page Dash app, version 1.2.0, on Python 3.9.0. Everything works fine when I run it locally on the development server (through python index.py) as well as when I run it locally on a production waitress server.

I want to package the app into a distributable, so that users do not need a Python environment to run it. I am using cx_Freezeversion 6.6, and following the guide suggested by @Phillipe here.

Everything works fine, except for CSS loading. I have tried to load CSS with both a local and an exteernal stylesheet, and neither works.

In my cx_freeze setup.py file, I have made sure to include the CSS file

setup.py:

from setuptools import find_packages
from cx_Freeze import setup, Executable

build_exe_options = {
    "packages": ["dash", 'pandas', 'numpy', 'plotly', 'dash_core_components', 'dash_html_components', 'flask',
                  'idna', 'plotly', 'waitress','jinja2'],
    "excludes": ["tkinter"],
    "include_files":['data/disease_data.pkl','data/pharm_stock_data.pkl','data/pharm_use_data.pkl',
                     'data/test_data.pkl','assets/logo.png','assets/style.css','BaseGeojsons/dhanora.geojson']
}

Here in my app.py, I add the stylesheet to the external_stylesheets list, and I also use the suggested cx_freeze method to locate my style.css file. I can confirm that the style.css file appears in the asset_path.

app.py:


import dash
import os
import dash_bootstrap_components as dbc
import sys

external_stylesheets = [dbc.themes.LUX,'https://raw.githubusercontent.com/rayansud/MMU_Data_Host/main/style.css']

if getattr(sys, "frozen", False):
    # The application is frozen
    asset_path = os.path.dirname(sys.executable)
    print(asset_path)
    print(os.listdir(asset_path))

    app = dash.Dash(__name__, external_stylesheets=external_stylesheets,assets_folder=asset_path,assets_url_path = '/')
else:
    app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


server = app.server
server.secret_key = os.environ.get('secret_key', 'secret')

I have also used Firefox’s web inspector to confirm that the external stylesheet is being loaded through a network call.

However, when I open the Dash app in my browser, my custom CSS styling is missing. Styles from dbc.themes.LUX are present, but not my file.

Any help would be hugely appreciated. Thank you!

Hi @r_sud , did find any answer?