Many Django applications require some JavaScript packages, which usually are not available on
PyPI and thus can't be installed through pip. A common
solution to this problem is, to copy these JavaScript packages into the Django application.
This however is a bad solution, since then these packages have to be revisioned twice. By
adding the file(s) bower.json and/or package.json to each Django application, this
problem can be solved in a portable and elegant manner.
With django-nodebow manage your JavaScript dependencies from all of your Django projects centrally for the required bower components and/or node packages, simply through:
./manage.py bower install
# and/or
./manage.py npm install
The nice feature of django-nodebow is, that each Django application can specify which external packages it requires itself, without adding these to its own Git repository.
Install NodeJS.
Into your global NodeJS packages folder, install bower:
sudo npm install -g bower inquirer
Into your Python virtualenv:
pip install django-nodebow
pip install PyExecJS
In settings.py:
INSTALLED_APPS = (
...
'nodebow',
...
)
STATICFILES_FINDERS = (
...
'nodebow.finders.BowerComponentsFinder',
...
)
By default, the folders bower_components and/or node_packages are placed into the
STATIC_ROOT of your Django project. Therefore make sure, this directory is available, even
during development.
NPM searches for its global node modules in a folder, which can be set using the environment
variable NODE_PATH. This can be overridden by a settings variable with the same name. If both
are unset, this location is determined by executing npm root -g in the shell.
To install all the bower components which are required for your Django project, simply invoke:
./manage.py bower install
This will iterate over all applications defined in your INSTALLED_APPS settings, and look for a
file named bower.json. If such a file was found, the list of dependencies is resolved and
the corresponding packages are installed into the folder bower_components of the local Django
project.
Say, one of the processed bower.json files contains an entry
...
"dependencies": {
...
"jquery": "~2.0.3",
...
}
then, when accessing the main file, use
{% load static %}
...
<script src="{% static 'jquery/jquery.js' %}" type="text/javascript"></script>
...
in any of your Django templates.
As of version 0.0.1 ./manage npm install, currently does not work.
In your HTML code, you normally refer to static files, such as
<script src="{% static 'angular/angular.min.js' %}" type="text/javascript"></script>
this will load the minimized version of a file, which is appropriate in most circumstances. In
DEBUG mode, one might prefer the unminimized version. Instead of changing the template code,
add this to your settings.py:
NODEBOW_SERVE_UNMINIMIZED = DEBUG
Then all files referred as some-path.min.css or some-path.min.js will be served as their
unminimized version if this exists in the same folder as the referred one.
npm is most commonly used for managing Node.js modules, which run exclusively on the server-side.
Bower is created solely for the front-end and is optimized with that in mind. The biggest difference is that npm does nested dependency tree (size heavy) while Bower requires a flat dependency tree. This puts the burden of dependency resolution on the user.
A nested dependency tree means that your dependencies can have its own dependencies which can have their own, and so on. This is really great on the server where you don't have to care much about space and latency. It lets you not have to care about dependency conflicts as all your dependencies use e.g. their own version of Underscore. This obviously doesn't work that well on the front-end. Imagine a site having to download three copies of jQuery.
The reason many projects use both is that they use Bower for front-end packages and npm for developer tools like SASS, LESS, Grunt, Gulp, JSHint, CoffeeScript, etc.