Django not rendering any static files or css/styling

I made this post on stackoverflow about the same issue, going to copy the text. I think I could really use someone who’s more experienced with django to give me a quick lead on what I’m missing here. https://stackoverflow.com/questions/64988207/django-not-serving-static-files-and-not-stylizing-anything

I downloaded a template in the form of a zip file on my machine. It has a file for a homepage, auth-login.html . If I load auth-login.html within the zip file then it loads correctly, I see styling and I don’t get any console errors.

But it seems like I can’t get this template to load its css and styling in my Django project via python manage.py runserver with DEBUG=true . I’m trying to just get this on a development server and I haven’t really been able to get past step 1. When I try to go to my application’s home page, I see unstylized times new roman text in my browser. No styling loads on the page at all. I’m not getting server/console errors either. I made an html file within my templates folder, index.html, that just has the contents of auth-login.html pasted into it (and I edited every or tag to use the {% static %} path. I set this as my home page. It just leads to an unstylized html page in Times New Roman.

My Django project is of the following structure

    lpbsproject/ 
       project_root/
         staticFiles/ (STATIC_ROOT, where collectstatic copies to)
         project_app/
           settings.py
           urls.py
           wsgi.py, asgi.py, __init__.py...        
         static/ (STATIC_URL, original location of static files)
           assets/ (this folder is copied/pasted from the template .zip)
             css/, js/, ...
         user_auth/
           migrations
           views.py
           admin.py, models.py, apps.py, test.py ...
         templates/
         manage.py

Here’s the <head> of my html file with all the <link> and <script> statements. These currently aren’t generating errors.

    {% load static %}
    <!doctype html>
    <html lang="en">

        <head>
            <title>Login template from online</title>
            <link rel="shortcut icon" href="{% static 'assets/images/favicon.ico' %}">
            <link href="{% static 'assets/css/bootstrap.min.css' %}" id="bootstrap-style"/>
            <link href="{% static 'assets/css/icons.min.css' %}" type="text/css" />
            <link href="{% static 'assets/css/app.min.css' %}" id="app-style"  type="text/css" />
            <script src="{% static 'assets/libs/jquery/jquery.min.js' %}"></script>
            <script src="{% static 'assets/libs/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
            <script src="{% static 'assets/libs/metismenu/metisMenu.min.js' %}"></script>
            <script src="{% static 'assets/libs/simplebar/simplebar.min.js' %}"></script>
            <script src="{% static 'assets/libs/node-waves/waves.min.js' %}"></script>
            <script src="{% static 'assets/js/app.js' %}"></script>
        </head>

In settings.py, this is how BASEDIR and the static file location are specified

    BASE_DIR = Path(__file__).resolve().parent.parent # points to project_root/ directory
    STATIC_URL = '/static/'
    STATICFILES_DIRS = [
        os.path.join(BASE_DIR, 'static')
    ]
    STATIC_ROOT = os.path.join(BASE_DIR, 'staticFiles')

There’s ~1200 files in project_root/static/assets/ and I am seeing these get copied into project_root/staticFiles from python manage.py collectstatic . Last night I was dealing with some weridness where none of the js files were getting copied via the collectstatic command.

and urls.py for curiosity sake…

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.userLogin, name='loginHome'),
    path('login', views.userLogin, name='login'),
    path('logout', views.userLogout, name='logout'),
    path('registration', views.userRegistration, name='registration'),
    path('dashboard', views.dashboard, name='dashboard'),
]

So if python manage.py collectstatic is working… why am I still not able to see any styling at all? I’m not really sure what’s going wrong here. It’s felt way too difficult to just get a simple /static/ folder working for this project.

Are you getting a hit in the runserver terminal session to show that the browser is requesting the CSS?

I’m not seeing any hits in the terminal session.

Also I don’t have apache or nginx set up, backend stuff is new to me and I didn’t come across it in documentation. I’m starting to assume that must be what I’ve been missing this whole time?

You should be able to run/develop your project with manage.py runserver so not having Apache isn’t an issue.

If your browser is requesting the CSS then you should see those requests in the terminal running runserver. To check it for yourself directly just request the CSS in your browser 127.0.0.1:8000/static/… (or whatever the terminal says the port number is when you launch runserver.

If your browser is not requesting the CSS then you need to look at the source of the HTML to check where the browser is looking for the CSS.

If I use python manage.py runserver and then go to 127.0.0.1:8000 (that’s what my computer uses as the port number), and view the source through google chrome, then I see the code for auth-login.html as expected with the links to the css document.

    <head>

        <meta charset="utf-8" />
        <title>TEST Register | Skote - Responsive Bootstrap 4 Admin Dashboard</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
        <meta content="Themesbrand" name="author" />
        <!-- App favicon -->
        <link rel="shortcut icon" href="/static/assets/images/favicon.ico">

        <!-- Bootstrap Css -->
        <link href="/static/assets/css/bootstrap.min.css" id="bootstrap-style"/>
        <!-- Icons Css -->
        <link href="/static/assets/css/icons.min.css" type="text/css" />
        <!-- App Css-->
        <link href="/static/assets/css/app.min.css" id="app-style"  type="text/css" />
        <!-- JAVASCRIPT -->
        <script src="/static/assets/libs/jquery/jquery.min.js"></script>
        <script src="/static/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="/static/assets/libs/metismenu/metisMenu.min.js"></script>
        <script src="/static/assets/libs/simplebar/simplebar.min.js"></script>
        <script src="/static/assets/libs/node-waves/waves.min.js"></script>

        <!-- App js -->
        <script src="/static/assets/js/app.js"></script>

But the terminal running runserver doesn’t print out any lines for the css files. Instead, it prints

[24/Nov/2020 13:01:42] "GET / HTTP/1.1" 200 7194
[24/Nov/2020 13:01:42] "GET /static/assets/libs/bootstrap/js/bootstrap.bundle.mi
n.js.map HTTP/1.1" 404 1883
[24/Nov/2020 13:01:42] "GET /static/assets/libs/metismenu/metisMenu.min.js.map H
TTP/1.1" 404 1853
[24/Nov/2020 13:01:42] "GET /static/assets/libs/node-waves/waves.min.js.map HTTP
/1.1" 404 1844

If I go to http://127.0.0.1:8000/static/assets/css/bootstrap.min.css then I see the css file as expected, and runserver prints one line

[24/Nov/2020 12:15:26] "GET /static/assets/css/bootstrap.min.css HTTP/1.1" 200 1 85212

I don’t know how critical this may be but in your link tags:

  • you don’t specify rel="stylesheet"
  • you don’t consistently use type="text/css"
  • and link does not require a /> to close, it’s just >

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

(I do know that some browsers are extremely picky about such things…)

This looks like a browser/HTML issue (as KenWhitesell indicates). A further test is to see what your browser’s console is indicating with regard to those CSS elements. If it is not showing that it is attempting to load them then try modifying your CSS link.

It seems unlikely that this is a Django issue, since you’ve shown that URLs in the link elements are correct, that you can directly load the CSS via a browser request and that the runserver terminal is not showing requests for the CSS when you complete a normal page load.

For anyone else experiencing this issue, it might be worthwhile to look into clearing the browser cache. I had this same problem and when I went to look at the styles.css I could see that the response was an older version of my stylesheet, and in the request headers I saw a message like this


(it actually said * from browser cache at the time but still)

Cleared the cache and then refreshed the page and it worked.

1 Like