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

Django : Static content not found

I have been breaking my head over this for a full day but can't figure out the problem. It happened after I copied my project from one machine to another.
Settings.py
STATIC_URL = '/static/'
STATIC_ROOT = 'staticfiles'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
Mentioned 'django.contrib.staticfiles' in INSTALLED_APPS as well.
Folder structure :
Django-Projects (root)
project
app
static
css
home.css
js
manage.py
Template :
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'css/home.css' %}">
urls.py
urlpatterns = patterns('',
url(r'^admin/', include(admin.site.urls)),
url(r'', include('app.urls')),
)
It throws an error in the console on opening the template :
GET http://127.0.0.1:8000/static/css/home.css
Failed to load resource: the server responded with a status of 404 (NOT FOUND)
What might be wrong here ? Please help me out. Much thanks!

In your settings.py
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
STATIC_URL = '/static/'
Then in your template file:
<link rel="stylesheet" href="{{ STATIC_URL }}css/home.css">
With the directory root structure that you have shown, I think the above setting should work. Have not tested it though. Let me know if it works.

set DEBUG=True and see if it works .. this means, django will serve your static files, and not httpserver which in this case doesnt exist since you run the app locally.

I had researched this problem for a full day. This will be okay:
DEBUG = True
ALLOWED_HOSTS = []

Django default BASE_DIR will search static content for you. But in your case you changed the way before initial project. So for that in your case you have to change your BASE_DIR like this .. then only static file will serve correctly
BASE_DIR = os.path.dirname(os.path.abspath(__file__) + '../../../')
Updated:
I didn't see that comment. ! DEBUG = True only for development and You set as False so will django use STATIC_ROOT = 'staticfiles' to serve the static content on the production environment ... Thank you

You don't have to refer to STATIC_ROOT = 'staticfiles'
Just Like that:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)

I had the same issue in Django.
I added to my settings: STATIC_ROOT = 'static/'
It was the only problem.

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

Django servering static files not working with dev server

Not sure what I'm doing wrong, but I can't get this to work. I'm using Django 1.3 and Python 2.7.
My project structure looks like this:
project
static
templates
settings.py
apps
...
In my settings.py file I have
PROJECT_ROOT = os.path.realpath(os.path.dirname(__file__))
STATIC_ROOT = os.path.realpath(os.path.join(PROJECT_ROOT, 'static'))
STATIC_URL = '/static'
my urls.py file:
from django.conf.urls.defaults import *
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = patterns('',
url(r'^admin/', include(admin.site.urls)),
url(r'^grappelli/', include('grappelli.urls')),
)
urlpatterns += staticfiles_urlpatterns()
In my templates, I'm using {{ STATIC_URL }} which creates the correct path to my files, like this: /static/js/libs/modernizr-2.0.6.min.js.
None of my static files load and I've double checked the directory structure is correct. I feel like I'm taking crazy pills, so any advice is appreciated. Thanks

You should add the complete path to the dir where you place your static files in STATICFILES_DIRS in settings.py, like this:
STATICFILES_DIRS = (
'/path/to/static',
)

Either add STATICFILES_DIRS as in previous answer or put the package directory that has 'static' dir in your INSTALLED_APPS because django will automatically serve any static dir in apps during development. If your project directory is not on python path and you're not planning to make it importable then you have to define STATICFILES_DIRS and put absolute path to the static directory.

Django static files not loading with default setup

So I installed Bitnami Django stack, and enabled the admin module, and followed the tutorial for creating an admin menu for "Polls".
However, when I go to /admin/ everything is white plaintext. All the css and images are 404 error.
All I did was:
enable in settings.py installed_apps:
'django.contrib.admin',
In urls.py UNcommented:
from django.contrib import admin
admin.autodiscover()
url(r'^admin/', include(admin.site.urls)),
uncommented.
In settings.py, I tried using default settings and also tried this:
MEDIA_ROOT = ''
MEDIA_URL = '/media/'
STATIC_ROOT = ''
STATIC_URL = '/static/'
ADMIN_MEDIA_PREFIX = STATIC_URL + 'admin/'
import os
SITE_ROOT = os.path.dirname(os.path.realpath(__file__))
STATICFILES_DIRS = (
os.path.join(SITE_ROOT, 'static/'),
)
Nothing seems to work, it refuses to find static files in /admin/media/css/ etc.
I made sure my windows PATH has /bin of django. I even tried including /contrib, nothing helps.
I have installed Django to:
C:\DjangoStack\apps\django
I have installed my project to:
C:\Users\dexter\BitNami DjangoStack projects\Alpha
and I type: localhost/Alpha/admin to go to admin.

I almost missed the answer to this until I re-read your question and finally caught the bit in the last line: "and I type: localhost/Alpha/admin to go to admin". That means all your URL settings are wrong.
Currently, you have:
MEDIA_URL = '/media/'
STATIC_URL = '/static/'
ADMIN_MEDIA_PREFIX = STATIC_URL + 'admin/'
Whereas, these should be:
MEDIA_URL = '/Alpha/media/'
STATIC_URL = '/Alpha/static/'
ADMIN_MEDIA_PREFIX = STATIC_URL + 'admin/'
Additionally, you don't need "static/" in STATICFILES_DIRS. So remove that setting.

I'm from the BitNami Team and I just saw this issue. I'm not sure if you are using and older version but at least in the newer version of the BitNami DjangoStack you just need to make sure that the ADMIN_MEDIA_PREFIX point to /static/admin/ if you are following the
instructions in https://docs.djangoproject.com/en/1.3/intro/tutorial02/ . You don't need to copy the static files in your project directory because django automatically will use the files in django/contrib directory.
However currently we are setting the ADMIN_MEDIA_PREFIX to /static/admin/media because the behavior is different when the application is served by Apache instead of the django server. We realize that this may be a bit confusing for users that are just starting with django and we are looking at this on our side to keep the default configuration for the new projects but also allow the demo project to be served by Apache.