Serving static files django 1.9 production Error

Question

I have tried following the solutions in the other stack overflow posts about serving Django static files in production, but I couldn't get them to work. My static files are located inside my django app folder (league).

My CSS files are not being properly loaded; I got the following error in the console in chrome:

Resource interpreted as Stylesheet but transferred with MIME type text/html
Uncaught SyntaxError: Unexpected token !
profile:5 Uncaught SyntaxError: Unexpected token !

I think that the css files are being interpreted as html files? I don't think the javascript files are being loaded properly either...

When I checked the source file on chrome and clicked on the link to the css file, they don't work. So I am guessing that the link to the css files don't work?

The links and scripts to load the css and javascript files are:

    <head>
<!-- Latest compiled and minified CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="{% static 'league/css/bootstrap-theme.css' %}">
<link rel="stylesheet" href="{% static 'league/css/bootstrap-theme.min.css' %}">
<link rel="stylesheet" href="{% static 'league/css/bootstrap.css' %}">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->

<script type="text/javascript" src="{% static 'league/js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'league/js/npm.js' %}"></script>
<!-- jQuery library -->

<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="{% static 'league/css/f-style.css' %}">
</head>

My the relevant files in my settings.py file are as follows:

STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
#    'django.contrib.staticfiles.finders.DefaultStorageFinder',
)

STATIC_URL = '/league/static/'
SITE_ID = 1
STATIC_ROOT = BASE_DIR + '/league/static/'

The configuration file on my apache server is as follows:

<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html
    Alias /static /home/ubunu/project/league/static
    <Directory /home/ubuntu/project/league/static>
            Require all granted
    </Directory>
    <Directory /home/ubuntu/project/fantasy>
            <Files wsgi.py>
                    Require all granted
            </Files>
    </Directory>

    WSGIDaemonProcess project python-path=/home/ubuntu/project:/home/ubuntu/project/myprojectenv/lib/python2.7/$
    WSGIProcessGroup project
    WSGIScriptAlias / /home/ubuntu/project/fantasy/wsgi.py

</VirtualHost>

Thanks!

did you tried restarting the server the server. And in your template you have not used the {% load staticfiles %} tag. — vikas0713, Aug 04 '16 at 15:17

score 3 · Accepted Answer · edited May 23 '17 at 12:33

Okay this is a pretty much trivial question. There two things you need to do.

Firstly, when you are using the local python django development server, then your static files are served simply by looking up the staticfiles in the app folder, and if you specified another folder for your static files in STATIC_DIRS, then it will look into that also.

But if you are serving your file on some other server, like Nginx or Herkou or Apache in your case, then you need to collect all your static files in another directory from where your Apache will read the static files from.

To achieve the above you need to do python manage.py collectstatic

As soon as you do this, all your static files will be collected in the folder specified by the STATIC_ROOT value in your settings.py

Now secondly, if your STATIC_ROOT as well as your STATIC_URL = '/league/static/' then technically, things won't work, as those two are for different purposes.

I suggest, create a new folder at the BASE directory level, say static_root_content and change your STATIC_ROOT = os.path.join(BASE_DIR, 'static_root_content')

Now when you'll run the python manage.py collectstatic all your static data will be collected in this folder from where Apache will look up static files.

Also STATIC_DIRS and STATIC_ROOT can't have the same value in your settings.py

See this article for a better explanation -> Differences between STATICFILES_DIR, STATIC_ROOT and MEDIA_ROOT

I am getting a `GET http://...../static/league/js/index.js 403 (Forbidden)` error. When I visit the url, i get the following error page: `Forbidden You don't have permission to access /static/league/js/prefixfree.min.js on this server.` — alienboy, Aug 06 '16 at 19:01
See this -> http://stackoverflow.com/questions/10873295/error-message-forbidden-you-dont-have-permission-to-access-on-this-server — Ankush Raghuvanshi, Aug 07 '16 at 04:35
I know this is super late but worth asking because I have the same issues. does this all mean that the path to static files on the html page should point to the collected static folder? — Murcielago, Apr 30 '20 at 22:27
@Anastasia I've not worked on Django since then, but if the conventions have not changed (or maybe you can search the same on the internet), you need to import load the statics at the top of your HTML like {% load static from staticfiles %} and then when you are importing the that static asset, you can do that like — Ankush Raghuvanshi, May 01 '20 at 07:30

Serving static files django 1.9 production Error

1 Answers1