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!