title: How to serve static files (like images) in a combined django-react application
body: <p><strong>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</strong>.
  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:</p>
  <pre><code>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)
  
  </code></pre>
  <p>However, when I combine django and react the configuration changes since django is configured
  to look at <code>index.html</code> file in react, in which case an additional element called <code>STATICFILES DIRS</code>
  is added to the seetings.py file to specify the path to  react <code>index.html</code>. In fact, my django app
  configuration looks like this when I combine django and react:</p>
  <pre><code>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')],
      ...
  ]
  </code></pre>
  <p>Everything works well as when I'm developing purely with django except that when I combine django and react in development <strong>the images I upload refuse to displayed
  on the browser since any path that does not match with the specified paths in <code>urlpattern</code> are redirected
  to react.</strong> <code> re_path(r'^.*', TemplateView.as_view(template_name='index.html'))</code> 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.
  <strong>Please, do I display images and media on the browser?</strong> In production, I would like to serve static files of the
  django-react app with aws s3 bucket</p>