Django project - JS not loading after moving it out of HTML to own file in static folder

Question

When i had the JS directly in the HTML file, everything worked as expected. Since I moved it to a spots.js file, it doesn't load or appear in the network tab, but i can reach it by going to file location in the server. I am in Debug mode.

In my settings.py I have:

STATIC_URL = '/users/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
STATIC_ROOT = os.path.join(BASE_DIR, 'var', 'static')

In my urls.py, I have:

urlpatterns = [
    path('', home, name='users-home'),
    path('register/', RegisterView.as_view(), name='users-register'),
    path('profile/', profile, name='users-profile'),
    path('select-spots/', select_spots, name='select-spots'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

In my views.py I have:

@login_required
def select_spots(request):
    spots = []
    with open('spotscsv.csv') as csvfile:
        reader = csv.DictReader(csvfile)
        for row in reader:
            spots.append({
                'name': row['name'],
                'latitude': float(row['latitude']),
                'longitude': float(row['longitude']),
            })
    return render(request, 'users/select_spots.html', {'spots': spots})

And in my select_spots.html, I have:

{% extends 'users/base.html' %}
{% load static %}

<script src="{% static 'myapp/spots.js' %}"></script>

Folder structure:

I tried changing the spots location, modifying code, running collectstatic with no luck.

Answer 1

Some of settings are pointing nowhere or misused.

STATIC_URL

STATIC_URL = '/users/static/'

this looks like attempt to map to the folder /users/static/myapp/.. but STATIC_URL is not about folders, it's the root URL for referencing static files in templates. Try changing it to

STATIC_URL = '/how_i_reach_my_static_files/'

feel free to shorten it after you realize how every settings option affects static files setup

STATIC_ROOT

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

This option cannot have wrong value. It's the folder which is supposed to be mapped to STATIC_URL and where to all the static files will be delivered after running collectstatic. BASE_DIR/var/static/ seems to exist thus this option is configured fine.

STATICFILES_DIRS

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

this thing is ruined, it is pointing to nowhere. STATICFILES_DIRS is a list of places where from static files should be collected to STATIC_ROOT during collectstatic. You don't have BASE_DIR/static folder. And I guess collectstatic command log currently is saying that it did not do a thing.

Instead you have static folder under users app. Valid path to this folder would be

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

However Django has built-in tool for collecting all the static folders from any app with no need to list them all in STATICFILES_DIRS manually. To achieve this you need to set STATICFILES_FINDERS like this

[
    "django.contrib.staticfiles.finders.FileSystemFinder",
    "django.contrib.staticfiles.finders.AppDirectoriesFinder",
]

actually this is the default value.

myapp/spots.js

After you fix thing mentioned above you can run collectstatic and it will list found static files and copy them to STATIC_ROOT = BASE_DIR/var/static. If you look into this folder you will notice that all the static files copied from specific apps are located in folders named after those apps. And myapp/spots.js will be stored under

/var/static/users/myapp/ - because it came from app users

Which means that URL

{% static 'myapp/spots.js' %}

is wrong. Correct one would be

{% static 'users/myapp/spots.js' %}

have a look at

• docs are pretty straightforward and very verbose.

• django admin app which is a regular app and is organized as supposed to:

  • there is a folder admin/static
  • files are referenced like this {% static "admin/css/responsive.css" %}
  • if you included admin into INSTALLED_APPS then after running collectstatic you will see folder var/static/admin
  • use this setup as an example and do similarly

• some other answers