We Keep Coding

What is the right way to setup urls.py for django-rest-framework + angular-route + static files?

I understand the concept of what I want to do (there is a rather nice question here: Django, REST and Angular Routes)
Django has a route for DRF, Admin, and needs at least one more, for the angular page.
But I'm not sure on the implementation details, particularly in where to put the frontend/static files, what to put in urls.py, and how to configure it for dev+production.
My url patterns currently look like this:
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^api/', include(router.urls)),
url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]
Ideally, in production, I want serve the HTML without touching django - straight from nginx or similar (probably using AWS EB, but that is outside the scope of this question).
For Dev - I don't mind, as long as it works!
Skipping djangos templating system for angular would be great, rather than altering angulars operators. I don't intend to use django templates (except in djangos admin, and DRFs browsable views)

For development, I use something like this, at then end of the main urls.py file, to serve static files from various directories:
if settings.DEBUG:
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf.urls.static import static
# this connects STATIC_URL to STATIC_ROOT
urlpatterns += staticfiles_urlpatterns()
# connect other paths to directories
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
urlpatterns += static('/app/',
document_root=join(settings.BASE_DIR, '../ng_app/'))
For production, you set the webserver to handle the requests. First the known routes like /admin/, /api/, /api-auth/ and files in /static/.
And then a catch-all route / that would always serve your index.html with the Angular app for any route. So that HTML5 routes in Angular will always load the app first, and the app then uses its own routes to build the correct page from API data.
The actual app files could be anywhere, even on a different server.

(Django) How to apply css?

I want to apply CSS on my Django project.
CSS path in my index.html is right but it doesn't work well.
My index.html page show up well in my site,
--app_index
----index.html
----bootstrap
-------css
-----------abc.css
-----------abc2.css
So, must I modify the URL.py file too?

You need to configure static files in your Django app. The following links should help guide you in the right direction:
http://www.tangowithdjango.com/book/chapters/templates_static.html
https://docs.djangoproject.com/en/1.7/howto/static-files/
You will set up your index.html for example in a template directory that can access your static files (e.g. CSS, javascript, static images, etc.) that are located in your static directory.
In response to your question concerning modification of urls.py, the answer is yes. As you will see in the links on configuring static files within your project, you have to add some code to your urls.py. An example of this code might look like this:
if settings.DEBUG:
import debug_toolbar
urlpatterns += patterns(
'django.views.static',
(r'media/(?P<path>.*)',
'serve',
{'document_root': settings.MEDIA_ROOT}),
url(r'^__debug__/', include(debug_toolbar.urls))
)
During development Django serves your static files hence the above code, but during production your static files are served via your configured server (e.g. Apache, nginx).

Django Static Setup

I've looked through countless answers and questions trying to find a single definitive guide or way to do this, but it seems that everyone has a different way. Can someone please just explain to me how to serve static files in templates?
Assuming I've just created a brand new project with Django 1.4, what all do I need to do to be able to render images? Where should I put the media and static folders?

Put your static files into <app>/static or add an absolute path to STATICFILES_DIRS
Configure your web server (you should not serve static files with Django) to serve files in STATIC_ROOT
Point STATIC_URL to the base URL the web server serves
Run ./manage.py collectstatic
Be sure to use RequestContext in your render calls and {{ STATIC_URL }} to prefix paths
Coffee and pat yourself on the back
A little bit more about running a web server in front of Django. Django is practically an application server. It has not been designed to be any good in serving static files. That is why it actively refuses to do that when DEBUG=False. Also, the Django development server should not be used for production. This means that there should be something in front of Django at all times. It may be a WSGI server such as gunicorn or a 'real' web server such as nginx or Apache.
If you are running a reverse proxy (such as nginx or Apache) you can bind /static to a path in the filesystem and the rest of the traffic to pass through to Django. That means your STATIC_URL can be a relative path. Otherwise you will need to use an absolute URL.

The created project should have a static folder. Put all resources (images, ...) in there.
Then, in your HTML template, you can reference STATIC_ROOT and add the resource path (relative to the static folder)

Here is the official documentation:
How to manage static files: https://docs.djangoproject.com/en/1.4/howto/static-files/
Static Files in general: https://docs.djangoproject.com/en/1.4/ref/contrib/staticfiles/
If you are planning to to deploy in a production type setting then you should read the section here: https://docs.djangoproject.com/en/1.4/howto/static-files/#staticfiles-production
Generally you put our static and media folders outside of the django project app

Define your STATICFILES_DIRS, STATIC, and MEDIA path in the settings.
Create staticfiles folder beside your templates folder, urls.py, settings.py, etc...
You don't have to create media folder because it will automatically created when you upload images.
In your urlconf put this one:
from django.conf.urls import patterns, include, url
from django.contrib import admin
from django.conf import settings
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf.urls.static import static
admin.autodiscover()
urlpatterns = patterns('',
.............
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += staticfiles_urlpatterns()
In templates:
{% load static %}
<img src="{% static 'images.png' %}">
<img src="{{MEDIA_URL}}images.png">

Django - serving user uploaded images

I am having some problems with serving user uploaded files from my Django application:
from models.py:
class Picture (models.Model):
title = models.CharField(max_length=48)
date_added = models.DateTimeField(auto_now=True)
content = models.ImageField(upload_to='pictures')
From the Django admin the files get uploaded to the user_res/pictures/ folder.
from the project's settings.py:
MEDIA_ROOT = 'user_res'
MEDIA_URL = '/user_res/'
STATIC_ROOT = ''
STATIC_URL = '/static/'
Every time I try to reference a static resource (namely css or js files), everything works fine using URLs such as
http://localhost:8000/static/<subfolder>/main.css.
However, I cannot access user uploaded files (which get created by the admin interface in the user_res/pictures folder with a relative URL such as
user_res/pictures/test.jpg
the URL is dynamically created with this line of code from a Django Picture model callable:
return '<img src="{}"/>'.format(self.content.url)
I have no dedicated url-s for either static or media files in the url.py file.
Does anybody have any idea as to how to make Django serve the media files? I understand that for live environments I will need to configure an http server to serve that particular directory, but for now I want to maintain a lightweight development suite.
Thank you.

Edit your urls.py file as shown below.
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = patterns('',
# ... the rest of your URLconf goes here ...
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
edit your projects settings.py to look like:
#Rest of the settings
MEDIA_URL = '/media/'
MEDIA_ROOT = 'media'
STATIC_ROOT = ''
STATIC_URL = '/static/'
Please read the official Django documentation about serving files uploaded by a user carefully. Link to docs: https://docs.djangoproject.com/en/1.5/howto/static-files/#serving-files-uploaded-by-a-user

I think the url attribute returns a relative URL ( Django's FileField documentation ), so you should have:
return '<img src="{}"/>'.format(MEDIA_URL + self.content.url)
Relative URLs won't work, as a user visiting "http://localhost/books/" would be requesting "http://localhost/books/user_res/pictures/test.jpg".

Django cannot find my media files (on development server)

The media is currently on my local development machine.
My MEDIA_ROOT, MEDIA_URL, ADMIN_MEDIA_PREFIX and are specified as below:
MEDIA_ROOT = os.path.join(os.path.dirname(__file__), "media")
MEDIA_URL = '/media/'
SITE_URL = 'http://localhost:80'
ADMIN_MEDIA_PREFIX = '/media/admin/'
There is no 'admin' folder but that shouldn't make a difference I don't think.
In the urls.py file I have:
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT}),
I am at a loss as to what I should do to get it working.
[I am trying to learn django and am working with an existing project that's pretty hairy]

You're mixing and matching pre and post-Django 1.3 static file handling. Originally all static files were served from MEDIA_URL, but Django 1.3 introduced the staticfiles contrib package and the associated STATIC_ROOT and STATIC_URL settings. django.views.static.serve utilizes the new staticfiles app, which you haven't set up.
Assuming you're running Django 1.3, first, you'll need to add 'staticfiles' to your INSTALLED_APPS. Then, you'll need to define STATIC_ROOT and STATIC_URL. The standard location is a project-root level directory named "static".
You'll also need to add the staticfiles template context processor:
TEMPLATE_CONTEXT_PROCESSORS = (
...
'django.core.context_processors.static',
)
This will make the STATIC_URL variable available in your templates, so you can reference your resources with something like {{ STATIC_URL }}css/style.css
All your static resources will also need to go into an app(s)-level directory named "static". The actual project-root level "static" directory is never directly used. It's simply the place where the collectstatic management command dumps all your static resources for use in production.
If you want project-wide static resources (not tied to any one particular app), you'll need an entirely separate directory (i.e. not the same as MEDIA_ROOT or STATIC_ROOT). I tend to use one named "assets". You'll then need to tell Django to look in here for static resources as well with the STATICFILES_DIRS setting:
STATICFILES_DIRS = (
os.path.join(os.path.dirname(__file__), 'assets'), # or whatever you named it
)
MEDIA_ROOT/MEDIA_URL are now only used for user uploads (e.g. any file created through FileFields and ImageFields, so you still need it, but you won't ever manually store anything there.
When you reach production, your webserver will need to serve both MEDIA_ROOT and STATIC_ROOT at MEDIA_URL and STATIC_URL, respectively. You'll also need to run:
$ python manage.py collectstatic
To make Django compile all your static files into the directory specified by STATIC_ROOT.

works with django 1.8 - 1.11:
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# ... the rest of your URLconf goes here ...
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
https://docs.djangoproject.com/en/1.11/howto/static-files/#serving-files-uploaded-by-a-user-during-development
note that Django documentation states that this is
not suitable for production use
(obviously unless you use if settings.DEBUG: part)

On development server, this page may help you.
https://docs.djangoproject.com/en/1.2/howto/static-files/
By adding follow code to urls.py:
if settings.DEBUG:
urlpatterns += patterns('',
(r'^site_media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': '/path/to/media'}),
)

With python-django 1.7 I used
if settings.DEBUG:
urlpatterns = patterns('',
(r'^$', 'blenderx3d.first_step.views.index'),
(r'^media/(?P<path>.*)$','django.contrib.staticfiles.views.serve'),)