Why my Django admin is not loading with css?

Viewed 6257

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

9 Answers

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.

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

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/

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

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

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

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

django.contrib.staticfiles

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.

Related