ines
By:
ines

Nginx failing to interpret CSS (MIME type error) and JS from Meteor app

April 14, 2015 2.9k views
Nginx Ubuntu

Hi,
I am getting the following errors in my website's console:

Error: There are multiple templates named 'velvet'. Each template needs a unique name. 1b1a247fc034d5089f331ec9540138ff6afd5f39.js:75:306
The stylesheet http://webmill.eu/css/bootstrap.min.css was not loaded because its MIME type, "text/html", is not "text/css". webmill.eu
The stylesheet http://webmill.eu/css/font-awesome.min.css was not loaded because its MIME type, "text/html", is not "text/css". webmill.eu
The stylesheet http://webmill.eu/css/velvet.css was not loaded because its MIME type, "text/html", is not "text/css". webmill.eu
The stylesheet http://webmill.eu/css/custom.css was not loaded because its MIME type, "text/html", is not "text/css".

I have been researching intensely and tried a bunch of things in my Nginx configuration to fix the interpretation of CSS and JS which didn't work and in the process ended up noticing that no matter which of those CSS URLs I click they display the full website's page leading to think that all requests are being taken over by the (Meteor) application and the CSS files are not even passing through Nginx, at least when called directly by URL.

I am currently at a loss of what to do so any help is greatly appreciated!

4 comments
  • Could you share some more information about your setup? Perhaps pastebin you Nginx configuration somewhere? In the mean time, this article might be of help: How To Deploy a Meteor.js Application on Ubuntu 14.04 with Nginx

    by Daniel Speichert
    Deploy a Meteor.js application on Ubuntu 14.04 with Nginx and MongoDB. This tutorial shows you how to build and deploy a production-ready version of your JavaScript application using the Meteor framework.
  • Hi,

    I used that article guide for the setup. I added the location sections at the end to specifically target css and js files so currently my conf file (/etc/nginx/sites-available/webmill) looks like this:

    server_tokens off; # for security-by-obscurity: stop displaying nginx version
    
    # this section is needed to proxy web-socket connections
    map $http_upgrade $connection_upgrade {
        default upgrade;
        ''      close;
    }
    
    # HTTP
    server {
        listen 80 default_server; # if this is not a default server, remove "default_server"
        listen [::]:80 default_server ipv6only=on;
    
        root /usr/share/nginx/html; # root is irrelevant
        index index.html index.htm; # this is also irrelevant
    
        server_name webmill.eu; # the domain on which we want to host the application. Since we set "default_server" previously, nginx will answer all hosts anyway.
    
    
        # If your application is not compatible with IE <= 10, this will redirect visitors to a page advising a browser update
        # This works because IE 11 does not present itself as MSIE anymore
          if ($http_user_agent ~ "MSIE" ) {
            return 303 https://browser-update.org/update.html;
        }
    
        # pass all requests to Meteor
        location / {
            include /etc/nginx/mime.types;
            proxy_pass http://127.0.0.1:8080;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade; # allow websockets
            proxy_set_header Connection $connection_upgrade;
            proxy_set_header X-Forwarded-For $remote_addr; # preserve client IP
    
          # this setting allows the browser to cache the application in a way compatible with Meteor
            # on every applicaiton update the name of CSS and JS file is different, so they can be cache infinitely (here: 30 days)
            # the root path (/) MUST NOT be cached
            if ($uri != '/') {
                expires 30d;
            }
    
        location /css {
        root /home/ines/Development/webmill/app/client/css;
        try_files $uri @proxy;
      }
         location /js {
        root /home/ines/Development/webmill/app/client/js;
          try_files $uri @proxy;
      }
         location / {
        try_files $uri @proxy;
      }
    }
        }
    
    

    And I'm getting the following error in the nginx log : 2015/04/14 08:46:06 [error] 20225#0: *31868 could not find named location "@proxy", client: 81.164.141.218, server: webmill.eu, request: "GET / HTTP/1.1", host: "webmill.eu"
    I suspect there could be something wrong with the brackets?

  • I just can't figure out a way for the Nginx to serve CSS and JS content.

  • Reply

    @asb I have pasted in my config file, any thoughts? btw, the error
    2015/04/14 08:46:06 [error] 20225#0: *31868 could not find named location "@proxy", client: 81.164.141.218, server: webmill.eu, request: "GET / HTTP/1.1", host: "webmill.eu"

    fixed it by declaring location proxy { just under #pass all requests to meteor and meanwhile it seems I got rid of the mime type errors.

    Yet the error claiming there are multiple templates named 'velvet persists. As a point of information, my website loads appropriately in displays where width is under 1070px.

Be the first one to answer this question.