Django does not retrieve static files

Question

I need to work with Sql Server so I am using Django==2.1. However, I am encountering a problem with the static files. I have read previous posts but none of them seem to work in my case.

Project Structure

- A: Management Dashboard
  -- B: Main App
  ----- C: migrations
  ----- C: static
  ----- C: admin.py
  ----- C: apps.py
        .
        .
  ----- C: views.py
  -- B: Management Dashboard
  ----- C: settings.py
  ----- C: urls.py
  ----- C: wsgi.py
  -- B: templates
  -- B: db.sqlite3
  -- B: manage.py

My settings.py file looks like:

INSTALLED_APPS = [
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'MainApp.apps.MainappConfig',
     'ManagementDashboard', ]

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

STATIC_URL = '/static/'

My base.html file looks like this:

 {% load static %}
 <html ln="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <title>Management Dashboard</title>

    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <!-- Our Custom CSS -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />

</head>


<body>

    <div class="wrapper">
        <!-- Sidebar -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <h3>AVS</h3>
            </div>
            <ul class="list-unstyled components">
                <p>Management Dashboard</p>
                <li class="active">
                    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="fa fa-home" aria-hidden="true"></i> Home</a>
                    <ul class="collapse list-unstyled" id="homeSubmenu">
                        <li>
                            <a href="#">Home 1</a>
                        </li>
                        <li>
                            <a href="#">Home 2</a>
                        </li>
                        <li>
                            <a href="#">Home 3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
                    <ul class="collapse list-unstyled" id="pageSubmenu">
                        <li>
                            <a href="#">Page 1</a>
                        </li>
                        <li>
                            <a href="#">Page 2</a>
                        </li>
                        <li>
                            <a href="#">Page 3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Portfolio</a>
                </li>
                <li>
                    <a href="#">Content</a>
                </li>
            </ul>    
        </nav>

        <!-- Page Content -->
        <div id="content">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <button type="button" id="sidebarCollapse" class="btn btn-info">
                        <i class="fa fa-align-left"></i>
                        <span>Toggle Sidebar</span>
                    </button>
                    <button class="btn btn-dark d-inline-block d-lg-none-ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <i class="fas fa-align-justify"></i>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="nav navbar-nav ml-auto">
                            <li class="nav-item"><a class="nav-link" href="#">Page</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Page</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Page</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Page</a></li>
                        </ul>
                    </div>
                </div>
            </nav>

            
            {% block content %}

            {% endblock %}
    
    
    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>


    <script>
         $(document).ready(function () {
            $('#sidebarCollapse').on('click', function () {
            $('#sidebar').toggleClass('active');
            });
        });
    </script>
</body>

However it does not appear to serve any styling from my css file.

My expected result should be something like this:

However my actual result is this:

I should mention that when I open the same file with Chrome as an html format, it works just fine. Once I connect it to Django and I try to fetch the static files, it appears that it does not work.

Your help would be much appreciated.

score 1 · Accepted Answer · answered Sep 16 '20 at 13:23

1

Put the static folder into the B: static not into the main app.

and add this line in settings.py

for development environment

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

for Production environment

STATIC_ROOT = "/var/www/example.com/static/"

and also add:

these lines in your Project Level url.py

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

answered Sep 16 '20 at 13:23

Muntakimur Rahaman

169
1
9

I followed your instructions but there is no improvement. I do not get any particular error but I cannot see the styling. – Krye Kuzhinieri Sep 16 '20 at 13:33
Did you replace the STATIC_ROOT with the STATICFILES_DIRS? – Muntakimur Rahaman Sep 16 '20 at 13:52
Yes I did. Django does not allow to have both of them at the same time since it throws an error. – Krye Kuzhinieri Sep 16 '20 at 13:58
Could it be related to the HTML code? Is that possible to happen? – Krye Kuzhinieri Sep 16 '20 at 14:01
Did you put your static folder outside of the app folder? I mean app, templates and statics should be in the same project directory. The static folder shouldn't be in the app directory. – Muntakimur Rahaman Sep 16 '20 at 14:03
Yes, I followed all of your instructions carefully. Still there is no change though. – Krye Kuzhinieri Sep 16 '20 at 14:04
Then try this link https://stackoverflow.com/questions/12809416/django-static-files-404 – Muntakimur Rahaman Sep 16 '20 at 14:08
I checked your suggestions once more and you were right. I had a mistake in the structure of the project. Thanks! – Krye Kuzhinieri Sep 25 '20 at 11:50

score 1 · Answer 2 · answered Sep 16 '20 at 13:28

1

add your project name in setting.py

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'yourprojectname',
 ]

answered Sep 16 '20 at 13:28

Neeraj Vishwakarma

124
6

My project name is already in the installed apps. Project name = 'ManagementDashboard' and App name = MainApp.apps.MainappConfig – Krye Kuzhinieri Sep 16 '20 at 13:34

Django does not retrieve static files

2 Answers2