Django Static Files sometimes load, sometimes not load

Question

I am developing a django app in which i have made a static folder in app folder. I am encountering a problem related to static file. The problem is that while i run the app by runserver command, django does collect static files but when i change something in those static files sometime file gets updated and sometime does not get updated and instead it collects old version of those files even if i save the file and run the app again by runserver command. When I rename the static files (both css and js files) and change the index.html as per new names, the app works totally fine with updated file names for a while and i face this problem again and again. I am tired of renaming the files and not got any proper solution to this problem. I will be thankful for your opinion and help.

The folders of my app look like this:

├───.vscode
├───Project
    └───manage.py    
    └───Project
        └───__pycache__/
        └───__init__.py
        └───asgi.py
        └───setting.py
        └───urls.py
        └───wsgi.py
    ├───templates
    │   └───base.html
    └───AppName
        └───templates
            └───index.html 
        └───static
            └───AppName
                └───js
                    └───indexjs.js //--> This file gets loaded with updated version and sometimes not
                └───css
                    └───style.css  //--> This file gets loaded with updated version and sometimes not
        └───views.py
        └───models.py
        └───urls.py
              .
              .
              .
              .
   

static files setting in settings.py

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

static file settings in my index.html file looks like :

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

{% block content-style-1 %}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">



<script src="{% static 'AppName/js/jquery-3.5.1.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'AppName/css/style.css' %}">

<script src="{% static 'AppName/js/indexjs.js' %}"></script>



{% endblock %}

{% block content-1 %}

<div class="main">
    <p>To do App Django-1</p>
</div>

<div class="main-container-1"> 
        <input type="text" id="textbox-1" name="name" width="50px">
        <button type="button" id ="btn-2" class="btn btn-primary">Create</button>
</div>

<div class="card mb-1" id="task-card-id">
    <div class="card-body"><p>Card Content</p><button type="button" id="btn-3" class="close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
</div>


{% endblock %}

Answer 1

Sometimes you have to hard refresh the browser to see the changes, especially if it's Chrome. Try deleting the cookies as well to see if the problem stops. What I do sometimes is open the same page in another browser for direct comparison.

You can hard refresh by holding down ctrl and clicking the reload icon.