uwsgi static files loading error form django (react and webpack) - django

My app consists of django and react, which at the end is bundled to static (.js) file.
My goal is to setup a nginx for it, but for now I just want to run in uwsgi to see if it works.
Aaaaand it does not work at all. I belive there is a issue with loading this bundle file which webpack is compiling.
Connection to uwsgi works, server is up and running, but when connecting to 127.0.0.1:8080 I get (in Mozilla):
The resource from “http://127.0.0.1:8080/static/frontend/main.js”
was blocked due to MIME type (“text/html”) mismatch
(X-Content-Type-Options: nosniff).
# and another
GET http://127.0.0.1:8080/static/frontend/main.js
HTTP/1.1 404 Not Found
Content-Type: text/html
X-Frame-Options: DENY
Content-Length: 3277
X-Content-Type-Options: nosniff
Referrer-Policy: same-origin
Vary: Origin
Similar topic I found: Difference between static STATIC_URL and STATIC_ROOT on Django
and this: Django + React The resource was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)
But messing with python manage.py collectstatic resolved nothing.
I have this lines of code to manage static files:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join('/app/label_it/front/static/frontend/')
And this is how I start my uwsgi connection:
python manage.py collectstatic --no-input
uwsgi --http 0.0.0.0:8080 --master --enable-threads --module label_it.wsgi
Beside collectstatic I've tried messing with <script src"static_file_path"></script> this static path with:
<script src="../../static/frontend/main.js"></script>
# and
<script src="{% static "frontend/main.js" %}"></script>
Which result in nothing.
Any clues appreciated !
EDIT:
My file structure:

Ok I just did some testing with my own server and django project to confirm my suspicion and I've come to the following conclusion: This error will happen if the path to the static file doesn't exist. Meaning that uwsgi cannot find this main.js file with the settings you have.
My suggestion would be to do the following to ensure your static files are being served correctly in a way that django knows where to look.
By default django searches inside each installed app for a static folder to find static assets. Because your project is not setup that way you have to specify additional directories where static files live.
This is what STATICFILES_DIRS is for.
In your settings.py put the following
STATICFILES_DIRS = [
BASE_DIR / 'label_it/front/static'
]
This will make all files inside label_it/front/static discoverable to django.
Now this means that
<script src="{% static "frontend/main.js" %}"></script>
will (hopefully) work.
additionally, remember to include your static urls in your urls.py file if you haven't already.
urls.py
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [
...
]
# static content urls
urlpatterns += staticfiles_urlpatterns()
Sidenote: STATIC_ROOT is intended to be the location where all static files will be collected to when you run python manage.py collectstatic.
As such it should be an empty directory, preferably in the root of your django project.
STATIC_ROOT = os.path.join(BASE_DIR, 'static_collected')
The name of the folder doesn't really matter and I've used static_collected as an example.
If you run the command hopefully you'll see all the files in label_it/front/static/ copied there.

Related

How to server favicon.ico with Django and Whitenoise

I use whitenoise for static files and it works fine.
But how can I serve the /favicon.ico file?
There is a setting called WHITENOISE_ROOT, but I don't understand how to use it.
I would like to keep my nginx config simple and serve all files via gunicorn
If you want those files to be managed by collectstatic
Let's assume after running collectstatic, your favicon.ico file ends up being copied in a root subdirectory, located in your STATIC_ROOT directory.
Then, with:
WHITENOISE_ROOT = os.path.join(STATIC_ROOT, 'root')
Whitenoise will serve all files in STATIC_ROOT/root/ at the root of your application.
In your case, STATIC_ROOT/root/favicon.ico will be served at /favicon.ico.
If you don't want those files to be managed by collectstatic
You can have a root_staticfiles folder in your BASE_DIR which simply contains the static files you want to serve at /.
WHITENOISE_ROOT = os.path.join(BASE_DIR, 'root_staticfiles')
In this case, Whitenoise will serve all files in BASE_DIR/root_staticfiles/ at the root of your application.
Update about pathlib (2022-10-04)
Since a while now, the default settings.py Django creates uses pathlib. To be consistent with it, one may replace os.join calls with / operators, eg.:
WHITENOISE_ROOT = STATIC_ROOT / 'root'
You could as per this answer by hanleyhansen add the following line in a base template (used by all further templates):
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
Or you could write a redirect view like this answer by wim with some little modification:
from django.views.generic.base import RedirectView
from django.conf.urls.static import static
re_path(r'^favicon\.ico$', RedirectView.as_view(url=static('favicon.ico'), permanent=True))
I have a django app that uses Whitenoise (hosted on Heroku) and serves my favicon from a separate folder from my static files.
Make a folder root_files at path BASE_DIR/root_files.
In settings.py:
WHITENOISE_ROOT = os.path.join(BASE_DIR, 'root_files')
For a real-life code example checkout Mozilla's Bedrock repo. They have favicons in BASE/root_files and configure WHITENOISE_ROOT in settings.py

Django collectstatic does not collect media files from react npm build folder

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)

Heroku Django static files not found

I am getting errors with a Django app on Heroku when referencing static files (e.g. CSS).
The files are found when running the site on my local Linux machine, but not when it is deployed on Heroku.
I have looked at the Django documentationrelating to static files, but I do not understand what I am doing wrong.
django.contrib.staticfiles is included in my INSTALLED_APPS.
In my_site/settings.py I have STATIC_URL = '/static/'.
In my HTML template I have
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'reco/style.css' %}">
The result is that the CSS file is found when running locally, but not on Heroku.
How can I fix this? I want the simplest possible solution - this is a very small site.
# Log message when running the app on the local machine: file is found and has not changed (correct)
[13/May/2020 15:02:52] "GET /static/reco/style.css HTTP/1.1" 304 0
# Log message when running the app on Heroku: not found. Why?
2020-05-13T20:09:20.327218+00:00 app[web.1]: Not Found: /static/reco/style.css
Update: Following suggestions from comments, I have configured the site as advised in the Heroku Django documentation
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
# Extra places for collectstatic to find static files.
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'reco', 'static'),
)
Now when I deploy to Heroku I see that collectstatic is collecting my static files - but Heroku is stil not finding them at runtime.
As per the Dev Center of Heroku...
You need to install whitenoise to be able to serve static files on production mode.
Follow the installation instructions over here.

Django any installed app not finding static files

latest versions of Django and Python, MacOS, PyCharm
I am having trouble installing any app. Everytime I try, it does not find the resources. Currently, I'm attempting to install uncaught in my Django app.
My app's name is RealEstate.
Deployment Directory for static: project_name/app_name/static/
Directory I use to copy new or revised files to Deployment Directory with collectstatic:
project_name/app_name/static_changes/
inside static, I have an admin folder with different subfolders:
static/admin/css, static/admin/fonts, static/admin/img, static/admin/js, static/admin/node_modules
settings.py:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
DEBUG = TRUE
STATIC_ROOT = os.path.join(BASE_DIR, 'RealEstate/static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "RealEstate/static_changes/"),
]
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]
I have run the install for uncaught, which created a package-lock.json file and a node_modules folder with the uncaught resources, both put into the root of my project:
$ npm install --save uncaught
Since I use static_changes to copy any new or modified resources into the deployment directory static, I have copied the node_modules folder put into the project root to my app_name/static_changes/admin folder and run collectstatic
python3.7 manage.py collectstatic
It copies the files to app_name/static. But when I open the browser, the files are never found, and I get this message in the Run Console:
Not Found: /admin/node_modules/uncaught/lib/index.js
[26/Feb/2019 22:57:47] "GET /admin/node_modules/uncaught/lib/index.js
HTTP/1.1" 404 14044
I have tried moving admin/node_modules to every part of my directory structure and run collectstatic to it, and the app still never finds the resources.
Please help. Why is it that any app I try to install, it cannot see the resources, even though they exist in project_name/app_name/static/admin and I used collectstatic to get it there?
make sure that the URL in base.html is correct, like this:
<script src="{% static "admin/node_modules/uncaught/lib/index.js" %}"></script>
In macOS, I followed these steps:
https://docs.djangoproject.com/en/3.1/howto/static-files/
And ended like this:
settings.py
BASE_DIR = Path(__file__).resolve().parent.parent ---> Didn't touch this specific line
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / "static"
]
main.html
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static '/css/main.css' %}">

Django Admin not working / ugly - serving with nginx and gunicorn

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.