'css and other assets not loading for my django webapp

CSS, JS, fonts, images and other assets are not being loaded into my django app index.html. All the assets for the app are present inside the application app in my django project under "templates/assets". I have tried the other answer which I was getting as suggestion to this question but even that solution did not work for me.

[04/May/2022 05:48:50] "GET /assets/js/glightbox.min.js HTTP/1.1" 404 2311
Not Found: /assets/js/count-up.min.js
[04/May/2022 05:48:50] "GET /assets/js/count-up.min.js HTTP/1.1" 404 2308
Not Found: /assets/js/main.js
[04/May/2022 05:48:50] "GET /assets/js/main.js HTTP/1.1" 404 2284

Here is my dir tree structure :

Project Name : myproject
App name that serves index.html : app

├── app
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── templates
│   │   ├── 404.html
│   │   ├── assets
│   │   │   ├── css
│   │   │   │   ├── LineIcons.2.0.css
│   │   │   │   ├── animate.css
│   │   │   │   ├── bootstrap.min.css
│   │   │   │   ├── glightbox.min.css
│   │   │   │   ├── main.css
│   │   │   │   └── tiny-slider.css
│   │   │   ├── fonts
│   │   │   │   ├── LineIcons.eot
│   │   │   │   ├── LineIcons.svg
│   │   │   │   ├── LineIcons.ttf
│   │   │   │   ├── LineIcons.woff
│   │   │   │   └── LineIcons.woff2
│   │   │   ├── images
│   │   │   │   ├── favicon.svg
│   │   │   │   ├── hero
│   │   │   │   │   └── phone.png
│   │   │   │   └── logo
│   │   │   │       ├── logo.svg
│   │   │   │       └── white-logo.svg
│   │   │   ├── js
│   │   │   │   ├── bootstrap.min.js
│   │   │   │   ├── count-up.min.js
│   │   │   │   ├── glightbox.min.js
│   │   │   │   ├── main.js
│   │   │   │   ├── tiny-slider.js
│   │   │   │   └── wow.min.js
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── manage.py
└── myproject
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

settings.py

STATIC_ROOT = os.path.join(BASE_DIR, '/templates/assets')
STATIC_URL = 'static/'

How do I resolve this?

index.html

<link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.svg" />

<!-- ========================= CSS here ========================= -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/LineIcons.2.0.css" />
<link rel="stylesheet" href="assets/css/animate.css" />
<link rel="stylesheet" href="assets/css/tiny-slider.css" />
<link rel="stylesheet" href="assets/css/glightbox.min.css" />
<link rel="stylesheet" href="assets/css/main.css" />

EDIT : As asked in comments, on changing the static path I get

[04/May/2022 06:33:36] "GET /static/css/bootstrap.min.css HTTP/1.1" 404 1929
[04/May/2022 06:33:36] "GET /static/css/animate.css HTTP/1.1" 404 1911
[04/May/2022 06:33:36] "GET /static/css/LineIcons.2.0.css HTTP/1.1" 404 1929
[04/May/2022 06:33:36] "GET /static/css/tiny-slider.css HTTP/1.1" 404 1923
[04/May/2022 06:33:36] "GET /static/css/main.css HTTP/1.1" 404 1902
[04/May/2022 06:33:36] "GET /static/css/glightbox.min.css HTTP/1.1" 404 1929

Solution 1:^[1]

{% load static %} looks for static files under STATIC_ROOT, static folders inside each app and STATIC_FILESDIR that we specified in setting.py.

Django convention states to have a separate app folder for each app inside the static folder. This is to prevent any conflict that may happen when we run the collectstatic command between files of same name present inside the STATIC_FILESDIR.

Also STATIC_ROOT is the path where we keep all our static assets after collectstatic command is run.

So I would suggest you to add the path to assets directory in your STATIC_FILESDIR or create a folder inside each app with the name static and move all your static assets there because by default djnago looks for static files in all locations defined in STATICFILES_DIRS and in the 'static' directory of apps specified by the INSTALLED_APPS setting. Or if you want to go your way, you will have to specify as many number of paths to the assets directory in STATICFILES_DIRS as many number of app you have.

Solution 2:^[2]

{% load static %}

<link rel="shortcut icon" type="image/x-icon" href="{% static 'assets/images/favicon.svg' %}" />

<!-- ========================= CSS here ========================= -->
<link rel="stylesheet" href="{% static 'assets/css/bootstrap.min.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/LineIcons.2.0.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/animate.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/tiny-slider.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/glightbox.min.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/main.css' %}" />

If you want to use static files, Write "{% load static %}" and {% static 'path' %}

Solution 3:^[3]

setting.py

STATICFILES_DIRS = [
BASE_DIR / "static",
'/var/www/static/',
]

Add this code into settings.py file in the below. and After adding try to refresh the paga by using crt+shift+r shortcut. It hasppens to same problem i added the above code and refresh the page with shoutcut boom. It will worked for me

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	seokmin-kang
Solution 3	S.Manjunath

'css and other assets not loading for my django webapp

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]