Django admin interface missing css styling in production

Question

The user interface is working well, and all CSS styling and static files are served correctly, but the admin interface is missing CSS styling. I looked at similar posts but in those posts people had the issue with both the user and the admin interface. My issue is only with the admin interface.

Please see my static file settings below from settings.py:

STATIC_URL = '/static/'

#Location of static files
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ]

STATIC_ROOT  = os.path.join(BASE_DIR, 'staticfiles')

And this is my nginx configuration:

server {
    listen 80;
    server_name MY_SERVER_IP;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/MYUSERNAME/myproject;
    }

    location /media/ {
        root /home/MYUSERNAME/myproject;
    }

I already executed python manage.py collectstatic on the server and got this message:

0 static files copied to '/home/MYUSERNAME/myproject/staticfiles', 255 unmodified.

I restarted nginx after that and also tried emptying my browser cache, but the issue persisted.

More info as requested by @Omar Siddiqui. Using Django 3.2 My mysite/urls.py contains:

from django.contrib import admin
from django.urls import path, include

# Imports to configure media files for summernote editor
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('qa.urls')),
    path('summernote/', include('django_summernote.urls')),
    path('chatbot/', include('chatbot.urls')),
]

# Enable media files for summernote editor
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL,
                          document_root=settings.MEDIA_ROOT)

I had the same problem when trying to host my Django app. Ended up just finding the admin css files and pasting them with the rest of the static files. So if all else fails you have that option. — Marko Borković
– Marko Borković, Commented Aug 10, 2021 at 15:57
Thanks for the workaround! Will keep that as a last bullet :) — multigoodverse
– multigoodverse, Commented Aug 10, 2021 at 15:59
@MarkoBorković I have been doing that since yesterday but there is just a lot of static files that need to be manually copy-pasting. I have the summernote WYSIWYG editor and that has a lot of small SVG icons and other stuff, so it's becoming very impractical. — multigoodverse
– multigoodverse, Commented Aug 11, 2021 at 15:06
What version of Django are you using, and can you post your urls.py file(s) as well? — Omar Siddiqui
– Omar Siddiqui, Commented Aug 12, 2021 at 17:13

Dat · Accepted Answer · 2023-07-11 03:10:50Z

11

+200

Could you please try below steps and let me know if it's working or not?

Apply below changes in settings.py file:

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

Remove below line from your settings.py:

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ]

Execute below command in production:

python manage.py collectstatic

Update nginx file like below one:

# prevent css, js files sent as text/plain objects
include /etc/nginx/mime.types;

server {
    listen 80;
    server_name MY_SERVER_IP;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        autoindex on;
        autoindex_exact_size off;
        root /home/MYUSERNAME/myproject;
    }

    location /media/ {
        autoindex on;
        autoindex_exact_size off;
        root /home/MYUSERNAME/myproject;
    }
}

Explanations:

STATIC_ROOT is the folder where static files will be stored after using python manage.py collectstatic
STATICFILES_DIRS is the list of folders where django will search for additional static files aside from the static folder of each app installed.

In this case our concern was Admin related CSS files that why we use STATIC_ROOT instead of STATICFILES_DIRS

edited Jul 11, 2023 at 3:10

Dat

5,8632 gold badges34 silver badges33 bronze badges

answered Aug 14, 2021 at 4:36

Sabil

4,5391 gold badge9 silver badges21 bronze badges

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

6 Comments

multigoodverse Over a year ago

That worked! Could you perhaps add some explanation on the code you provided in your answer?

multigoodverse Over a year ago

It does remove the static files if I apply your suggested changes to my local settings.py file on localhost, but that is a different problem.

Sabil Over a year ago

I add a small explanation for you @multigoodverse. If you need any further details then please let me know.

Tech Over a year ago

"include /etc/nginx/mime.types;" is debatable but the rest should work

genobear Over a year ago

@Tech been struggling with this issue all day on my project. include /etc/nginx/mime.types; was the line that saved me in the end.

|

Omar Siddiqui · Accepted Answer · 2021-08-12 17:10:50Z

0

Try changing STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') to:

STATIC_ROOT  = os.path.join(BASE_DIR, 'static')

Then re-run python manage.py collectstatic. This has worked in the past for some people

edited Aug 12, 2021 at 17:10

answered Aug 12, 2021 at 16:49

Omar Siddiqui

1,6657 silver badges20 bronze badges

3 Comments

multigoodverse Over a year ago

So, I tried changing staticfiles to static in the production server and then run python manage.py collectstatic but I get this error:

SystemCheckError: System check identified some issues:  ERRORS: ?: (staticfiles.E002) The STATICFILES_DIRS setting should not contain the STATIC_ROOT setting.

user12065892 Over a year ago

@omar, You are wrong ! static root and static dir should not be same :)

Rauf P Over a year ago

Its Worked form me.

Daniel · Accepted Answer · 2021-08-16 14:51:53Z

0

Try passing an alias to the static location in nginx, like so:

location /static/ {
    alias /home/MYUSERNAME/myproject/staticfiles/
}

Don't forget to restart nginx afterwards.

answered Aug 16, 2021 at 14:51

Daniel

3,5371 gold badge10 silver badges28 bronze badges

Comments

Rishi Shrivastav · Accepted Answer · 2024-06-06 13:06:40Z

#if you are using nginx & django & gunicorn

#project folder location in ubuntu server username/. #if not at same then please adjust the path as per project location

#while deployment on the ubuntu server static files and media files are served from a different location i.e. outside of your project directory this is just to make faster website accessibilty and scalability

#inside static files you have all the frontend's css and js and images

#although you can choose your own location from where you want to serve the static and media files here I have framed one instance of setting the root and url of static and media files

#Set the Static Files root which includes your installed apps' files (by installed apps file means the files of css and js which are used inside django for example admin pannel css and js and other apps that you use), also this static root will store the your custom js and css and fonts and image files...

#this is the path(inside settings.py) from where nginx will copy your static files don't worry its the folder inside you django project usually its' path is predefined :

STATIC_URL = '/static/'

#and this is the path where it will store the files

STATIC_ROOT = "/var/www/Project_folder_name/static/"

#same is applicable on media files these are usually files that come from frontend and stored although you can change the if wanted but better not to change unless have full understanding

MEDIA_URL = '/media/'

MEDIA_ROOT = "/var/www/Project_folder_name/media/"

Now Below is your nginx server file:

server{
listen 80;
listen [::]:80;

server_name your_domain www.your_domain;

location = /favicon.ico { access_log off; log_not_found off; }

location / {
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_pass http://unix:/run/your_domain.gunicorn.sock;
}

location  /static/ {
    root /var/www/project_folder_name;
}

location  /media/ {
    root /var/www/project_folder_name;
}}

#replace the project_folder_name with your project name and also the domain name with yours.

Now run

python manage.py collect static

And do not forget to restart nginx

#NOTE maybe your installed apps css js files will be collected but your custom files and images are not

in this case go to your static files folder inside the project and manually move or copy those folder inside (/var/www/project_folder_name)

#Now hope so it will work as worked for me if nothing still not then try to create the same folder media and static and copy the media and static files there also run python manage.py collectstatic so that default apps and css get store over there

Collectives™ on Stack Overflow

Django admin interface missing css styling in production

4 Answers 4

6 Comments

3 Comments

Comments

Now Below is your nginx server file:

in this case go to your static files folder inside the project and manually move or copy those folder inside (/var/www/project_folder_name)

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

3 Comments

Comments

Now Below is your nginx server file:

in this case go to your static files folder inside the project and manually move or copy those folder inside (/var/www/project_folder_name)

Comments

Your Answer

Sign up or log in

Post as a guest

Related