djangostaticdjango-staticfilesstatic-files

Django and staticfiles

I have a problem with Django static files.

Let's assume, that the Django is configured to be server at www.example.com/app.

When my configuration is:

STATIC_URL = "/static/"
MEDIA_URL = "/media/"
STATIC_ROOT = "/home/hostxxx/domains/webpage.com/DjangoApp/static"
MEDIA_ROOT = "/home/hostxxx/domains/webpage.com/DjangoApp/media"

Then Django looks for:
https://example.com/static/styles/style.css

and it doesn't exist:

GET https://example.com/static/styles/style.css net::ERR_ABORTED 404 (Not Found)

but the file exists here:

https://example.com/app/static/styles/style.css

But when I change the static url:

STATIC_URL = "/app/static/"

Then it looks for a good url: https://example.com/app/static/styles/style.css but now the staticfile is available here: https://example.com/app/app/static/styles/style.css

Update:

urls.py:

from django.contrib import admin
from django.urls import path

from mainapp import views

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", views.lists, name="lists"), # MAIN VIEW
]

but tried also this as urls.py:

from django.contrib import admin
from django.urls import path
from django.contrib.staticfiles.urls import staticfiles_urlpatterns

from mainapp import views

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", views.lists, name="lists"),
]

urlpatterns += staticfiles_urlpatterns()

and base.html:

{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>AAA</title>
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="{% static 'styles/style.css' %}">  # HERE
...

The hosting use passenger_wsgi.py, which is:

import imp
import os
import sys

sys.path.insert(0, os.path.dirname(__file__))

wsgi = imp.load_source("wsgi", "app/wsgi.py")
application = wsgi.application

django-admin --version: 5.0

python --version: Python 3.10.13

The solution offered on every other topic: FORCE_SCRIPT_NAME = "/app" does not work. Django template is still searching for: https://example.com/static/styles/style.css and not for: https://example.com/app/static/styles/style.css.

I've read a lot of answers and tried many times, nothing help.

It works fine, when I set the Django project without the app prefix: www.example.com, but I have other application served there, I need to add the prefix.

I don't understand, why it cannot generate a valid link for css: enter image description here The app/ part is still missing.

How should I properly configure Django staticfiles to serve and search for this css? https://example.com/app/static/styles/style.css

Solution

  • In production the webserver serves your static files. Therefore it is important to move/copy the files to a location where the server then directs to. That you can do with the comfy command python manage.py collectstatic. This you probably knew and have already done.

    Depending on the folder structure the files end up with a different structure within created folder for the staticfiles. Given the following structure:

    myproject/
 - myapp1/
   - static/
     - myapp1/
       - css/
         - styles.css

    Remember to give it namespacing, meaning within the static directory of myapp1 you create another directory called the same as the app (myapp1). When you run collectstatic now the staticfiles end up at <STATIC_ROOT>/myapp1/css/styles.css and you would address them in your template with href="{% static 'myapp1/css/style.css' %}". This allows you to separate styles inbetween your apps. Please mention that you have to add the appname, here (myapp1) to the static path.

    Ok so far so good. Now the next step is to configure your webserver in a way that it serves the staticfiles correctly. Issued url that has to be satisfied is www.yourdomain.com/static/myapp1/css/styles.css. You have to configure your webserver that it leads every request to www.yourdomain.com/static/ to your staticfolder, which is located at <STATIC_ROOT>.

    I am kind of sure your projects directory structure is misleading the collectstatic command. Another reason might be the false config of your webserver. Hope it helps.