Django Static Files are not visible

Question

My Django website will not show CSS or JS using the Django static file management

My html (live version available here)

{% load staticfiles %}
<html>
    <head>

        <!-- THESE WORK LOCALY BUT DO NOT WORK ON THE SERVER -->              
        <link rel = "stylesheet" href ="{% static "survey/css/bootstrap.min.css" %}" >
        <link rel = "stylesheet" href ="{% static "survey/css/bootstrap.css" %}"> 

        <link rel="stylesheet" href ="{% static "survey/css/jquery-ui.css" %}"> 

        <link rel="stylesheet" href ="{% static "survey/css/slider.css" %}">                
        <link rel="stylesheet" href="{% static "survey/resources/demos/style.css"  %}">    

        <script src="{% static "survey/js/jquery.min.js" %}"></script>               
        <script src="{% static "survey/js/jquery-ui.js" %}"></script>   
        <script src="{% static "survey/js/slider.js" %}"></script>

My settings.py

STATIC_ROOT = '/var/www/bias_experiment/static'
STATIC_URL = '/static/'

My Apache defaults file /etc/apache2/sites-available/defaults

NOTE: I am not able to use a <VirtualHost> due to the fact that "the server name you are using is the main name of that server" as I found out in another SO question So i have put thsi all in the defaults file.

<VirtualHost *:80>

AliasMatch ^/([^/]*\.css) /var/www/bias_experiment/src/survey/static/$1

Alias /static/ /var/www/bias_experiment/src/survey/static/
<Directory /var/www/bias_experiment/src/survey/static>
Order deny,allow
Allow from all
</Directory>

WSGIScriptAlias /bias_experiment /var/www/bias_experiment/src/bias_experiment/index.wsgi
<Directory /var/www/bias_experiment/src/bias_experiment>
<Files index.wsgi>
Order deny,allow
Allow from all
</Files>
</Directory>

....
(other Apache default code here) 
....

</VirtualHost>

'django.contrib.staticfiles', is included in the INSTALLED_APPS
I have set the permissions of the static folder to www-data
I have run collectstatic

This is some of the output of `colllectstatic'

....
Copying '/var/www/bias_experiment/src/survey/static/survey/css/jquery-ui.theme.css'
Copying '/var/www/bias_experiment/src/survey/static/survey/css/bootstrap.min.css'
Copying '/var/www/bias_experiment/src/survey/static/survey/css/bootstrap-theme.css'
Copying '/var/www/bias_experiment/src/survey/static/survey/css/slider.css'

36 static files copied, 103 unmodified.
 - I have restarted Apache

I am on a shared VM running Apache 2.2.22 and mod_wsgi 3.3-4ubuntu0.1

Yet none of the static files will appear.

Any helps is much appreciated

EDIT 1

As per Stevens suggestion I have updated the static root to

STATIC_ROOT = '/var/www/bias_experiment/src/survey/static/'

But with no luck.

EDIT 2

This is the file permissions for each of the files down to and including one of the CSS files. I believe they are correct?

/var/www/bias_experiment/static/survey/css/bootstrap.css

-rw-r--r-- 1 www-data www-data 121463 Jul 22 19:17 bootstrap.css

/var/www/bias_experiment/static/survey/css

drwxr-xr-x 2 www-data www-data 4096 Jul 22 19:17 css

/var/www/bias_experiment/static/survey

drwxr-xr-x 6 www-data www-data 4096 Jul 18 14:44 survey

/var/www/bias_experiment/static

drwxr-xr-x 10 www-data www-data 4096 Jul 22 19:17 static

EDIT 3 ls -ltr /var/www/bias_experiment/src/survey/static/

enter image description here

Do you have access to the Apache logs? Usually it provides more information about where it is trying to access the files on the local filesystem, and you can at least see and make sure that it is trying to access an existing file, in the right place... etc... — Pierre Drescher, Jul 25 '14 at 17:05

score 2 · Answer 1 · answered Jul 22 '14 at 22:56

2

Your STATIC_ROOT is incorrect, it should be

STATIC_ROOT = /var/www/bias_experiment/src/survey/static/

Do you have STATICFILES_DIRS set correctly: it looks like your static root might be in this tuple based on the output of collectstatic.

Finally, is the AliasMatch doing anything useful?

answered Jul 22 '14 at 22:56

Steven

2,658
14
15

I have changed the STATIC_ROOT as you suggested. I was not using STATICFILES_DIRS but have now added them (See Edit above). I included the AliasMatch because that was in the DjangoProject documentation. I have tried it with and without it but with no success. I currently have it commented out. Still not working as you can see by looking at the live page http://phaedrus.scss.tcd.ie/bias_experiment/slide_test/ Thanks – Deepend Jul 23 '14 at 11:01
`STATIC_ROOT` is where `collectstatic` will gather files to, and `STATICFILES_DIRS` is a set of directories where `collectstatic` will look for static files to gather (in addition to looking within apps, etc). It probably doesn't make much sense to have `STATICFILES_DIRS` that live under your `STATIC_ROOT` and it is certainly confusing! – Steven Jul 23 '14 at 11:47
After you run `collectstatic` can you `ls -ltr` the directory `/var/www/bias_experiment/src/survey/static/` – Steven Jul 23 '14 at 11:49
Agreed, I have removed the STATICFILES_DIRS as it it under my static root. Running `ls -ltr` shows the CSS and JS files. Also my css, js and fonts folders. – Deepend Jul 23 '14 at 14:08
You have not shown us the result of `ls -ltr /var/www/bias_experiment/src/survey/static/` This is where Apache is serving from, unless you have some symlinks going on. – Steven Jul 23 '14 at 15:10
Hi Stephen, I have added that now, sorry for the delay. – Deepend Jul 23 '14 at 16:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/57860/discussion-between-steven-and-deepend). – Steven Jul 23 '14 at 16:14
I am awarding this the bounty as it was the most helpful when trying to solve my problem. – Deepend Jul 25 '14 at 21:52

score 1 · Answer 2 · answered Jul 21 '14 at 00:01

1

In your apache config file, change "Allow from all" to "Require all granted". Also make sure you have the correct file permissions on your static files.

answered Jul 21 '14 at 00:01

Nick Polet

41
5

Thanks for the help. As I am running Apache/2.2.22 (Ubuntu), as per the Django Project documentation. "If you are using a version of Apache older than 2.4, replace Require all granted with Allow from all and also add the line Order deny,allow above it." I have set the static folder and the CSS and JS folders inside to be owned by www-data using `sudo chown www-data:www-data` I believe this is correct. Still not working. – Deepend Jul 21 '14 at 19:29

score 1 · Answer 3 · answered Jul 23 '14 at 11:20

1

From your live site, I noticed that you are getting 403 Forbidden responses on your static files which means that the files are there, but www-data doesn't have read permissions on them. Make sure you chown the static root recursively (after all of the static assets are there).

A simple sudo chown -R www-data:www-data /var/www/bias_experiment/src/survey/static/ should fix it.

answered Jul 23 '14 at 11:20

garnertb

9,454
36
38

You are correct, looking at the live site in the Chrome Console it is 403 errors. I first used your command but to no effect. I believe that is the location it is coppying the files from. I then changed the permissions of the bias_experiment/static/survey/css etc as that is where the Console was trying to retrieve them from. Could you take a look and see what you think? Thanks – Deepend Jul 23 '14 at 13:40

score 1 · Answer 4 · edited May 23 '17 at 10:33

1

Erm... STATIC_ROOT must be the folder where you want your static files to be collected and STATICFILES_DIRS are the folders where static files are collected from more info. So, STATICFILES_DIRS should be outside your STATIC_ROOT folder and, you want Apache to serve the files that are in STATIC_ROOT.

Being your STATIC_ROOT and STATICFILES_DIRS correctly set (one way to test this is running on local host with DEBUG=True mode and DEBUG=False mode after calling the collectstatic), you only need to set an Alias for your static.

WSGIScriptAlias / <REPLACE_BY_YOUR_WSGI_FILE_PATH>
Alias /static/ <REPLACE_BY_YOUR_STATIC_ROOT>

edited May 23 '17 at 10:33

Community

1
1

answered Jul 23 '14 at 13:10

argaen

4,145
24
28

I have removed the STATICFILES_DIRS. The STATIC_ROOT and the Alias are correctly set now but still no joy. Thanks – Deepend Jul 23 '14 at 14:20
Do static files show when you set DEBUG=False working in local?? – argaen Jul 23 '14 at 14:29
OK, seems your config is correct. The prob as @garnertb says is that trying to access /static in your server returns a forbidden... Try setting the documentroot directive if not set and remove the "AliasMatch" and " Order deny,allow Allow from all ". I have settings in my Apache without these directives and ir works... – argaen Jul 23 '14 at 14:41
Yes the Static files show up when DEBUG=False on local. – Deepend Jul 23 '14 at 14:44

Django Static Files are not visible

4 Answers4