I have tried following the solutions in the other stack overflow posts about serving Django static files in production, but I couldn't get them to work. My static files are located inside my django app folder (league).
My CSS files are not being properly loaded; I got the following error in the console in chrome:
Resource interpreted as Stylesheet but transferred with MIME type text/html
Uncaught SyntaxError: Unexpected token !
profile:5 Uncaught SyntaxError: Unexpected token !
I think that the css files are being interpreted as html files? I don't think the javascript files are being loaded properly either...
When I checked the source file on chrome and clicked on the link to the css file, they don't work. So I am guessing that the link to the css files don't work?
The links and scripts to load the css and javascript files are:
<head>
<!-- Latest compiled and minified CSS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="{% static 'league/css/bootstrap-theme.css' %}">
<link rel="stylesheet" href="{% static 'league/css/bootstrap-theme.min.css' %}">
<link rel="stylesheet" href="{% static 'league/css/bootstrap.css' %}">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="{% static 'league/js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'league/js/npm.js' %}"></script>
<!-- jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="{% static 'league/css/f-style.css' %}">
</head>
My the relevant files in my settings.py file are as follows:
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
# 'django.contrib.staticfiles.finders.DefaultStorageFinder',
)
STATIC_URL = '/league/static/'
SITE_ID = 1
STATIC_ROOT = BASE_DIR + '/league/static/'
The configuration file on my apache server is as follows:
<VirtualHost *:80>
ServerAdmin webmaster#localhost
DocumentRoot /var/www/html
Alias /static /home/ubunu/project/league/static
<Directory /home/ubuntu/project/league/static>
Require all granted
</Directory>
<Directory /home/ubuntu/project/fantasy>
<Files wsgi.py>
Require all granted
</Files>
</Directory>
WSGIDaemonProcess project python-path=/home/ubuntu/project:/home/ubuntu/project/myprojectenv/lib/python2.7/$
WSGIProcessGroup project
WSGIScriptAlias / /home/ubuntu/project/fantasy/wsgi.py
</VirtualHost>
Thanks!
Okay this is a pretty much trivial question. There two things you need to do.
Firstly, when you are using the local python django development server, then your static files are served simply by looking up the staticfiles in the app folder, and if you specified another folder for your static files in STATIC_DIRS, then it will look into that also.
But if you are serving your file on some other server, like Nginx or Herkou or Apache in your case, then you need to collect all your static files in another directory from where your Apache will read the static files from.
To achieve the above you need to do python manage.py collectstatic
As soon as you do this, all your static files will be collected in the folder specified by the STATIC_ROOT value in your settings.py
Now secondly, if your STATIC_ROOT as well as your STATIC_URL = '/league/static/' then technically, things won't work, as those two are for different purposes.
I suggest, create a new folder at the BASE directory level, say static_root_content and change your STATIC_ROOT = os.path.join(BASE_DIR, 'static_root_content')
Now when you'll run the python manage.py collectstatic all your static data will be collected in this folder from where Apache will look up static files.
Also STATIC_DIRS and STATIC_ROOT can't have the same value in your settings.py
See this article for a better explanation -> Differences between STATICFILES_DIR, STATIC_ROOT and MEDIA_ROOT
Related
EDIT/Workaround:
I got this working. I think there is an unfortunate interaction of FORCE_SCRIPT_NAME, the requirement for STATIC_URL to end in /, and the behavior of django.conf.urls.static. I'll mark this answered when I'm able to put together a step-by-step explanation.
Meanwhile, here's the recipe that works for me:
urls.py
from django.conf.urls.static import static
urlpatterns += static("static", document_root=settings.STATIC_ROOT)
settings.py
FORCE_SCRIPT_NAME = "/the-prefix-i-need/"
STATIC_ROOT = "/static/"
STATIC_URL = "static/"
STATIC_URL has to end with "/" (or runserver fails). But if static's first argument ends with / it pulls in the FORCE_SCRIPT_NAME into the URL pattern it is looking for, and doesn't match "/static"
In development (DEBUG=True) mode, running in docker on a host where the site is served with a prepended path corresponding to a branch, I am unable to get static files working.
Using python 4.0.6
In settings.py I have these settings:
DEBUG = True
BASE_DIR = Path(__file__).resolve().parent.parent # default generated
FORCE_SCRIPT_NAME = "https://pmdocker01d.pm.local:8443/bi-web-utils/ta0624/"
INSTALLED_APPS = [
...
'django.contrib.staticfiles',
STATIC_URL = 'static/'
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
In my html file:
{% load static %}
<html>
<head>
...
<link rel="stylesheet" href="{% static 'tableau_explorer/style.css' %}">
And my css is in:
django_root/tableau_explorer/static/tableau_explorer
On my development machine, both running manage.py from the sheel, and
in a dockerfile, it works. In that setting, I don't have FORCE_SCRIPT_NAME.
When it is on the other docker host, the generated HTML
<link rel="stylesheet" href="/static/tableau_explorer/style.css">
And I get a 404 error.
If I change:
STATIC_URL = 'https://pmdocker01d.pm.local:8443/bi-web-utils/ta0624/static/'
Then it instead of a plain 404 I get message that it's getting HTML instead of css, because the server is returning this
Request Method: GET
Request URL: http://https://pmdocker01d.pm.local:8443/bi-web-utils/ta0624/static/tableau_explorer/style.css
Using the URLconf defined in bi_web.urls, Django tried these URL patterns, in this order:
admin/
....
The current path, static/tableau_explorer/style.css, didn’t match any of these.
For the other docker host I tried adding this to the main project
urls.py (not tableau/explorer/urls.py) I tried adding this and and
couldn't see any difference:
from django.conf import settings
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [ . . . . ]
if settings.DEBUG:
urlpatterns += staticfiles_urlpatterns()
If I browse to https://pmdocker01d.pm.local:8443/bi-web-utils/ta0624/static/
I get the error message "Directory indexes are not allowed here.", whereas
other urls like making it end "staticx/" it just says page not found. So
I think static is doing something, but I can't tell that anything at all is
being gathered there and don't know how to check.
If I make a shell connection into the running docker host, it seems like static
is finding what I'd expect:
$ python manage.py findstatic tableau_explorer/style.css
Found 'tableau_explorer/style.css' here:
/code/tableau_explorer/static/tableau_explorer/style.css
Anyone know right off what's going on and can tell me "type this and it'll work?"
If not...
My question now is - what is the staticfiles supposed to be doing with files
in development mode, and how does it serve them?
is it supposed to intercept any request that begins with "static/"
when the app starts running, does staticfiles gather the .css files from
different applications "static" folders, and put copies into an on-disk
repository I can verify, or put verbose logging on? -- Should I be able
to see the files in a particular directory on the running server?
is the BASE_DIR setting relevant to staticfiles? I am using what was
generated by manage.py createproject
in staticfiles nowadays, is it supposed to take care of appending "static" into
the urls? I thought I shouldn't need to modify urls.py?
-- Edit:
Since posting I added STATIC_ROOT=/static in the settings.py file, and in Dockerfile I added collectstatic. When I shell into the running docker image on the host I see
$ ls -l /static/tableau_explorer/style.css
The files are present good, and are other-accessible all the way down.
The rendered HTML file has
<link rel="stylesheet" href="https://pmdocker01d.pm.local:8443/bi-web-utils/ta0624/static/tableau_explorer/style.css">
and if I browse directly to that link, Django is complaining it doesn't match any path... I feel like I have to do something in urls.py to give the request to staticfiles to handle?
The response when I browse is the familiar:
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Page not found at /static/tableau_explorer/style.css</title>
</head>
<body>
<div id="summary">
<h1>Page not found <span>(404)</span></h1>
<table class="meta">
<tbody><tr>
<th>Request Method:</th>
<td>GET</td>
</tr>
<tr>
<th>Request URL:</th>
<td>http://https://pmdocker01d.pm.local:8443/bi-web-utils/ta0624/static/tableau_explorer/style.css</td>
</tr>
</tbody></table>
</div>
<div id="info">
<p>
Using the URLconf defined in <code>bi_web.urls</code>,
Django tried these URL patterns, in this order:
</p>
<ol>
. . . . Nothing about "/static" . . .
</ol>
<p>
The current path, <code>static/tableau_explorer/style.css</code>,
didn’t match any of these.
</p>
....
So, in my index page located in root/templates/home.html I have the following line for loading CSS:
<link rel="stylesheet" href="{% static 'project/home.css' %}">
home.css is located at: root/static/project/home.css
In settings.py:
STATIC_ROOT = "static/"
STATIC_URL = '/static/'
And when I run the server, in the main page CSS fails to load raising 404 in the browser although the browser displaying the correct path where the home.css is located:
http://127.0.0.1:8000/static/project/home.css
For all apps in the projects everything works fine.
When global static is defined in settings.py:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
the problem is solved, but then, for obvious reasons I cannot perform collectstatic unless I rename it to "assets" for example.
I am clearly missing something here but I want to know why it fails to load the home.css from the legit path?
I have a frontend react app, after using npm run build it creates build folder with:
build
favicon.ico
index.html
service-woker.js
static
After using django's python manage.py collectstatic I noticed what django has done was that it pulls out only the static folder, favicon.ico is not pulled out. So, my website icon doesn't work.
In my index.html, <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon.ico" />
In my settings.py
STATICFILES_DIRS = [
os.path.join(BASE_DIR, '../frontend/build/static')
]
STATIC_ROOT = '/var/www/web/home/static/'
STATIC_URL = 'home/static/'
In chrome inspect in the headers element:
<link rel="icon" href="./home/favicon.ico">
How do I get it to display my web icon. Thankyou!
It is clear in documentation that Django collectstatic looks only for files in folders that are set in
STATICFILES_DIRS = [
os.path.join(BASE_DIR, '../frontend/build/static')
]
This will copy all files from your static folders into the STATIC_ROOT
directory.
your favicon is not in any of listed staticfiles directiories
Second thing is that Django static files are only accessible from full STATIC_URL path ( you cannot use just .home/ path)
Fix would be one of following
to simply add icon inside static folder
use ngnix to serve static files and add proper blocks ( prefered )
change STATIC_ROOT='/var/www/web/home/' and STATIC_URL = 'home/' ( note this way index.html and rest of files in home would be accessible as staticfiles)
I can not see my static files when running the project on the server (at my desktop it was ok).
When I look for the picture path on my browser I have
/static/app_name/images/image_name
My images are stored at
www.mydomain.com/xxx/xxx/static/app_name/images/image_name
I tried to adjust the settings.py from
'/static/'
to
'/xxx/xxx/static/'
But it seems to have no effect as the images path on my browser are still
/static/app_name/images/image_name and not /xxx/xxx/static/app_name/images/image_name
Am I missing something here?
Thanks for any help!
Changing STATIC_URL = '/static/' is only going to change the URL, not where the images are actually served.
Make sure that STATIC_ROOT is pointing to /path/to/www.mydomain.com/xxx/xxx/static/ and make sure you are using hard-coded paths in your settings.py, not something like
os.path.join(os.path.dirname(__file__, 'static'))
Then in your templates
<!-- either -->
<img src="{{ STATIC_URL }}img/my_image.png" />
<!-- or -->
{% load static %}
<img src="{% static 'img/my_image.png' %}" />
Also, be sure you're running python manage.py collectstatic to collect all of the static files from all of your apps to place them in the STATIC_ROOT directory.
Also
Depending on which server you're using, make sure you have a path alias that points to your static directory. For example, in Apache in your /sites-available/www.mydomain.com conf make sure that this Alias directive exists
<VirtualHost *:80>
...
Alias /static /path/to/www.mydomain.com/xxx/xxx/static/
...
</VirtualHost>
I have nginx, gunicorn, django running on Ubuntu EC2 instance. The entire site operates fine. Except for the admin. The admin isn't displaying properly. I ran "python manage.py collectstatic" and edited the STATIC_ROOT and STATIC_URL. When I load the admin page, it's ugly, but when I inspect the source, the CSS files are located they should be
<title>Site administration | Django site admin</title>
<link rel="stylesheet" type="text/css" href="http://staticfiles.mydomain.com/static/admin/css/base.css" />
<link rel="stylesheet" type="text/css" href="http://staticfiles.mydomain.com/static/admin/css/dashboard.css" />
I can look at the nginx access.log and see the files are getting requested and delivered, but the page does not display properly. It's like the files are being received but not processed. Error log is clean.
SOLVED
Under the console tab in Chrome Developer Tools I noticed the following:
Resource interpreted as Script but transferred with MIME type text/plain: "http://staticfiles.<mydomain>.com/static/admin/js/jquery.min.js".
So the files were getting delivered to browser, but it didn't know what to do with them. To fix it I had to edit the nginx.conf and specify the default type for a couple directories ...
location /static/admin/js/ {
default_type text/javascript;
alias /home/ubuntu/webapps/<myproject>/static/admin/js/;
}
location /static/admin/css/ {
default_type text/css;
alias /home/ubuntu/webapps/<myproject>/static/admin/css/;
}
That fixed it; the django admin loads the stylesheets and javascript files and looks and operates normally. I hope this helps someone else.
My Solve ;
1.step
settings.py edit
from django.conf.global_settings import TEMPLATE_CONTEXT_PROCESSORS as TCP
STATIC_ROOT = "/opt/venv/myDjangoProject/static/"
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'django.contrib.staticfiles.finders.FileSystemFinder',
)
TEMPLATE_CONTEXT_PROCESSORS = TCP + (
'django.core.context_processors.request',
)
2.step
run collesctstatic in terminal :)
python manage.py collectstatic
The proper way to solve this is to add include /etc/nginx/mime.types; in the http section of the nginx configuration file.