Develop Reference

How to serve static files (like images) in a combined django-react application

This is the first web application I'm developing by combining django and reactjs, in fact react is new to me.
Please if my approach is wrong I'm open for correction.
When developing with purely django, I find no difficulty with static and media files.
It is clear that the elements involved are the media root and static root,
respectively. In that case, all I need to do is to specify the static/media root in the
settings.py in the django app as shown below:
settings.py
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = '/media/images/'
urls.py
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) \
+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
However, when I combine django and react the configuration changes since django is configured
to look at index.html file in react, in which case an additional element called STATICFILES DIRS
is added to the seetings.py file to specify the path to react index.html. In fact, my django app
configuration looks like this when I combine django and react:
settings.py
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'build/static')]
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = '/media/images/'
urls.py
urlpatterns = [
...
re_path(r'^.*', TemplateView.as_view(template_name='index.html'))
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) \
+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
TEMPLATES = [
{
...
'DIRS': [os.path.join(BASE_DIR, 'build')],
...
]
Everything works well as when I'm developing purely with django except that when I combine django and react in development the images I upload refuse to displayed
on the browser since any path that does not match with the specified paths in urlpattern are redirected
to react. re_path(r'^.*', TemplateView.as_view(template_name='index.html')) So the image path is being redirected. When I click the image link in the admin file, instead of
the image to get displayed, I'm redirected to react also. I have made research online but I can't find any resources
that explained properly how to configure the django static root and media root to be able to serve files (
like images uploaded to the database) content.
Please, do I display images and media on the browser? In production, I would like to serve static files of the
django-react app with aws s3 bucket

Check that you have added the build folder to installed apps
INSTALLED_APPS = [ build, ]
If DEBUG use STATICFILES_DIRS else use STATIC_ROOT. Add this code in the settings.py file.
if DEBUG: STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] else: STATIC_ROOT = os.path.join(BASE_DIR, 'static')
In the urls.py file
urlpatterns += [re_path(r'^.*', TemplateView.as_view(template_name='index.html'))]
Then run python manage.py collectstatic
You should also install whitenoise pip install whitenoise

Use static files in django/html for download gives 404

I am creating a web application in django when I wanted to create a static file download with html. I went into urls.py and modified it to have this at the end: static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Then I added this to index.html:
{% load static %}
<a href={% static "file.zip" %} download>Download File</a>
Then I added these lines to mysite.settings:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
I then went into my base directory and added a directory called static.
I added the file file.zip into that directory, then went to the terminal and did a cd to the base directory. Finally, I run the command: python3 manage.py runserver
I then go to the server adress and click Download File.
At the bottom of the browser I then see:
File.zip
Failed- no file
So I look back to the terminal and I see:
"GET /static/file.zip HTTP/1.1" 404 1760
in orange. I see that this has a 404 at the end, so i look to stack overflow. I have spent days finding the answer, and so far i have tried:
Django Static files 404
Download static file displayed in the list Django
https://docs.djangoproject.com/en/3.0/howto/static-files/
How do you make a working static file download with html and django?
Any working answer is appreciated!
Thanks!

Add this in settings.py
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
hope this work!

Django Static Url Error, Not Loading

I'm currently mad at Django (1.9) right now! The saddest thing is 'Static URL' is the one giving me problem. 'Media URL' is working fine, no problem, but the static url is giving a huge headache.
in my settings_dev.py
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
PROJECT_PATH = os.path.abspath(os.path.dirname(__file__))
STATIC_ROOT = os.path.join(PROJECT_PATH,'../static/')
STATIC_URL = '/static/'
when I add the below tag:
{% load static from staticfiles %}
<script type="text/javascript" src="{% static 'datepicker/js/bootstrap-datepicker.js' %}"></script>
The js file won't load. when I check my source code, it will display the below link.
<script type="text/javascript" src="/static/datepicker/js/bootstrap-datepicker.js"></script>
And when I click it will redirect me to
http://127.0.0.1:8000/static/datepicker/js/bootstrap-datepicker.js
And display
Page not found (404)
Request Method: GET
Request URL: http://127.0.0.1:8000/static/datepicker/js/bootstrap- datepicker.js
Now, I adjusted my urls.py to
if settings_dev.DEBUG:
# static files (images, css, javascript, etc.)
urlpatterns += patterns('',
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {
'document_root': settings_dev.MEDIA_ROOT, 'show_indexes': True}),
(r'^static/(?P<path>.*)$', 'django.views.static.serve', {
'document_root': settings_dev.STATIC_ROOT, 'show_indexes': True}),
)
Yet, I'm still getting the same error!! Page not found issues.
Project Directory
PROJECT NAME: Book/
SUB DIRECTORY:
media
static
Template
book
bookapp
manage.py (this is a file)
What am I missing?

Okay to make things clear for you.
STATIC_ROOT is that directory where all your static data gets collected when you want to serve your files on another server, say APACHE or NGINX or maybe on Heroku or so.
If don't want just want to run your web-app on your local development server, you don't require python manage.py collectstatic and hence you don't need STATIC_ROOT.
All you need is STATIC_URL and in case you have your static files at some other location as well then you also need STATICFILES_DIRS = [os.path.join(BASE_DIR, "static"),].
So you'll be having a folder named `static' at the base directory level where django will look for your static files.
If you specify the same folder for STATIC_DIRS and STATIC_ROOT then you'll automatically get an error. Django won't allow you to do that as technically you are trying to give the same directory for two different purposes.
See this for a detailed explanation -> Differences between STATICFILES_DIR, STATIC_ROOT and MEDIA_ROOT

STATICFILES_DIRS = [os.path.join(BASE_DIR, "static"),]
That line is enough for serving your project static folder files... And you have to set this in your urls.py
urlpatterns = [
...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Why won't Django load my static CSS files?

I'm having trouble getting Django to load my CSS for my html template. I'm aware that there are a lot of posts like this, such as here and here, but I'm not sure what else to do here as I've tried several of these types of these solutions to no avail.
Loading up my website using python manage.py runserver returns this log:
[31/Jul/2016 01:58:29] "GET / HTTP/1.1" 200 1703
[31/Jul/2016 01:58:29] "GET /static/css/about.css HTTP/1.1" 404 1766
I'm not sure if the 404 on the end of the second line of the log refers to a 404 error or not.
I have tried adding the static files to my urls.py:
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^$', TemplateView.as_view(template_name='about.html'))
]
urlpatterns += staticfiles_urlpatterns()
I have tried modifying my settings.py:
STATIC_ROOT = ''
STATIC_URL = '/static/'
STATICFILES_DIR = os.path.dirname(os.path.abspath(__file__)) + "/static/"
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder'
)
And I of course used the proper loading methods in the actual template itself:
{% load staticfiles %}
...
<link rel="stylesheet" href="{% static 'css/about.css' %}">
Here's my file structure:
Personal_Website
|Personal_Website
||settings.py
||urls.py
||etc...
|static
||css
|||about.css
Frankly, I'm not sure what else to do here. I feel like I've tried everything with the settings and still I'm getting that same log.

You should have this to serve static file in project directory...
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static"),]
os.path.dirname(os.path.abspath(__file__)) This is pointing to Personal_Website folder where settings all file is there...

How do I display an image on my webpage in Django?

I want to display an image on my website. I've been looking through the Django documentation and the other posts on stackoverflow, but I haven't gotten this to work.
I have an image name 'under-construction.jpg'. It lives in the /home/di/mysite/myapp/static/images directory.
I have a template like this:
<img src="{{ STATIC_URL }}images/under_construction.jpg" alt="Hi!" />
in my views.py I have this:
def under_construction(request):
return render(request, 'under_construction.html')
In my settings.py, I have this:
STATIC_ROOT = ''
# URL prefix for static files.
# Example: "http://media.lawrence.com/static/"
STATIC_URL = '/static/'
# Additional locations of static files
STATICFILES_DIRS = (
# Put strings here, like "/home/html/static" or "C:/www/django/static".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
'/home/di/mysite/myapp/static',
'/home/di/mysite/myapp/static/images',
)
I executed ./manage.py collectstatic and it put a lot of files in /home/di/mysite/admin and /home/di/mysite/images. What do I have to do get my image to show up?

All you need to do is edit settings.py to be as the 4 following points and create a new folder (static) in the same folder settings.py is located
in the folder static you can create another folder (images) in it you can put the (under_constructioon.jpg)
STATICFILES_DIRS = (os.path.join( os.path.dirname( __file__ ), 'static' ),)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',)
STATIC_URL = '/static/'
STATIC_ROOT = ''
after you're done with the prev. points you can write
<img src="{{ STATIC_URL }}images/under_construction.jpg" alt="Hi!" />

I have faced same problem displaying the static image. suffered a lot and spent a lot lot of time in this regard. So thought to share my settings.
settings.py
STATIC_ROOT = ''
STATIC_URL = '/static/'
ADMIN_MEDIA_PREFIX = '/static/admin/'
import os.path
STATICFILES_DIRS = (
"D:/temp/workspace/offeronline/media",
(os.path.join( os.path.dirname( __file__ ), 'static' )),
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
urls.py
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
# ... the rest of your URLconf here ... and at the end of the file add the following line
urlpatterns += staticfiles_urlpatterns()
and finally added the following code to the template tag and it worked
<img src="{{ STATIC_URL }}images/i1.png" />

I have solved that problem like this.
STATIC_ROOT = '/path/to/project/static/'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
)
Django will not directly get files directly even you do this. You need to link this static directory for each application of yours. Just go to the django app dir run following command..
cd /path/to/project/my_proj/my_app
ln -s /path/to/project/static/
This will work only in debug mod. You need to set DEBUG = true in settings.py file. This should work with django's development server.
Django won't serve any static file in production mod. You need to serve static files with web-server in production mod.
More information can be found here..

Django does support static files during development, You can use the django.views.static.serve() method in view to serve media files.
But using this method is inefficient and insecure for production setting.
for Production setting in Apache
https://docs.djangoproject.com/en/1.2/howto/deployment/modpython/#serving-media-files

set STATIC_ROOT = /path/to/copy/files/to
have you added
urlpatterns += patterns('django.contrib.staticfiles.views', url(r'^static/(?P<path>.*)$', 'serve'),
or you can also do this
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
# ... the rest of your URLconf here ...
urlpatterns += staticfiles_urlpatterns()
and of course try not to server static files through django it does have some overhead instead configure your http server to serve them, assuming you have an http server (nginx is quite good).