Why my Django admin is not loading with css?

Question

I have developed a web app in Django and deployed it then I found out that admin page is not loading with CSS. I was gettting the admin page with css in local server but not when I deployed it.

Even after using python manage.py collectstatic It's not loading with css.

Here is my settings.py code

from pathlib import Path
import os

BASE_DIR = Path(__file__).resolve(strict=True).parent.parent

Here is the static files linkage part:

STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
STATIC_ROOT=os.path.join(BASE_DIR,'staticfiles')

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'first_app/media')

I am not able to figure out why it's not linking the css part even after the above code

Django version: 3.1 Python version : 3.8.3

Please could anyone help me out in this Thank you

Answer 1

If you are in production you have to run:

python manage.py collectstatic --noinput

But you also must serve the static files through your web server. The easiest way to do this is with WhiteNoise: http://whitenoise.evans.io/en/stable/

This will work with Nginx, Heroku, etc. So it's a very flexible solution.

Answer 2

Setup looks fine. You may need to run collectstatic in production environment again.

Answer 3

Django doesn't serve static files in production, you are supposed to use other methods for serving your files either with apache2 or nginx. If you are good or know some docker container here is a tutorial that explains how to deploy Django https://testdriven.io/blog/dockerizing-django-with-postgres-gunicorn-and-nginx/

upstream hello_django {
    server web:8000;
}

server {

    listen 80;

    location / {
        proxy_pass http://hello_django;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    location /staticfiles/ {
        alias /home/app/web/staticfiles/;
    }

}

Please check also django doc here https://docs.djangoproject.com/en/3.1/howto/static-files/deployment/

Please check this post for apache2 without docker containers https://programmingzen.com/serving-django-static-files-through-apache/

Answer 4

add this code to your setting.py

DEBUG = False
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

and after running run this command :

python manage.py collectstatic --noinput

and deploy project with webservices like nginx or ...

and add staticfiles path to your webservice config for nginx somethins like this

location /static/ {
    alias /home/{{your project path }}/static/;
}

Answer 5

Just do a trick here. After running collectstatic command, you'll get admin statics in staticfiles folder. Just cut it there and paste in static folder and i don't know why Django doesn't support admin static in production. If anyone knows this, welcome for your answers

Answer 6

You did not mention that on which server you're trying to deploy your application If you're deploying your application on Heroku then you need to install whitenoise, which I have already explained here, but if you're using any other server then you can this answer https://www.thecodecity.com/2020/05/django-admin-static-files-not-loading.html

Answer 7

Try this in settings.py:

STATIC_URL = '/static/'

MEDIA_URL = '/media/'

STATIC_ROOT = BASE_DIR / 'staic'

MEDIA_ROOT = BASE_DIR / 'media'

STATICFILES_DIRS = [BASE_DIR / 'static']

Django 3.1 Documentation

Answer 8

Just insert this line in settings.py --> INSTALLED_APPS:

django.contrib.staticfiles