MIME type ('text/html') is not a supported, 404, static files, NGINX, uWSGI, Production

Using Django Deployment
1

I get the following “MIME type (‘text/html’) is not a supported” error for .css static files, nav_sidebar.js from the admin site gives:

ERR_ABORTED 404 (Not Found)

This is my first time trying to set up a production environment. Below is the setup and file contents:

I split settings files into local.py, pro.py and base.py

In base.py I have:

BASE_DIR = Path(__file__).resolve().parent.parent.parent
STATIC_URL = "/static/"
STATIC_ROOT = str(BASE_DIR / "staticfiles")
STATICFILES_DIRS = [str(BASE_DIR / "static")]

The .css loads fine for the development environment when I run:

python3 manage.py runserver --settings=mysite.settings.local

For production I run:

uwsgi --ini config/uwsgi.ini

My uwsgi.ini file contains:

[uwsgi]
module = mysite.wsgi:application
env = DJANGO_SETTINGS_MODULE=mysite.settings.pro
master = true
pidfile = /tmp/project-master.pid
http = 127.0.0.1:8000
uid = 1000
virtualenv = /home/pi/.virtualenvs/mysite/
socket = /tmp/mysite.sock
chmod-socket = 666
pythonpath = /home/pi/projects/mysite/mysite
chdir = /home/pi/projects/mysite/mysite

When I refresh the browser, the terminal shows:

[pid: 14751|app: 0|req: 6/6] 127.0.0.1 () {42 vars in 743 bytes} [Tue Nov 9 09:32:40 2021] GET /static/css/base.css => generated 179 bytes in 10 msecs (HTTP/1.1 404) 5 headers in 158 bytes (1 switches on core 0)

The admin site shows in terminal with:

[pid: 15705|app: 0|req: 9/9] 127.0.0.1 () {38 vars in 722 bytes} [Tue Nov 9 09:48:13 2021] GET /static/admin/js/nav_sidebar.js => generated 179 bytes in 10 msecs (HTTP/1.1 404) 5 headers in 158 bytes (1 switches on core 0)

I edited the /etc/hosts file to include the sample domain:

127.0.0.1 mysite(dot)com www.mysite(dot)com

The site loads at htt(p)://mysite(dot)com:8000/ but the Chromium console gives an error:

Refused to apply style from ‘(http)://mysite(dot)com:8000/static/css/base.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I run collectstatic:
python3 manage.py collectstatic --settings=mysite.settings.pro

Then manually move the static files from /staticfiles to /static in the root project folder.

I added this fix from a similar forum post about MIME type, into base.py with no effect:

import mimetypes
mimetypes.add_type("text/css", ".css", True)

The direct path to (http)://mysite(dot)com:8000/static/css/base.css results in:

Not Found The requested resource was not found on this server.

In my project folder I have config/nginx.conf which contains:

	location /static/ {
		alias /home/pi/projects/mysite/mysite/static/;
	}

My base.html template has:

{% load static %}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>{% block title %}Base Template{% endblock title %}</title>
		<link href="{% static 'css/base.css' %}" rel="stylesheet">
	</head>

I’m using a Raspberry Pi 3B with standard Raspbian Debian (Buster), Chromium browser, Django 3.2.9, NGINX and uWSGI.

The project is a hello world style app wtih nginx and uwsgi installed via pip:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapp.apps.MyappConfig',
]

Any suggestions to get the static files working? Thanks. The main reason I’m trying to get production working is to continue integrating services which require https which I’m unable to get in the development environment and in the meantime I can’t load static files. I edited the links due to the post link restrictions.

2

There could be multiple things going on, but let’s focus on getting the static files to be served.

I think the problem lies somewhere in this. You shouldn’t have to move files manually, collectstatic should be doing that for you. collectstatic should be moving the files to /home/pi/projects/mysite/mysite/static/ when run with --settings=mysite.settings.pro.

Try changing alias /home/pi/projects/mysite/mysite/static/; to the absolute path of STATIC_ROOT when using your pro settings.

That should resolve the issue of the http)://mysite(dot)com:8000/static/css/base.css not resolving. Then retry hitting the landing page and see if there’s still a mimetype error.

3

I changed /home/pi/projects/mysite/mysite/config/nginx.conf however (http)://mysite(dot)com:8000/static/css/base.css is still not resolving.

config/nginx.conf:

upstream mysite {
	server		unix:///tmp/mysite.sock;
}

server {
	listen	80;
	server_name	www.mysite(dot)com mysite(dot)com;
	
	access_log	off;
	error_log	/home/pi/projects/mysite/mysite/logs/nginx_error.log;
	
	location / {
		include	/etc/nginx/uwsgi_params;
		uwsgi_pass	mysite;
	}

	location /static/ {
		alias /home/pi/projects/mysite/mysite/staticfiles/;
	}

	location /media/ {
		alias /home/pi/projects/mysite/mysite/media/;
	}

}

When I run python3 manage.py collectstatic --settings=mysite.settings.pro, the /staticfiles folder is created with the static files inside. The /static folder in the same project root remains empty if I don’t do any copying over manually.

If I don’t have a /static folder in the project root, django will complain:

FileNotFoundError: [Errno 2] No such file or directory: ‘/home/pi/projects/mysite/mysite/static’

4

Couple different odds & ends…

  • How are you running nginx such that you have your nginx.conf file inside your project?

  • Your STATIC_ROOT should be completely outside your project. (e.g. /home/pi/static/)

  • Your nginx configuration should point to that target directory for static.

    • e.g. location /static/ { alias /home/pi/static/; }

  • That directory (and all files and subdirectories inside it) should be readable by the UID being used to run nginx, but must be writable by the UID being used to run collectstatic.

  • nginx should have no access to anything in your project directory.

5
  • How are you running nginx such that you have your nginx.conf file inside your project?

I added include /home/pi/projects/mysite/mysite/config/nginx.conf; to the top of my /etc/nginx/nginx.conf file.

so /etc/nginx/nginx.conf is:

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768;
	# multi_accept on;
}

http {
	##
	# Basic Settings
	##
	include /home/pi/projects/mysite/mysite/config/nginx.conf;
...
  • Your STATIC_ROOT should be completely outside your project. (e.g. /home/pi/static/ )

I’ve moved it to /home/pi/static/ and updated base.py settings to STATIC_ROOT = "/home/pi/static"

  • Your nginx configuration should point to that target directory for static.

I’ve updated /home/pi/projects/mysite/mysite/config/nginx.conf to point to /home/pi/static;

location /static/ {
	alias /home/pi/static;
}
  • That directory (and all files and subdirectories inside it) should be readable by the UID being used to run nginx, but must be writable by the UID being used to run collectstatic.

I’m currently running nginx from one virtual environment terminal with:

(mysite) pi@raspberrypi:~ $ sudo nginx

I’m running collectstatic from another virtual environment terminal with:

(mysite) pi@raspberrypi:~/projects/mysite/mysite $ python3 manage.py collectstatic --settings=mysite.settings.pro

When running collectstatic, the static files now get put into new /home/pi/static folder.

When I go to (http)://127.0.0.1/ I get the Welcome to nginx! page and when I go to (http)://mysite(.)com/ I get my hello world page but still with the Chromium console error:

Refused to apply style from 'http://mysite.com/staticfiles/css/base.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

The Network tab in Chromium shows the base.css file Status as (canceled) and Type as stylesheet.

6

In my above post I noticed the MIME type error is referring to staticfiles. So I’ve updated the base.py from STATIC_URL = '/staticfiles/' to STATIC_URL = '/static/'

So all static files settings in base.py are:

STATIC_URL = '/static/'
STATIC_ROOT = '/home/pi/static'
STATICFILES_DIRS = [str(BASE_DIR / "static")]

When I go to (http)://mysite.com, the Chromium error is:
mysite.com/:7 GET http://mysite.com/static/css/base.css net::ERR_ABORTED 404 (Not Found)

When I go to (http)://mysite.com:8000, the Chromium error is:
mysite.com/:1 Refused to apply style from 'http://mysite.com:8000/static/css/base.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

7

Hi blaketig, please confirm the first half of this statement from @KenWhitesell:

You’ve already confirmed that collectstatic can write to that directory, but you haven’t confirmed that the files can be read from that directory which might explain why nginx isn’t serving them.

1 Like
8

I did:
sudo chown pi:pi .
In folder:
/var/www/html

Then updated STATIC_ROOT = ‘/var/www/html/static’
Now it’s working. Thanks

1 Like
9

THANK YOU! I’ve been struggling with this for so long, my page was loading, the css file loaded, there were no errors, but the stylesheet didn’t actually apply. Just silently failed and I was ripping my hair out. Such a small oversight. Thanks again for the solution!