If you are trying to manage the static files within your dokku server where your current django project is setup, instead of using a separate server to manage static files you have come to the right place. Following steps will help you ease the setup process:

* ***First of all make sure you install the 'whitenoise' python package within your django project's environment using:***

pip install whitenoise

Note: Also make sure to add it to your **requirements.txt** file for later usage. You can do this by using the command:

pip freeze > requirements.txt

* ***After installation of whitenoise, the next step is setting up the project's **settings.py** file***

Before that make sure to make use of environment variables and **.env** files for storing all of your environment variables. You can also use a separate **settings.py** files for local and production server. But I'll be using showing the steps for single **settings.py** file both for production and local development but the steps are similar.

I'll be using **WHITE_NOISE_ENABLED** environment variable to turn on whitenoise related settings for the production environment. You can use the environment variable of your choice.

You'll find **settings.py** inside main app's directory. You can add the following configurations on your **settings.py** file:

# Make sure you add this line at first before adding other configs.
WHITE_NOISE_ENABLED = os.environ.get('WHITE_NOISE_ENABLED', None) == 'True'


# Add the following configs after the INSTALLED_APPS list.
if WHITE_NOISE_ENABLED:
    INSTALLED_APPS.remove('django.contrib.staticfiles')
    INSTALLED_APPS.extend([
        'whitenoise.runserver_nostatic',
        'django.contrib.staticfiles',
    ])
    
    
# add this line after the MIDDLEWARE list.
if WHITE_NOISE_ENABLED:
    MIDDLEWARE.remove('django.middleware.security.SecurityMiddleware')
    MIDDLEWARE = [
                     'django.middleware.security.SecurityMiddleware',
                     'whitenoise.middleware.WhiteNoiseMiddleware',
    ] + MIDDLEWARE

# Note: the whitenoise middleware should only be added after the securitymiddleware.
    
# Make sure you added the configs for managing static files.
STATIC_URL = "static/"
STATIC_ROOT = os.path.join(BASE_DIR, "static") # directory where you want your static files to be collected for later use in production.


if WHITE_NOISE_ENABLED:
    STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage' # stores the file in compressed form '.gzip'.

* ***The next step is setting up the wsgi.py file which is used as an interface between application server to connect with django.***

You'll find the **wsgi.py** inside your main app's directory. Set up the **wsgi.py** file as follow:

    
import os

from django.core.wsgi import get_wsgi_application
from pathlib import  Path

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings') # 'core' is the main app inside our project.

application = get_wsgi_application()

BASE_DIR = Path(__file__).resolve().parent.parent
WHITE_NOISE_ENABLED = os.environ.get('WHITE_NOISE_ENABLED', None) == 'True' 

if WHITE_NOISE_ENABLED:
    from whitenoise import WhiteNoise
    application = WhiteNoise(application, root=BASE_DIR)
    application.add_files(BASE_DIR / 'static', prefix='/static') # ' BASE_DIR/static': directory where the collected static files are located.

* ***The next step is setting up Procfile and app.json for dokku.***

**Procfile:**
Make sure you add command for collecting static files to the ***release***.


**app.json:**
Make sure you add the following lines.


The above configs will make sure the collectstatic command is run after every deployment and before the django server is up and running.

Finally, you can deploy your changes to the production server. Once, the server is up and running you can check if the static files are working properly.

# Case where static files doesnot show up:

There might be a case where the static files are not showing. I have faced this issue on my django with docker setup, when I tried to access the django admin panel the CSS where not showing up.


Also the console was giving 404 not found for static files.


So, I checked the **nginx** service error logs for the **dokku** container on the production server and it was giving the following errors:


You can also check yours by using command:

dokku nginx:error-logs <app_name> [-t]

We can see that the nginx server is trying lo locate all the static files inside the directory: **/home/dokku/backend/static**. But all the static files are located inside the dokku container for our app. so that's why static files were unable to load.

***Fix:***

So, to fix this issue what we can do is use the help of something called **'Persistent Storage'** provided by dokku.
Using this method we can mount the external directory with the directory inside the dokku managed container.

We need to mount the directory on which **nginx** was trying to locate the **static files** with the actual **static** directory inside **dokku container** for our app.

We can do this by running following command inside our production server.

dokku storage:mount <app> <host-dir: container-dir>

# host-dir: add the directory where nginx is trying to locate the static files.

# container-dir: add the actual static files directory inside the dokku container for our app.

#Example:

dokku storage:mount backend /home/bakend/dokku/static:/code/backend/static

# This will create a new bind mount.

You can check the list of bind mounts for app's container using:

dokku storage:list <app>

Once you see your mount listed you are good to go.
Now, re-run the deployment process and make sure the collectstatic command is run and all the static files are collected on the new mounted directory as well as the default directory inside the container.Finally, you can check if the static files are working.