Missing bootstrap resources in Django-Rest-Framework

Question

I\'m using the new django-rest-framework 2.0 and have been following the tutorial for creating a rest based API. The API is now complete, however I am having trouble getting

Answer 1

If you're using Heroku you'll want to make sure you are using the configurations in the getting started documentation (https://devcenter.heroku.com/articles/getting-started-with-django). See the section "settings.py" and "wsgi.py". I was having the same problem and this solved it.

settings.py

import os
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = 'staticfiles'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

wsgi.py

from django.core.wsgi import get_wsgi_application
from dj_static import Cling
application = Cling(get_wsgi_application())

Answer 2

First up, I'm assuming that you mean the bootstrap static resources aren't loading for the browsable API? (Although I guess it could be that you're trying to use them elsewhere in your project?)

If you're running with DEBUG=True they should be served automatically, but once you're running with DEBUG=False you need to make sure to run manage.py collectstatic and ensure your STATIC_ROOT and STATIC_URL settings are correct.

Django's static files documentation should help: https://docs.djangoproject.com/en/dev/howto/static-files/

If you're still not having any luck I'd suggest you double check your Django version (1.3 and upwards is supported), and REST framework version (Anything from version 2 onwards), and make sure you step through the tutorial step-by-step, taking care particularly with the project setup.

Answer 3

CSS is not found. The fix would be to make the missing css files (404 for files seen in the browser console) available. That's it.

You can make the css files accessible in backend(need some tweaks) or in front end(comparatively easy).

This solution works perfect if you have a seperate frontend & backend(restful) setup such as Django-Django rest framework and AngularJS..

Let us say if django backend is running at 8000, and front end is running at 9000.

• frontend.example.com loads front end JS app running at 9000

• backend.example.com loads django app running at 8000

in settings.py

import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))

STATIC_URL = 'http://frontend.example.com/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

then in terminal

$ python manage.py collectstatic

Then go to dir where you have the folder static

$ cp -rf static/* /frontend-code-directory/static/

DONE.

What I have done basically, is copying all css of django apps to the frontend. Frontend serves this easy as frontend is already a collection of static files.