Plotly Dash css not available with docker

Dash Python
1

I am trying to run a dash app with docker. When I run my app locally (without docker) the css stylesheet is recognized correctly. Running the dash app with docker results in the default style without applying the changes specified in the stylesheet.
My Dockerfile looks as following:

FROM python:3.9

ENV APP_HOME /app
WORKDIR $APP_HOME
COPY static app.py requirements.txt ./

RUN apt-get update
RUN apt-get install ffmpeg libsm6 libxext6  -y
RUN pip install -r requirements.txt

EXPOSE 8080

CMD python app.py

app.py contains the dash app, while the stylesheet is located in the folder ‘static’.
Currently I load the stylesheet like this:

from dash import Dash

app = Dash(__name__)
app.css.config.serve_locally = False
app.css.append_css({'external_url': './static/style.css'})

I have tried the solutions recommended here. However, none of them work for me. Grateful for any suggestions you have to solve this.

2

Hey hey,

Are you installing flask or gunicorn or waitress or some kind of server to serve up the app? Wondering if dash doesn’t know how to find it’s assets. Not sure if that’s in your requirements.txt. file.

Did you try putting the style.css file in a folder called assets instead of static? Minor thing but just to rule some stuff out since thats dash’s default css/image folder.

For reference sake, this is how i have my docker set up if it helps:

Dockerfile

FROM ubuntu:latest 

WORKDIR /app
COPY . /app

ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHON UNBUFFERED 1

RUN apt-get update \
    && apt-get upgrade -y python3-pip \
    && apt-get install -y python3.8 wget curl \
    && pip3 install -r requirements.txt \
    && apt autoremove -y

EXPOSE 8050

ENTRYPOINT [ "gunicorn", "--config", "gunicorn_config.py", "app:server" ]

gunicorn_config.py

bind = "0.0.0.0:8050"
workers = 3
timeout = 120
2 Likes
3

Hey,
thanks for your answer! I am using gunicorn and initially set up the static folder because I was deploying to aws. The problem was that somehow the contents of the folder did not get copied and therefore the stylesheet was not available. Changing my Dockerfile to the following did the trick.

FROM python:3.9

ENV PYTHONUNBUFFERED True

ENV APP_HOME /app
WORKDIR $APP_HOME
COPY app.py requirements.txt ./
COPY static/style.css /app/static/style.css

RUN apt-get update
RUN apt-get install ffmpeg libsm6 libxext6  -y
RUN pip install -r requirements.txt

EXPOSE 8080

CMD exec gunicorn -b 0.0.0.0:8080 --workers 3 --threads 8 --timeout 0 app:server

I am just copying the style.css file explicitly now.

4 Likes