Is there a way to prevent django-pipeline from creating new jsx files every time it compiles react.js code?

Issue

I currently have the PyReact JSX compiler installed using django-pipeline.

Whenever I run collectstatic on my files, rather than overwriting a prior version of my react .jsx and compiled .js files, it creates a new version in the same folder. Is there a way to stop this and have the program simply overwrite the prior version? Or, is the best practice for using django-pipeline to use it only once?

My settings.py:

PIPELINE_COMPILERS = (
  'react.utils.pipeline.JSXCompiler',
  'pipeline.compilers.less.LessCompiler',
)

PIPELINE_JS = {
    'bootstrap': {
        'source_filenames': (
          'twitter_bootstrap/js/transition.js',
          'twitter_bootstrap/js/modal.js',
          'twitter_bootstrap/js/dropdown.js',
          'twitter_bootstrap/js/scrollspy.js',
          'twitter_bootstrap/js/tab.js',
          'twitter_bootstrap/js/tooltip.js',
          'twitter_bootstrap/js/popover.js',
          'twitter_bootstrap/js/alert.js',
          'twitter_bootstrap/js/button.js',
          'twitter_bootstrap/js/collapse.js',
          'twitter_bootstrap/js/carousel.js',
          'twitter_bootstrap/js/affix.js',
        ),
        'output_filename': 'js/b.js',
    },
    'clubs': {
        'source_filenames': (
          'js/clubs.jsx',
        ),
        'output_filename': 'js/clubs.js',
    },
    'react': {
        'source_filenames': (
            'react/js/react.min.js',),
        'output_filename': 'js/r.js',
    },
    'jquery': {
        'source_filenames': (
            'js/jquery.js',
        ),
        'output_filename': 'js/jq.js',
    },
}

STATIC_ROOT = BASE_DIR + '/static/'

STATIC_URL = '/static/'

STATICFILES_STORAGE = 'pipeline.storage.PipelineCachedStorage'

Solution

If I understand your question correctly, your concern is that after running collectstatic, you have files like foo.2d32ed.js, foo.4bhf45.js, foo.09d9fg.js in your STATIC_ROOT directory.

If so, then this isn’t an issue with PyReact or even with django-pipeline; this is occurring because you’re using a cached storage backend (i.e. your STATICFILES_STORAGE setting). The string appended to your filename is a hash of the file’s contents, which effectively acts like versioning of your static files.

The reason for this is cache-busting on browsers. With filenames as functions of the file’s contents, a browser can cache the file forever, which will speed up page load times for your users on subsequent visits.

If you want to disable this behavior, you can use a non-caching storage backend like PipelineStorage instead.

Here’s some documentation that may help:

• https://django-pipeline.readthedocs.org/en/latest/storages.html
• https://docs.djangoproject.com/en/dev/ref/contrib/staticfiles/#storages

Answered By – Kunal Mehta

Answer Checked By – Jay B. (AngularFixing Admin)