How to use bower package manager in Django App?

17
votes

I'm new to Django framework and i have read that that the 'static' files like css and js must be inside the 'static' directory, but my question is:

Given that bower package manager install its dependencies on a new directory called bower_components in the current directory, the bower.json must be created on the 'static' django directory? and if it is true, is not bower.json exported with the collectstatic command? (something might not wanted)

Which is the recommended way to work with bower and Django framework?

Update:

Thanks Yuji 'Tomita' Tomita, your answer can give more perspective. I want to use bower just to manage front end dependencies like jQuery, bootstrap and so on, as you see, by logic must be inside de static/ django directory, but do it that way, can cause to the bower.json be treated as a static resource, something might not wanted.

5
pythondjangobower

5 Answers

7
votes

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

Project structure:

|-root
  |-app
     |-assets
     |-static
     |-templates
     |settings.py
     |urls.py
     |views.py
     |wsgi.py
  |manage.py
  |bower.json
  |.bowerrc

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}),)
4
votes

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.

2
votes

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.

2
votes

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

2
votes

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.