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. django-admin pic

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

Can you attach screenshot of your developer tools Network tab? — kumar
– kumar, Commented Oct 21, 2020 at 4:52

PizzaPanther · Accepted Answer · 2020-10-19 03:04:30Z

10

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.

answered Oct 19, 2020 at 3:04

PizzaPanther

1,3522 gold badges12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Prusa Over a year ago

whitenoise really solve my problem. Amazing solution... I tried lots of things but after whitenoise, everything is perfect. Thanks @PizzaPanther

Faizan Ahmad Over a year ago

whitenoise helped. THANK YOU!

Ravi · Accepted Answer · 2020-10-17 13:42:41Z

4

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

answered Oct 17, 2020 at 13:42

Ravi

945 bronze badges

Comments

ashkan haghju · Accepted Answer · 2020-10-18 05:09:45Z

2

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/;
}

answered Oct 18, 2020 at 5:09

ashkan haghju

1623 bronze badges

Comments

Simon Peter Ojok · Accepted Answer · 2020-10-13 02:41:41Z

1

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/

edited Oct 13, 2020 at 2:41

answered Oct 13, 2020 at 2:13

Simon Peter Ojok

1762 silver badges6 bronze badges

6 Comments

Pratharan Reddy Over a year ago

Hi, Thank you so much for the solution ,I will try and update you soon

Pratharan Reddy Over a year ago

Does this work for Apache too?Bcoz am deploying it in AWS on Apache

Simon Peter Ojok Over a year ago

Yes, check out this post programmingzen.com/serving-django-static-files-through-apache by Antonio Cangiano

Pratharan Reddy Over a year ago

I did it but still no change, is there any other solution?

Simon Peter Ojok Over a year ago

Use nginx and docker now

|

Teja · Accepted Answer · 2020-10-17 17:18:31Z

0

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

answered Oct 17, 2020 at 17:18

Teja

11 bronze badge

Comments

Satyam Mishra · Accepted Answer · 2020-10-18 15:48:18Z

0

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

answered Oct 18, 2020 at 15:48

Satyam Mishra

1361 silver badge8 bronze badges

Comments

fquivera · Accepted Answer · 2020-10-21 21:29:56Z

0

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

answered Oct 21, 2020 at 21:29

fquivera

154 bronze badges

Comments

RiveN · Accepted Answer · 2022-05-03 09:38:22Z

0

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

django.contrib.staticfiles

edited May 3, 2022 at 9:38

RiveN

2,66911 gold badges17 silver badges29 bronze badges

answered May 2, 2022 at 21:24

Projeto Julius

1

Comments

Dolapo Ogunfowora · Accepted Answer · 2022-08-27 17:58:41Z

0

This is unrelated, but I spent minutes trying to get this.

If you are in development and using a virtual environment, remember to start your virtual environment.

answered Aug 27, 2022 at 17:58

Dolapo Ogunfowora

113 bronze badges

Collectives™ on Stack Overflow

Why my Django admin is not loading with css?

9 Answers 9

2 Comments

Comments

Comments

6 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

Comments

Comments

6 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related