23

I want to load my static css files (e.g., Bootstrap) from my node_modules directory, like so:

{% load staticfiles %}
<link rel="stylesheet" href="{% static 'bootstrap/dist/css/bootstrap.min.css' %}" />

When I put .../node_modules/ in my STATICFILES_DIRS setting, this works. However, it also adds an absolutely massive number of files to my /static/ folder - mostly devDependencies that I don't need access to on the frontend.

What is the best practice for including certain static assets via npm, but not including everything from node_modules in my /static/ folder?

Or, is it fine to include so many extraneous files and that's the best solution?

YPCrumble
  • 26,610
  • 23
  • 107
  • 172

4 Answers4

9

What I do is the following,

STATICFILES_DIRS = (
    os.path.join(DJANGO_PROJECT_DIR, 'static'),
    os.path.join(ROOT_DIR, 'node_modules', 'd3', 'build'),
    os.path.join(ROOT_DIR, 'node_modules', 'c3'),
)

This will place only the needed files in my static folder.

Jostcrow
  • 369
  • 5
  • 13
  • thanks - so you're able to add file paths here. I would have expected this to raise `OSError: [Errno 20] Not a directory` in the [storage's `listdir` method here](https://github.com/django/django/blob/967be82443b5640d61608a89897d8ce2bc44fa54/django/core/files/storage.py#L397). What is your `STATICFILES_STORAGE` setting? Also how do you add these in your template? – YPCrumble Dec 16 '16 at 18:14
  • Sorry I made a mistake indeed. I will improve the answer. I should not load the files – Jostcrow Dec 17 '16 at 18:29
  • I see - but then you need a separate line for each file in your template as well? – YPCrumble Dec 17 '16 at 19:03
  • For as far as I know. Yes – Jostcrow Dec 18 '16 at 20:26
7

To avoid importing many unused files in the static folder, I copy the items I need with a Gulp script. I use an NPM script to invoke Gulp after installing the packages, so it doesn't affect my daily workflow.

package.json:

{
  "dependencies": {
    "bootstrap": "^4.3.1",
    "gulp": "^4.0.2",
    "jquery": "^3.4.1"
  },
  "scripts": {
    "install": "gulp"
  }
}

gulpfile.js

const { series, src, dest } = require('gulp');

// Task 1: copy bootstap's assets to /_vendor/
function bootstrap() {
  const files = [
    'node_modules/bootstrap/dist/css/bootstrap.min.css',
    'node_modules/bootstrap/dist/js/bootstrap.min.js'
  ]
  return src(files).pipe(dest('_vendor'))
}

// Task 2: copy jquery's assets to /_vendor/
function jquery() {
  const files = [
    'node_modules/jquery/dist/jquery.min.js'
  ]
  return src(files).pipe(dest('_vendor'))
}

exports.default = series(bootstrap, jquery)

my_project/settings.py:

STATICFILES_DIRS = [
    str(BASE_DIR / '_vendor'),  # populated by gulp
]

Django template:

{% load staticfiles %}
<link rel="stylesheet" href="{% static 'bootstrap.min.css' %}" />

Bonus

In the Gulpfile, you can concatenate and minify files. As an example, here is my Gulpfile for Blueimp's file upload library:

const uglify = require('gulp-uglify');
const concat = require('gulp-concat');

// Task 3: minify blueimp's assets and save to /_vendor/
function blueimp() {
  const files = [
    'node_modules/blueimp-file-upload/js/vendor/jquery.ui.widget.js',
    'node_modules/blueimp-file-upload/js/jquery.iframe-transport.js',
    'node_modules/blueimp-file-upload/js/jquery.fileupload.js'
  ]
  return src(files).pipe(uglify())
                   .pipe(concat('jquery.fileupload.min.js'))
                   .pipe(dest('_vendor/'))
}
Benoit Blanchon
  • 13,364
  • 4
  • 73
  • 81
  • Thanks! Would you add your Django template? Do you invoke gulp on local and commit the resulting concatenated JS file or do you invoke gulp as part of the build process? – YPCrumble Aug 28 '19 at 14:28
  • @YPCrumble, I added the Django template. No, I don't commit the `_vendor` folder, because it's populated when the CI runs `npm install`. For the same reason, I don't commit `node_modules/` either. I only commit `package.json` and `gulpfile.js`. – Benoit Blanchon Aug 29 '19 at 08:39
3

I personally think it's fine to have these extraneous dev files living in node_modules (and duplicated into STATIC_ROOT). Your mileage may vary if your node_modules folder is gigantic, but doubling the size isn't usually a big deal for my use cases, and it's convenient to not have to list each module in STATICFILES_DIRS as I install them.

STATICFILES_DIRS = (
    ...
    os.path.join(BASE_DIR, 'node_modules'),
    ...
)

Then in your templates, do:

<script src='{% static 'bootstrap/dist/css/bootstrap.min.css' %}'></script>

If the folder ever did get out of hand size-wise, if you started encountering conflicts, or if there was a library you really didn't want to serve, Jostcrow's answer (or writing a custom staticfiles finder) could make sense.

Also, might be worth looking into trying to bundle everything together. If all of your stuff lives in bundled JS/CSS files, the whole issue is resolved by just webpack-ing those files into your app of choice.

Robert Townley
  • 3,414
  • 3
  • 28
  • 54
0

I changed the way I do that since my previous answer. Now, I use django-npm, a ridiculously simple package that allows cherry-picking the files you want to import from node_modules/. As a comparison, here is how I could achieve the same result as in my previous response:

package.json

{
  "dependencies": {
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1"
  }
}

my_project/settings.py

STATICFILES_FINDERS = (
  ...
  'npm.finders.NpmFinder',  # see django-npm's installation instructions
)

NPM_STATIC_FILES_PREFIX = 'node_modules'
NPM_FILE_PATTERNS = {
    'bootstrap': [
        'dist/js/bootstrap.bundle.min.*',
    ],
    'jquery': [
        'dist/jquery.min.*',
    ],
}

What about concatenation and minification?

I use django-compressor and django-sass-processor.

Benoit Blanchon
  • 13,364
  • 4
  • 73
  • 81