django html template can’t find static css and js files

by

Some of settings are misused:

STATIC_URL = '/static/' – this is fine

STATIC_ROOT = '/vira_app/template' – nope, this is supposed to be some folder not really related to the project structure. In the end, on prod it can be a CDN URL or a folder on different server. So try changing it to something like STATIC_ROOT = os.path.join(BASE_DIR, 'static') for the start.

As mentioned in comments you might need to define STATICFILES_DIRS – a list of folders where from static files must be collected to STATIC_ROOT by collectstatic command. This means you can have many subfolders containing static files in different places. However you’ll need to collect those files all together to deploy somewhere. STATICFILES_DIRS + collectstatic will collect all of those files for you into given STATIC_ROOT (and contents of this folder should be deployed somewhere, to CDN for example).

Note, default set of STATICFILES_FINDERS already contains AppDirectoriesFinder which will automatically find all the static subfolders in any of the project apps. This means if you move static subfolder from templates to the vira_app root – you won’t have to mention it in the STATICFILES_DIRS.

So:

  • STATIC_ROOT should not point to any templates subfolders, change it to something more “global”
  • STATICFILES_DIRS should link to the folder(s) where you keep your static files now or this folder should be moved to the root of vira_app to let collectstatic find it
  • collectstatic must be run before checking your styles and scripts in rendered page
  • after running collectstatic all the static files must persist in STATIC_ROOT so django will be able to map relative urls after STATIC_URL to relative paths after STATIC_ROOT and those files will be loaded

PS

Note, some of your static files are linked in wrong way in the shown template:

 <script src="assets/vendor/aos/aos.js"></script>

this should be changed to {% static... as well.

More Related Contents:

  1. Differences between STATICFILES_DIR, STATIC_ROOT and MEDIA_ROOT
  2. Iterate over model instance field names and values in template
  3. Creating a dynamic choice field
  4. Django, creating a custom 500/404 error page
  5. Reference list item by index within Django template?
  6. Django TemplateDoesNotExist?
  7. How to compare dates in Django templates
  8. How to call function that takes an argument in a Django template?
  9. Iterating through two lists in Django templates
  10. How do I include image files in Django templates?
  11. How to make Django slugify work properly with Unicode strings?
  12. Django: Display Choice Value
  13. What’s the point of Django’s collectstatic?
  14. How do I perform query filtering in django templates
  15. is there a way to loop over two lists simultaneously in django?
  16. How do I use Django templates without the rest of Django?
  17. Access request in django custom template tags
  18. How to redirect with messages to display them in Django Templates?
  19. How to get the domain name of my site within a Django template?
  20. matching query does not exist Error in Django
  21. How to access the user profile in a Django template?
  22. How do I call a Django function on button click?
  23. Django staticfiles not found on Heroku (with whitenoise)
  24. How to put comments in Django templates?
  25. Can I make STATICFILES_DIR same as STATIC_ROOT in Django 1.3?
  26. Django foreign key relation in template
  27. Static media images are not displaying in Django
  28. How to override css in Django Admin?
  29. How to add multiple arguments to my custom template filter in a django template?
  30. How to implement a “back” link on Django Templates?

Leave a Comment