Nginx Question posted in
The official documentation can be found here.

Django admin interface missing css styling in production – Nginx

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)
Tags:

3

Answers


  1. 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

    Login or Signup to reply.
  2. 0

    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:

    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

    Login or Signup to reply.
  3. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search