nginx/uwsgi/flask not using CSS files in template

Question

I've got a flask app I'm trying to run off CentOS 6.6, Python 6.6, uwsgi 2.0.8 and nginx 1.0.15. I have selinux disabled.

It runs using flask, but while trying to set it up with nginx it's displaying the website, but without any CSS files being applied.

If I look at the web page source it is correctly linking to the CSS files('/static/css/style.css') and if I open them from the source it opens them, but it's not applying them to the web page. It does however load an image and display it.

I'm running it using a wsgi ini file. ($ flask/bin/uwsgi --ini uwsgi.ini)

My wsgi.ini config file:

[uwsgi]
socket = 127.0.0.1:5000
chdir = /home/apps/portal
home = /home/apps/portal/flask
module = app:app
master = true
enable-threads = True
processes = 5
vacuum = True

My nginx config file:

worker_processes 1;

events {

    worker_connections 1024;

}

http {

    sendfile on;
    gzip              on;
    gzip_http_version 1.0;
    gzip_proxied      any;
    gzip_min_length   500;
    gzip_disable      "MSIE [1-6]\.";
    gzip_types        text/plain text/xml text/css
                      text/comma-separated-values
                      text/javascript
                      application/x-javascript
                      application/atom+xml;

    upstream uwsgicluster {

        server 127.0.0.1:5000;

    }

    server {

        listen 80;
        server_name localhost;
        charset utf-8;

        location /static  {

            alias /home/apps/portal/app/static;

        }

        location / {

            include            uwsgi_params;
            uwsgi_pass         uwsgicluster;

            uwsgi_param        UWSGI_CHDIR /home/apps/portal;
            uwsgi_param        UWSGI_PYHOME /home/apps/portal/flask;
            uwsgi_param        UWSGI_MODULE portal;
            uwsgi_param        UWSGI_CALLABLE app;

            proxy_redirect     off;
            proxy_set_header   Host $host;
            proxy_set_header   X-Real-IP $remote_addr;
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Host $server_name;

        }
    }
}

nginx access log file(/var/log/nginx/access.log):

110.143.38.80 - - [22/Dec/2014:12:23:26 +1000] "GET /user/admin HTTP/1.1" 200 3279 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36"
110.143.38.80 - - [22/Dec/2014:12:23:26 +1000] "GET /static/css/style.css HTTP/1.1" 200 1541 "http://*.*.*.*/user/admin" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36"
110.143.38.80 - - [22/Dec/2014:12:23:26 +1000] "GET /static/js/moment.min.js HTTP/1.1" 200 13111 "http://*.*.*.*/user/admin" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36"
110.143.38.80 - - [22/Dec/2014:12:23:26 +1000] "GET /static/js/bootstrap.min.js HTTP/1.1" 200 11339 "http://*.*.*.*/user/admin" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36"
110.143.38.80 - - [22/Dec/2014:12:23:26 +1000] "GET /static/css/bootstrap.min.css HTTP/1.1" 200 23863 "http://*.*.*.*/user/admin" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36"
110.143.38.80 - - [22/Dec/2014:12:23:26 +1000] "GET /static/upload/avatars/admin_guyfawkes.jpg HTTP/1.1" 200 38039 "http://*.*.*.*/user/admin" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36"

What does the Chrome/FF/IE developer console say? Specifically the Network tab? For example are the css files loading as 200? Or are they not loading at all? — Gohn67
– Gohn67, Commented Dec 22, 2014 at 3:24
You are amazing. The network tab said they were loading as 200, but the console said "Resource interpreted as Stylesheet but transferred with MIME type text/plain". After inserting "include /etc/nginx/mime.types;" into the nginx conf file, all is good. Thank you! — alexwatever
– alexwatever, Commented Dec 22, 2014 at 4:08
Please don't put stuff like SOLVED in the title of your question. StackOverflow is not a discussion forum. You can answer your own question, accept your answer so that others know what solution worked for you (and more importantly, the question does not remain open). — Burhan Khalid
– Burhan Khalid, Commented Dec 22, 2014 at 5:08
Thanks for letting me know how to go about that the right way, Burhan. — alexwatever
– alexwatever, Commented Dec 22, 2014 at 6:02

alexwatever · Accepted Answer · 2014-12-22 06:04:23Z

3

Due to a suggestion from Gohn67 I checked the developer console after loading the page. The console reported: "Resource interpreted as Stylesheet but transferred with MIME type text/plain"

After that I inserted include /etc/nginx/mime.types; into the nginx conf file and it all worked.

answered Dec 22, 2014 at 6:04

alexwatever

5942 gold badges7 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

nginx/uwsgi/flask not using CSS files in template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related