CODEWITHSUNDEEP
djangonginxgunicorndjango-staticfiles
user1933205
user1933205

Reputation: 362

HTTP 404 error for css and javascript files in Django and Gunicorn

The actual error is

Refused to apply style from 'http://127.0.0.1:8000/static/css/home.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
GET http://127.0.0.1:8000/static/js/home.js net::ERR_ABORTED 404 (Not Found)

This error started happening when I started using Gunicorn as app server. The first error for css is a misdirection. The file was not found to begin with. Chrome developer tools shows

Request URL:http://127.0.0.1:8000/static/css/home.css
Request Method:GET
Status Code:404 Not Found
Referrer Policy:same-origin
Connection:close
Content-Length:8559
Content-Type:text/html
Date:Wed, 07 Jun 2023 19:32:29 GMT
Referrer-Policy:same-origin
Server:gunicorn

status code. I see the same status code for all the css and javascript files.

Here are my relevant settings

settings.py

INSTALLED_APPS = [
    .
    .
    'django.contrib.staticfiles',
    'bootstrap4',
    .
    .
]

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "kubera/static"),
]

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, "static")

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

manage.py collectstatic command copied the files correctly

~/workspace/djangoapp/src$ python3 manage.py collectstatic
161 static files copied to '/home/<myhomedir>/workspace/djangoapp/src/static'.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    {% load static %}
    {% load bootstrap4 %}
    {% bootstrap_css %}
    {% bootstrap_javascript jquery='full' %}
    {% bootstrap_messages %}
    <link href="{% static 'css/home.css' %}"
      type="text/css" rel="stylesheet">

    <title>{% block title %}Parier Config Central {% endblock %}</title>
  </head>
  <body>
    <main>
      <div class="container-fluid headDiv">
        Main div content shown here
      </div>
    </main>
    <script type="text/javascript" src="{% static 'js/home.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
  </body>
</html>

I can see all the html content correctly. On the server side console, I see following error debug messages

~/workspace/djangoapp/src$ gunicorn --bind 127.0.0.1:8000 <myappname>.wsgi
[2023-06-07 12:32:24 -0700] [68057] [INFO] Starting gunicorn 20.1.0
[2023-06-07 12:32:24 -0700] [68057] [INFO] Listening at: http://127.0.0.1:8000 (68057)
[2023-06-07 12:32:24 -0700] [68057] [INFO] Using worker: sync
[2023-06-07 12:32:24 -0700] [68058] [INFO] Booting worker with pid: 68058
Not Found: /static/css/home.css
Not Found: /static/js/home.js
Not Found: /static/js/main.js
Not Found: /static/images/BlankPicture.png
Not Found: /static/css/home.css
Not Found: /favicon.ico

Edit: Gunicorn socket and service configuration /etc/systemd/system/gunicorn.socket

[Unit]
Description=gunicorn socket

[Socket]
ListenStream=/run/gunicorn.sock

[Install]
WantedBy=sockets.target

/etc/systemd/system/gunicorn.socket

[Unit]
Description=gunicorn daemon
Requires=gunicorn.socket
After=network.target

[Service]
User=<username>
Group=<usergroup>
WorkingDirectory=/absolute-path-to-your-wsgi-file-directory
ExecStart=/usr/local/bin/gunicorn \
          --access-logfile - \
          --workers 3 \
          --bind unix:/run/gunicorn.sock \
          <projectname>.wsgi:application

[Install]
WantedBy=multi-user.target

Once you have configured the gunicorn socket and service, start them.

~/workspace/djangoapp/src$sudo systemctl start gunicorn.socket
~/workspace/djangoapp/src$sudo systemctl enable gunicorn.socket
~/workspace/djangoapp/src$sudo systemctl status gunicorn.socket
~/workspace/djangoapp/src$sudo systemctl daemon-reload
~/workspace/djangoapp/src$sudo systemctl restart gunicorn

NGINX config file /etc/nginx/sites-available/

server {
    listen 80;
    server_name 127.0.0.1;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /absolute-path-to-the-parent-of-static-directory;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }
}

Enable your app

sudo ln -s /etc/nginx/sites-available/<app-name> /etc/nginx/sites-enabled/

Upvotes: 1

Views: 562

Answers (1)

user1933205
user1933205

Reputation: 362

This answer is for noobs like me. I only had Django up with Gunicorn. I didn't have any web-server. Django doesn't serve static files. Gunicorn is an app server and doesn't serve static files either. You must have a web-server like NGINX to serve the static files. Everything started to work as soon as I brought up NGINX. I am going to update my original question with Gunicorn and Nginx settings in case someone wants a quick settings reference.

Upvotes: 1

Related Questions