Django not loading CSS and JS files into browser

Question

I am working on my first Django application. I built a template HTML file but cannot get the CSS and JS files to load when viewing on my localhost. I have consulted the Django official documentation but cannot manage to identify the issue. I have cleared the my browser's cache but it did not make a difference.

Settings.py

{% load static %} (included at the top of the script)

STATIC_ROOT= os.path.join(BASE_DIR, 'static')
STATIC_URL = 'static/'
STATICFILES_DIR = [
    os.path.join(BASE_DIR, 'stltaxauctionmap/static')
]

templates/base.html - CSS

<link
      href="http://fonts.googleapis.com/css?family=Roboto:300,400,700"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="{% static '/fonts/font-awesome.css' %}"
      rel="stylesheet"
      type="text/css"
    />
    <link
      rel="stylesheet"
      href="{% static 'bootstrap/css/bootstrap.css' %}"
      type="text/css"
    />
    <link
      rel="stylesheet"
      href="{% static 'css/bootstrap-select.min.css' %}"
      type="text/css"
    />
    <link
      rel="stylesheet"
      href="{% static 'css/jquery.slider.min.css' %}"
      type="text/css"
    />
    <link rel="stylesheet" href="{% static 'css/owl.carousel.css' %}" />
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />

templates/base.html - JS

<script
      type="text/javascript"
      src="{% static 'js/jquery-2.1.0.min.js' %}"
    ></script>
    <script
      type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"
    ></script>
    <script
      type="text/javascript"
      src="{% static 'js/jquery-migrate-1.2.1.min.js' %}"
    ></script>
    <script
      type="text/javascript"
      src="{% static 'bootstrap/js/bootstrap.min.js' %}"
    ></script>
    <script
      type="text/javascript"
      src="{% static 'js/smoothscroll.js' %}"
    ></script>
    <script
      type="text/javascript"
      src="{% static 'js/markerwithlabel_packed.js' %}"
    ></script>
    <script type="text/javascript" src="{% static 'js/infobox.js' %}"></script>
    <script
      type="text/javascript"
      src="{% static 'js/owl.carousel.min.js' %}"
    ></script>
    <script
      type="text/javascript"
      src="{% static 'js/bootstrap-select.min.js' %}"
    ></script>
    <script
      type="text/javascript"
      src="{% static 'js/jquery.validate.min.js' %}"
    ></script>
    <script
      type="text/javascript"
      src="{% static 'js/jquery.placeholder.js' %}"
    ></script>
    <script
      type="text/javascript"
      src="{% static 'js/icheck.min.js' %}"
    ></script>
    <script
      type="text/javascript"
      src="{% static 'js/jquery.vanillabox-0.1.5.min.js' %}"
    ></script>
    <script
      type="text/javascript"
      src="{% static 'js/retina-1.1.0.min.js' %}"
    ></script>
    <script
      type="text/javascript"
      src="{% static 'js/jshashtable-2.1_src.js' %}"
    ></script>
    <script
      type="text/javascript"
      src="{% static 'js/jquery.numberformatter-1.2.3.js' %}"
    ></script>
    <script type="text/javascript" src="{% static 'js/tmpl.js' %}"></script>
    <script
      type="text/javascript"
      src="{% static 'js/jquery.dependClass-0.1.js' %}"
    ></script>
    <script
      type="text/javascript"
      src="{% static 'js/draggable-0.1.js' %}"
    ></script>
    <script
      type="text/javascript"
      src="{% static 'js/jquery.slider.js' %}"
    ></script>
    <script
      type="text/javascript"
      src="{% static 'js/markerclusterer_packed.js' %}"
    ></script>
    <script
      type="text/javascript"
      src="{% static 'js/custom-map.js' %}"
    ></script>
    <script type="text/javascript" src="{% static 'js/custom.js' %}"></script>

urls.py

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

urlpatterns = [
    path('', include('pages.urls')),
    path('admin/', admin.site.urls),
]

All URLs report 404: Picture of the errors in my browser

Folders:

Folder Structure

note, I'm working on Windows.

`'\fonts\font-awesome.css'` wrong slash direction. Please show your folder structure and urls.py — Ivan Starostin, Feb 23 '22 at 16:11
also have a look at these answers [one](https://stackoverflow.com/questions/66437690/django-html-template-cant-find-static-css-and-js-files/66439076#66439076) [two](https://stackoverflow.com/questions/53590409/static-files-not-getting-loaded-in-django-python/53591167#53591167) — Ivan Starostin, Feb 23 '22 at 16:18
@IvanStarostin - Thank you for your suggestions. Below is my urls.py file. I am working on figuring out how to display my folder structure. 'from django.contrib import admin from django.urls import path, include urlpatterns = [ path('', include('pages.urls')), path('admin/', admin.site.urls), ]' — , Feb 24 '22 at 02:08
@IvanStarostin - Thank you for your suggestion. In the Django documentation it says "If you use django.contrib.staticfiles as explained above, runserver will do this automatically when DEBUG is set to True." DEBUG is set to True on my application. I assume this means that this fix won't work for me. — , Feb 24 '22 at 13:33

score 0 · Answer 1 · answered Feb 23 '22 at 04:15

0

Your static settings are incorrect. Try this:

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

Do note that BASE_DIR gives you your project directory. So when you do os.path.join(BASE_DIR, 'myproject/static'), it becomes myproject/myproject/static.

answered Feb 23 '22 at 04:15

Naeem Khan

950
4
13
34

I tried this suggestion but it didn't work for me. This is the error that I received. ?: (staticfiles.W004) The directory 'static' in the STATICFILES_DIRS setting does not exist. – Feb 24 '22 at 01:59
Can you show me your directory structure? – Naeem Khan Feb 24 '22 at 03:46
I added a picture of the directory structure to the bottom of the post. Thank you for your help. – Feb 24 '22 at 11:11
You have two static folder. The one outside should be working. Are the files shown missing in your post in the `stltaxauctionmap/static` or `stltaxauctionmap/stltaxauctionmap/static`? – Naeem Khan Feb 24 '22 at 12:00
.\stltaxauctionmap\stltaxauctionmap\static – Feb 24 '22 at 12:53
That's your problem. You need to either move your static files from `./stltaxauctionmap/stltaxauctionmap/static` to `./stltaxauctionmap/static` or change the `STATICFILES_DIRS` to `stltaxauctionmap/static`. – Naeem Khan Feb 24 '22 at 12:55
The static folder in the root directory was created when I ran the collectstatic command. – Feb 24 '22 at 12:56
I've changed the STATICFILES_DIRS to stltaxauctionmap/static, stltaxauctionmap/stltaxauctionmap/static and /static and none of these have worked for me. The full path to my static directory is C:\Django\stltaxauctionmap\stltaxauctionmap\static – Feb 24 '22 at 13:36
I think I discovered the problem. Django is trying to pull files from outside of the virtual environment. I received this error when I was trying to run the server. File "C:\Users\BradS\AppData\Local\Packages\PythonSoftwareFoundation.Python.3.9_qbz5n2kfra8p0\LocalCache\local-packages\Python39\site-packages\django\contrib\gis\gdal\libgdal.py", line 46, in The path for my virtual environment is C:\Django\stltaxauctionmap\venv How can I fix this? – Feb 24 '22 at 20:29

Django not loading CSS and JS files into browser

1 Answers1