Django unable to load JS and CSS files as static resources

Question

I have a html file called base.html inside a folder called html. There are two directories at the same level as html - js and css which contain static resources. The base.html refers those static resources through relative paths, like

<script type="text/javascript" src="../js/debounce.js"></script>
<link rel="stylesheet" href="../css/base.css">

It works as expected. Now I copied the entire directory structure to my django project. This is how the root folder ecom looks like:

The customviews directory contains the html, js and css directories, as well as a myview.py file, which is refered to in the urls.py file within the ecom subdirectory as:

from customviews.myview import *
urlpatterns = [url(r'^admin/', admin.site.urls),
               url(r'^time/$', current_datetime),
               url(r'^base/', base)]

The base method in myviews.py simply runs as follows:

def base(request):
    return render_to_response("base.html")

And the relevant part of settings.py looks like this:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'DIRS': [os.path.join(dirfunc(dirfunc(__file__)), 'templates').replace('\\', '/'),
                 os.path.join(dirfunc(dirfunc(__file__)), 'customviews/html').replace('\\', '/'),
                 os.path.join(dirfunc(dirfunc(__file__)), 'customviews/js').replace('\\', '/'),
                 os.path.join(dirfunc(dirfunc(__file__)), 'customviews/css').replace('\\', '/')],
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

When I fire up the server and load base, only the basic html is rendered, the css and js are missing. How do I load both?

Don't have any I guess. I mean, I did not add anything extra to the default files. I did read something about them here: docs.djangoproject.com/en/1.9/ref/settings/…, but could not understand how to apply them. At the bottom of settings.py there seems to be a STATIC_URL = '/static/' line. — NedStarkOfWinterfell
– NedStarkOfWinterfell, Commented Jul 11, 2016 at 21:11

miyamoto · Accepted Answer · 2016-07-11 21:12:11Z

3

You don't need to be including the static resource folders in your template dirs. What you do need to do is set your STATICFILES_DIRS under settings and include a static tag in your templates are calling those resources.

answered Jul 11, 2016 at 21:12

miyamoto

1,54010 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

NedStarkOfWinterfell Over a year ago

So in this case, the dirs list would consist of the full paths to my css and js folders?

miyamoto Over a year ago

If you have all your static resources in one folder, you can just point to that folder and then include the rest of the path with the static tag. Make sure there are no files in the folder that you wouldn't want public. I would advise putting them in a subdirectory named static within ecom and then the static tag would know to look there without you pointing to it.

NedStarkOfWinterfell Over a year ago

No I have multiple folders, like images, css, js which need to be separate for maintenance purpose. And what do I have to do to the way they are being referenced within the HTML? Currently they are referenced as ../js/foo.js or ../images/test.jpg. How will those paths change?

miyamoto Over a year ago

They can still all be in separate folders, just within the same subdirectory. The references in the templates would have to be changed to "{% static "js/foo.js %}" or "{% static "images/test.jpg" %}"

NedStarkOfWinterfell Over a year ago

So here, for example, all the css, js and images folders are within customviews. What should be the value of STATICFILES_DIRS and static tags, as well as the image path mentioned in the HTML file? Just one note, I am not using any template feature in the HTML file, just raw, dumb HTML for now. Do I still need template tags there?

|

Collectives™ on Stack Overflow

Django unable to load JS and CSS files as static resources

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related