[Fixed]-How to use bower package manager in Django App?


I followed this blog post to setup my django bower project:

Project structure:


My .bowerrc:

    "directory": "app/static/bower_components"

And I user bower components like this:

<script src="{{ STATIC_URL }}bower_components/angular/angular.js"></script>

My settings.py:

STATIC_URL = '/static/'
STATIC_ROOT = join(BASE_DIR, 'assets')
STATICFILES_DIRS = [join(BASE_DIR, 'static')]

Also urls.py:

urlpatterns += patterns('',
                        (r'^static/(?P<path>.*)$', 'django.views.static.serve',
                         {'document_root': settings.STATIC_ROOT}),)


There is no need for apps like django-bower, or other specialized tools that take up server resources, slow build time, and greatly limit the usefulness of bower. Especially, when you have nested django apps with their own bower dependancies.

You can check out my tutorial on how to seamlessly integrate Django + Bower + Heroku here. Although this tutorial targets heroku, the methodology applies to any deployment scenario.


There is no recommended way – it depends on your project. If you are using bower, node for more than the django project, it might make sense to place it in your project root (above django) so that it may be reused elsewhere.

If it’s purely for django’s static files, then it might make sense to place it in a src/ outside of the staticfiles system which builds to the static directory which is exported via collectstatic.


You should list the installed bower packages in the settings.py using key BOWER_INSTALLED_APPS.

Now, in your development server, using the {% static %} templatetag finds them from their installed directory. In production server, the collectstatic will collect the correct static files from the installed directory (bower_components).

See more: http://django-bower.readthedocs.org/en/latest/usage.html


If you’re afraid of the bower.json being included, the collectstatic command has an --ignore option that you can use to exclude whatever you want.


Leave a comment