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

Media files not displaying when DEBUG = False; what are the prerequisites to get them to show?

As I state in the title, when I set DEBUG = False in my project's settings file, the files from my media directory (the one the user uploads) don't display. The files from my static directory (the CSS and JavaScript files) load properly.
I looked at this answer, but I don't understand the prerequisites to get this to work. I am testing this on my local machine, where I only have Django and PostgreSQL installed. I don't have any Apache servers running, as far as I'm aware. I want to deploy my app on Amazon AWS, so I'd like to try out how it will look in production there before I deploy it to Amazon AWS.
Here are the relevant parts of my settings.py file:
DEBUG = False
ALLOWED_HOSTS = ['*']
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media')
MEDIA_URL = '/media/'
STATICFILES_DIRS = [
BASE_DIR / "static",
'/var/www/static/',
]

Willem Van Onsem is right on the media files. Since the static file is OK, for the workaround, you can add this line to your urls.py in the folder containing settings.py:
from django.conf.urls.static import static
from django.conf import settings
urlpatterns+=static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Media file not being found in production Django-Heroku: returns 404 error

I have some default images in my media folder in Djang. However, on my website, I cannot see the images being displayed and I get a 404 error.
Now my project folder tree is(project name is register):
register
-- live-static
---- static-root
---- media-root
------ defaults
and my media and static files settings are:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'live-static', 'static-root')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'live-static', 'media-root')
STATICFILES_STORAGE = 'whitenoise.storage.CompressedStaticFilesStorage'
And inside my urls.py in the same folder as wsgi.py I have:
urlpatterns = [
"""
My other urls
"""
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT ) + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
My static files are loaded and the server can retrieve them, however, the images that I added to my folders in media-root are returning a 404 error by the server. Why is this happening as I have already also set STATICFILES_STORAGE as well?

This is something I got hung up on with my first Heroku deploy. Since Heroku projects run on dynos, they eventually go to sleep if there is not a request within a certain period of time. When the dyno restarts, it does not save the uploaded data. Here is a link to some information from Heroku: https://help.heroku.com/K1PPS2WM/why-are-my-file-uploads-missing-deleted
What I ended up doing is setting up an Amazon S3 bucket for storage of these files. Dennis Ivy did a video explaining how to do this: https://youtu.be/inQyZ7zFMHM

Update your setting file like this
there is no need to change any thing else
in urls.py change the urlpatterns to. remove STATIC_ROOT etc
+static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
in setting.py like this. remove other file settings like STATICFILES_STORAGE
MEDIA_URL = '/media/'
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'static')
]
#if your media folder is in public_html which contain the media file
MEDIA_ROOT = '/home/yourusername/public_html/media'
STATIC_ROOT = '/home/yourusername/public_html/static'
#if your media folder is in other_folder which contain the media file
MEDIA_ROOT = '/home/yourusername/other_folder /media'
STATIC_ROOT = '/home/yourusername/other_folder /static'

my django project static files can not be load with option debug=false

It is very strange that my django website (setup on a linux server with django 1.3) can be visit correctly with DEBUG = True. But when I changed the option to DEBUG = False the static content won't load (css files and images can not be found)
Here's related options i got in my setting.py:
DEBUG = False
STATIC_ROOT = ''
ADMIN_MEDIA_PREFIX = '/static/admin/'
STATICFILES_DIRS = ("/home/ubuntu/ls_website/static/",)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
Anybody have any idea? If the version is too low, I would wait a while for 1.5 release.

I found when debug=False, django won't load static files automatically. Options are set static path in urls.py or serve static files with apache.
People said set static path in urls.py is slower than serve static files with apache. Don't know why though...

Staticfiles doesn't do anything when DEBUG=False. You need to serve those files with apache. Staticfiles has the ability to collect the files to one spot for you to make it easy, then you use some apache magic (assuming here since you didn't specify) to have apache intercept those requests and serve the static files for you.
Alias /robots.txt /home/username/Python/project/site_media/static/robots.txt
Alias /favicon.ico /home/username/Python/project/site_media/static/favicon.ico
Alias /static/ /home/username/Python/project/site_media/static/
I don't remember if it is buildstatic, build_static, collectstatic or collect_static to copy those files from your development stop to your deployment spot, but these variables control how staticfiles does its magic
# Absolute path to the directory that holds static files like app media.
# Example: "/home/media/media.lawrence.com/apps/"
STATIC_ROOT = os.path.join(PROJECT_ROOT, "site_media", "static")
# URL that handles the static files like app media.
# Example: "http://media.lawrence.com"
STATIC_URL = "/static/"
# Additional directories which hold static files
STATICFILES_DIRS = [
os.path.join(PROJECT_ROOT, "static"),
os.path.join(PROJECT_ROOT, "media"),
]
This assumes your static files are in the static folder of your project, and you want to serve them from the site_media folder.

I also move between Windows and Linux for development. To get around the problem of absolute paths in settings.py, I use this function:
def map_path(directory_name):
return os.path.join(os.path.dirname(__file__),
'../' + directory_name).replace('\\', '/')
Which you can implement in this fashion:
STATICFILES_DIRS = (
map_path('static'),
)
This function is tailored for Django 1.4.x. You'll need to modify it slightly for Django 1.3.x. Hope that helps you out.

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).