Django development cannot find third party script in node_modules - django

I'm working in a development environment with debug = True on Windows 10.
I have installed node and npm and run npm microm from the main folder of my project. It created a node_modules subfolder with a microm folder inside, among others. so the microm.js script is located in:
f:\roomtemp\node_modules\microm\microm.js
The relevant portion of my Settings file is:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
...
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'node_modules')
My template contains the following:
{% load staticfiles %}
<script src='{% static "/microm/microm.js" %}'></script>
When I attempt to load the page, the Chrome console shows a 404 and I see this in the server console:
"GET /static/microm/microm.js HTTP/1.1" 404 1661
I have read many SO questions that seem to contain the solution but none have worked so far. I've also searched high and wide on the internet. No luck so far. Any help would be much appreciated.
Mike

First of all I don't think you should STATIC_ROOT at your node_modules folder. STATIC_ROOT is where the django management commant collectstatic will put all the static files from all the apps into when you are readying for deploying. This process may result in some files being overwritten.
Please restore STATIC_URL to some sane value like
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static')
Then use the STATICFILES_DIRS setting. This is what tells django what extra locations to look for static files.
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'node_modules')]
Finally, make sure that your STATICFILES_FINDERS has these
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',

Related

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)

Django cache. ManifestStaticFilesStorage

I have just started to use ManifestStaticFilesStorage and I am running into a problem I do not understand.
Firstly, if I prepare and run the website without ManifestStaticFilesStorage, then everything displays properly. Within the browser I can for example, see a link to an image and if I follow that it shows the image in a resource box:
Next, I add the following line of code into settings
STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.ManifestStaticFilesStorage'
and I also have:
STATIC_ROOT = os.path.join(BASE_DIR, "static")
I then delete the static directory and rebuild everything (migrations, collect static).
This produces a website with the following link to an image, but the resource is not visible:
However, when I go into the static folder in my project and look at the directory, I can see the file clearly and as far as I can tell, it appears normal:
It's like Django is failing to link up correctly when I use ManifestStaticFilesStorage.
I have included some other settings that may be relevant:
STATIC_URL = '/static/'
# STATIC_ROOT = 'static'
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATICFILES_DIRS = [
'./ebdjango/static/',
]
I'm new to this, so if you have any suggestions on how to proceed with the cache in Django, please let me know.
Many thanks
Mark

Django Wagtail Deployment Static File Server

After deployment today, for some reason, the project no longer shows style from items that would have been collected during the collectstatic process. I have full access to the files from any browser. I have checked all permissions. I have browsed to the site from the development server, and other machines to eliminate software\font possibilities. No idea what's going on here.
I serve the files from a different server. Other django projects are unaffected. No other django projects use anything like wagtail though. Pulling my hair out at this point and probably just missing something simple. What am I missing?
base.py config
STATIC_ROOT = '/var/www/html/static.xxxxxx.net'
STATIC_URL = 'http://static.xxxxxx.net/'
MEDIA_ROOT = '/var/www/html/media.xxxxxx.net'
MEDIA_URL = 'http://media.xxxxxx.net/'
Checking for file existence on server:
-rw-rw-r-- 1 xxxxxx xxxxxx 13648 Aug 24 09:18 /var/www/html/static.xxxxxx.net/wagtailadmin/css/userbar.3d5222a7eba2.css
Checking CSS relative references
-rw-rw-r-- 1 xxxxxx xxxxxx 68812 Aug 24 09:18 /var/www/html/static.xxxxxx.net/wagtailadmin/css/../../wagtailadmin/fonts/opensans-regular.45f80416d702.woff2
Django Debug Toolbar shows 4 static files used for both the production and development environments. Everything is identical.
In the chrome inspect view, if I replace a relative CSS stylesheet link in the development environment with a link from the file server, it breaks the same way.
From:
/static/wagtailadmin/css/userbar.css
To:
http://static.xxxxxx.net/wagtailadmin/css/userbar.css
Again, I can stick that address in my browser, any browser, and I see the stylesheet. I really have no idea how my file server could be stopping browsers from processing CSS, but that's what it's starting to look like.
Update: in the chrome inspect view, if I remove a css reference that uses a stylesheet from my fileserver, the page loses all the style\colors\etc. If I reapply the link to my server, it applys the styles again. It seems to apply all the style except icons\glyphs.
Update 2: If I change to STATIC_URL = '/static/' I get the styles... Until I turn debug back off :-/
Wagtail's recommended setup for STATIC_ROOT, STATIC_URL, MEDIA_ROOT, and MEDIA_URL is typically much simpler and the ..._URL declarations are typically not absolute references. I set things up in base.py like this:
PROJECT_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
BASE_DIR = os.path.dirname(PROJECT_DIR)
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
os.path.join(os.path.join(BASE_DIR, directory_structure_down_to..., 'static'),
--- include as many lines like above as necessary here ---
]
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
If you use wagtail-react-streamfield, update it. The font wagtail.woff is duplicated there and it gets picked up first (before wagtail's original one) by Django's static subsystem when collecting statics.

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' %}">

Where are my static files in a Dokku based installation?

I finished a Dokku deployment on a Digitalocean server. My application seems to work, except for my static files.
Here are the relevant parts of my settings.py file:
PROJECT_DIR = Path(__file__).absolute().ancestor(2)
MEDIA_ROOT = ''
MEDIA_URL = ''
STATIC_ROOT = ''
STATIC_URL = '/static/'
STATICFILES_DIRS = (
PROJECT_DIR.child('static'),
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
STATIC_ROOT = PROJECT_DIR.child('staticroot')
Does someone know how can I point my app at my static files on a Dokku based system?
Though it's not answering my question, we're currently serving the static files from AWS S3, and that works. It makes my question less urgent, but I still would like to know if it is possible to solve it "locally".
You may need to do a few things
run ./manage.py collectstatic to move static files to your static folder
Update your web server config so that /static/ points to the static folder.
Have you done this already?