0

Situation

  • I have a django 3.0 application, I have built a few apps already in it that are functioning.
  • That I have tried to create an authentication app for signup, login.
  • The backend for the signup and login works.
  • But the static files like .js, .css, images are not appearing.
  • I also have a base.html file that contains all style sheet import and javascript imports that extends to this signup.html
  • somehow if I fill up the signup.html file with nothing but just putting the extensions from the base.html file it still gives me the same errors

Folder Strudture

  • mainapp-project
    • mainapp (this is where I keep a base.html file that extends to the )
    • secondapp (base.html file extends here)

settings.py

#actual folder name where we save our images
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'mainprojectfolder/static/')]

# Removed based on: https://stackoverflow.com/questions/60354519/django-base-html-extended-to-homepage-html-static-images-appear-but-home-css-d
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

#this_is_what_U_see_in_URL_bar_for_static_files
STATIC_URL = '/static/'

base.html

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

<!-- SYLES & BASICS-->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
  <title>  </title>
  <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/carousel/">
  <link rel="stylesheet" href="static/css/bootstrap/bootstrap.min.css"> <!--  -->
  <link href="static/css/style.min.css" rel="stylesheet">
</head>

<body>
<header>
...
</header>

{% block content %}
{% endblock %}


  <script src="static/public/js/jquery/jquery.min.js"></script>
  <script src="static/public/js/popper/popper.min.js"></script>
  <script src="static/public/js/bootstrap/bootstrap.min.js"></script>

</body>
</html>

signin.html

{% extends 'ch/templates/base_emp.html' %}
{% load static %}

{% block content %}

<!-- MY COTENT, no imports only file requests-->

{% endblock %}

ERROR Message

[31/Mar/2020 12:31:22] "GET /accounts/signup HTTP/1.1" 200 19987
Not Found: /accounts/static/public/js/jquery/jquery.min.js
[31/Mar/2020 12:31:22] "GET /accounts/static/public/js/jquery/jquery.min.js HTTP/1.1" 404 3285
Not Found: /accounts/static/css/style.min.css
[31/Mar/2020 12:31:22] "GET /accounts/static/css/style.min.css HTTP/1.1" 404 3246
Not Found: /accounts/static/public/js/popper/popper.min.js
[31/Mar/2020 12:31:22] "GET /assets/images/logo-icon.png HTTP/1.1" 404 2808
Not Found: /accounts/static/css/bootstrap/bootstrap.min.css
[31/Mar/2020 12:31:22] "GET /accounts/static/public/js/popper/popper.min.js HTTP/1.1" 404 3285
Not Found: /accounts/static/public/js/bootstrap/bootstrap.min.js
[31/Mar/2020 12:31:22] "GET /accounts/static/css/bootstrap/bootstrap.min.css HTTP/1.1" 404 3288
[31/Mar/2020 12:31:22] "GET /accounts/static/public/js/bootstrap/bootstrap.min.js HTTP/1.1" 404 3303
Not Found: /accounts/static/public/js/popper/popper.min.js
[31/Mar/2020 12:31:22] "GET /accounts/static/public/js/popper/popper.min.js HTTP/1.1" 404 3285
Not Found: /accounts/static/public/js/bootstrap/bootstrap.min.js
[31/Mar/2020 12:31:22] "GET /accounts/static/public/js/bootstrap/bootstrap.min.js HTTP/1.1" 404 3303
Not Found: /accounts/static/public/js/jquery/jquery.min.js
[31/Mar/2020 12:31:22] "GET /accounts/static/public/js/jquery/jquery.min.js HTTP/1.1" 404 3285
Not Found: /accounts/static/public/js/popper/popper.min.js
[31/Mar/2020 12:31:22] "GET /accounts/static/public/js/popper/popper.min.js HTTP/1.1" 404 3285
Not Found: /accounts/static/public/js/bootstrap/bootstrap.min.js
[31/Mar/2020 12:31:22] "GET /accounts/static/public/js/bootstrap/bootstrap.min.js HTTP/1.1" 404 3303
[31/Mar/2020 12:31:22] "GET /static/favicon.ico HTTP/1.1" 200 15406

Correction Approaches

  • GUIDE: In this post I have seen that I can pay with the following
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static') #if i turn on this I get another python related error
STATIC_URL = '/static/'
TEMPLATE_DIRS = (os.path.join(BASE_DIR, 'templates'),)
  • If I turn on this I get another python related error STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static')
  • To be able to correct errors I have created a /accounts/static/css/style.min.css but I still got that error as well. Not Found: /accounts/static/css/style.min.css [31/Mar/2020 12:31:22] "GET /accounts/static/css/style.min.css HTTP/1.1" 404 3246
  • This only answers general approaches that i already have done.
  • Canging .js imports from this
<script src="static/public/js/jquery/jquery.min.js"></script>
<script src="static/public/js/popper/popper.min.js"></script>
<script src="static/public/js/bootstrap/bootstrap.min.js"></script>
  • to this
<script src="{% static 'public/js/jquery/jquery.min.js' %}"></script>
<script src="{% static 'public/js/popper/popper.min.js' %}"></script>
<script src="{% static 'public/js/bootstrap/bootstrap.min.js' %}"></script>
  • ERROR
Not Found: /accounts/static/css/style.min.css
Not Found: /accounts/static/images/small.png
Not Found: /accounts/static/css/bootstrap/bootstrap.min.css
[31/Mar/2020 13:51:06] "GET /accounts/static/css/style.min.css HTTP/1.1" 404 3246
[31/Mar/2020 13:51:06] "GET /accounts/static/images/small.png HTTP/1.1" 404 3270
[31/Mar/2020 13:51:06] "GET /accounts/static/css/bootstrap/bootstrap.min.css HTTP/1.1" 404 3288
  • changing this <link rel="stylesheet" href="static/css/bootstrap/bootstrap.min.css"> to this <link rel="stylesheet" href="{% static 'css/bootstrap/bootstrap.min.css %}"> gives the following error:
TemplateSyntaxError at /accounts/signup
Could not parse the remainder: ''css/bootstrap/bootstrap.min.css' from ''css/bootstrap/bootstrap.min.css'
Request Method: GET
Request URL:    http://127.0.0.1:8000/accounts/signup
Django Version: 3.0
Exception Type: TemplateSyntaxError
Exception Value:    
Could not parse the remainder: ''css/bootstrap/bootstrap.min.css' from ''css/bootstrap/bootstrap.min.css'
Exception Location: /Users/..../site-packages/django/template/base.py in __init__, line 662
Python Executable:  /Users/..../bin/python3
Python Version: 3.7.3
Python Path:    
['/Users/..../project',
 '/Users/..../project/ven/lib/python37.zip',
 '/Users/..../project/ven/lib/python3.7',
 '/Users/..../project/ven/lib/python3.7/lib-dynload',
 '/usr/local/Cellar/python/3.7.3/Frameworks/Python.framework/Versions/3.7/lib/python3.7',
 '/Users/..../lib/python3.7/site-packages']
Server time:    Tue, 31 Mar 2020 14:00:00 +0000
sogu
  • 2,738
  • 5
  • 31
  • 90
  • Your static urls in your template should be of the form `{% static 'public/js/...' %}` as explained [here](https://docs.djangoproject.com/en/stable/howto/static-files/#configuring-static-files) in step 3. – dirkgroten Mar 31 '20 at 13:48
  • You have to change it everywhere in your templates. Also where you import css or images. – dirkgroten Mar 31 '20 at 13:56
  • What's surprising is that you actually did this already for your favicon.ico. But not for any of the other static files... – dirkgroten Mar 31 '20 at 14:04

2 Answers2

3

You should change the:

<script src="static/public/js/jquery/jquery.min.js"></script>
...

into 

<script src="{% static 'public/js/jquery/jquery.min.js' %}"></script>
...
binpy
  • 3,994
  • 3
  • 17
  • 54
  • did not worked I have added the description to my question, but thank you – sogu Mar 31 '20 at 13:55
  • Look at the errors!!!! They actually tell you that it worked, it's not complaining anymore about the js files not found! – dirkgroten Mar 31 '20 at 13:58
2

Look at the path it's trying to fetch:

/accounts/static/public/js/jquery/jquery.min.js

That's not what you want, since in urls.py anything starting with /accounts is pointing to your authentication views.

The problem is that you're using relative paths for your static files: static/public/js doesn't start with a / so it's relative to the current page. If the page is /account/login, then the path is relative to /account/.

So basically you need to have /static/public/js/.... It starts with / so it's an absolute path.

But the whole reason of defining STATIC_URL is so that you don't have to remember it in your template. For this, there's the static template tag:

{% load static %}
<!-- scripts -->
<script src="{% static 'public/js/...' %}"></script>

<!-- css files -->
<link rel="stylesheet" href="{% static 'css/bootstrap/bootstrap.min.css' %}">

<!-- images -->
<img src="{% static 'images/small.png' %}">

Always use {% static %} everywhere in your templates when referring to static files, that's the bottomline.

dirkgroten
  • 20,112
  • 2
  • 29
  • 42
  • I have tried this `````` added to the bottom of my question (very bootm) not working. Is there any other way? – sogu Mar 31 '20 at 14:00
  • No there isn't. It actually worked because the error messages about the missing js files have gone. Look at the errors, please. – dirkgroten Mar 31 '20 at 14:01
  • added new error based on recommended changes to the bottom of my question – sogu Mar 31 '20 at 14:05
  • Do you read the errors??? It says in the error what the problem is. What can I say? the error is that you wrote `''css/bootstrap/bootstrap.min.css'`. – dirkgroten Mar 31 '20 at 14:06
  • I can read it but I don't understand why does it want to parse anything. – sogu Mar 31 '20 at 14:07
  • What can I say? the error is that you wrote `'css/bootstrap/bootstrap.min.css` and it doesn't know how to parse this as part of the `{% static %}` tag. – dirkgroten Mar 31 '20 at 14:09
  • So Now I have changed your answer `````` to `````` (added one ' at the end) – sogu Mar 31 '20 at 14:11
  • But when I reload the page it does not notice the change that I have added that ' it still gives me `````` – sogu Mar 31 '20 at 14:14
  • 1
    then you either didn't save correctly or something with your server that doesn't see the changed template. restart your server in that case. – dirkgroten Mar 31 '20 at 15:31
  • Thak you very much – sogu Apr 01 '20 at 00:00