{"id":31856674,"url":"https://github.com/eadwincode/django-compressor-parceljs","last_synced_at":"2025-10-12T14:22:34.557Z","repository":{"id":37045879,"uuid":"220056131","full_name":"eadwinCode/django-compressor-parceljs","owner":"eadwinCode","description":"Simply enables VueJs, ReactJs, SCSS, LESS, Typescript etc on your Django project","archived":false,"fork":false,"pushed_at":"2023-02-02T06:55:56.000Z","size":152,"stargazers_count":27,"open_issues_count":3,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-24T23:46:11.166Z","etag":null,"topics":["django","django-compressor","django-parceljs","django-react","django-vue","minify-css","minify-javascript","parceljs"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eadwinCode.png","metadata":{"files":{"readme":"README.rst","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS","dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-06T17:47:16.000Z","updated_at":"2024-12-06T18:32:06.000Z","dependencies_parsed_at":"2024-11-16T14:36:14.081Z","dependency_job_id":"8a9a1ffa-3d5d-4e46-a52c-772c7a568162","html_url":"https://github.com/eadwinCode/django-compressor-parceljs","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/eadwinCode/django-compressor-parceljs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eadwinCode%2Fdjango-compressor-parceljs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eadwinCode%2Fdjango-compressor-parceljs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eadwinCode%2Fdjango-compressor-parceljs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eadwinCode%2Fdjango-compressor-parceljs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eadwinCode","download_url":"https://codeload.github.com/eadwinCode/django-compressor-parceljs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eadwinCode%2Fdjango-compressor-parceljs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279011595,"owners_count":26084964,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-12T02:00:06.719Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["django","django-compressor","django-parceljs","django-react","django-vue","minify-css","minify-javascript","parceljs"],"created_at":"2025-10-12T14:22:33.684Z","updated_at":"2025-10-12T14:22:34.550Z","avatar_url":"https://github.com/eadwinCode.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":".. image:: https://static.pepy.tech/personalized-badge/django-compressor-parceljs?period=total\u0026units=international_system\u0026left_color=black\u0026right_color=green\u0026left_text=Downloads\n :target: https://pepy.tech/project/django-compressor-parceljs\n\nDjango Compressor Parceljs\n=====================================\ndjango-compressor-parceljs is base on Django-Compressor_. It provides additional support to bundles and minifies your typescript, vue, react, scss etc, in a Django template into cacheable static files using parceljs_.\n\nFor more information on how django-compressor-parceljs really works visit Django-Compressor_\n\n\nQuickstart\n----------\nInstall django-compress::\n\n    pip install django-compressor-parceljs\n \nInstall parcel-bundler::\n\n    npm install -g parcel\n\nAdd it to your `INSTALLED_APPS`:\n\n.. code-block:: python\n\n    INSTALLED_APPS = (\n        ...\n        'compressor',\n        ...\n    )\n    \n    STATICFILES_FINDERS = (\n        'django.contrib.staticfiles.finders.FileSystemFinder',\n        'django.contrib.staticfiles.finders.AppDirectoriesFinder',\n        # other finders..\n        'compressor.finders.CompressorFinder',\n    )\n\nOther Configurations\n--------------------\n\nTo minify your code for production, you need to set COMPRESS_ENABLED and COMPRESS_OFFLINE to true in settings.py.\n\nFrom django-compressor settings, the value of COMPRESS_ENABLED = !DEBUG, in settings.py.\n\n.. code-block:: python\n\n    COMPRESS_ENABLED = True\n    COMPRESS_OFFLINE = True\n    STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')\n\nThen run,\n\n.. code-block:: python\n\n    python manage.py compress --setting path-to-your-production-settings\n\nFor more information on django-compressor-settings_\n\nUsage\n-----\nIn your template, load compress ``{% load compress %}``\nthen use ``{% compress parcel %} \u003cscript\u003e {% endcompress %}`` to load a script. for example:\n\n.. code-block:: html\n\n    {% load static %} \n    {% load compress %}\n    \u003c!DOCTYPE html\u003e\n    \u003chtml lang=\"en\"\u003e\n      \u003chead\u003e\n        \u003cmeta charset=\"UTF-8\" /\u003e\n        \u003ctitle\u003eVue Django Testing\u003c/title\u003e\n      \u003c/head\u003e\n      \u003cbody\u003e\n        ....\n       {% compress parcel file myts %}\n        \u003cscript src=\"{% static 'js/index.ts' %}\"\u003e\u003c/script\u003e\n       {% endcompress %}\n      \u003c/body\u003e\n      ...\n\n\nPrivate directories\n-------------------\nYou can use other directories in your project which are not marked as static files with django-compressor-parceljs. \n\nThis feature was added to avoid exposing your real code structure, like your front-end components source, to the real world via static urls.\n\nDjango-compressor-parceljs provides another tag ``{% private_static %}`` which works like the normal django static tag ``{% static %}`` to enable you work with a seperate directory registered in ``COMPRESS_PRIVATE_DIRS`` in settings.py. And they won't be accessed via any url.\n\nPrivate directory setup ::\n\n    settings.py\n\n.. code-block:: python\n\n    COMPRESS_PRIVATE_DIRS = [\n      os.path.join(BASE_DIR, 'my_dir'),\n      ....\n    ]\n\n::\n\n    some_file.html\n\n.. code-block:: html\n\n    {% load static %} \n    {% load compress %}\n    {% load private_static %}\n    \u003c!DOCTYPE html\u003e\n    \u003chtml lang=\"en\"\u003e\n      \u003chead\u003e\n        \u003cmeta charset=\"UTF-8\" /\u003e\n        \u003ctitle\u003eVue Django Testing\u003c/title\u003e\n      \u003c/head\u003e\n      \u003cbody\u003e\n        ....\n       {% compress parcel file myts %}\n        \u003cscript src=\"{% private_static 'js/index.js' %}\"\u003e\u003c/script\u003e\n       {% endcompress %}\n      \u003c/body\u003e\n      ...\n\nVue example\n-----------\nCreate a vue project in your django project root.\nSee the demo project django_vue_ or with react_\n::\n\n    npm init --yes\n    npm install -D vue-template-compiler @vue/component-compiler-utils\n    npm install vue\n    \nIn your django project app create ::\n\n    static/components/test.vue\n    static/js/index.js\n    \nIn static/components/test.vue,\n\n.. code-block:: vue\n\n    \u003ctemplate\u003e\n      \u003cdiv\u003e\n        \u003ch1\u003e{{ message }}\u003c/h1\u003e\n      \u003c/div\u003e\n    \u003c/template\u003e\n\n    \u003cscript\u003e\n        export default {\n          name: \"app\",\n          components: {},\n          data: {\n            message: \"Hello Vue\",\n          },\n          computed: {}\n        };\n        \u003c/script\u003e\n\n    \u003cstyle lang=\"scss\"\u003e\n    \u003c/style\u003e\nIn static/js/index.js,\n\n.. code-block:: javascript\n\n    import Vue from \"vue\";\n    import test  from \"../components/test.vue\";\n    new Vue(test).$mount(\"#components-demo\");\n\nIn your django template,\n\n.. code-block:: html\n    \n    {% load static %} \n    {% load compress %}\n    \u003c!DOCTYPE html\u003e\n    \u003chtml lang=\"en\"\u003e\n      \u003chead\u003e\n        \u003cmeta charset=\"UTF-8\" /\u003e\n        \u003ctitle\u003eVue Django Testing\u003c/title\u003e\n      \u003c/head\u003e\n      \u003cbody\u003e\n        ....\n       \u003cdiv id=\"components-demo\"\u003e\u003c/div\u003e\n       {% compress parcel file myjs %}\n         \u003cscript src=\"{% static 'js/index.js' %}\"\u003e\u003c/script\u003e\n       {% endcompress %}\n      \u003c/body\u003e\n      ...\n\nRun ``runserver`` ::\n\n    python manage.py runserver\n\nYou have successfully bundled your vue app into your django template.  \n\nUsing Parceljs to bundle SASS, SCSS, LESS\n-----------------------------------------\nIntegrating compilers into django-compressor is quiet very easy. All you need is to provide a COMPRESS_PRECOMPILERS option in django ``settings.py``. For more information visit django-compressor precompilers_\n\n.. code-block:: python\n\n    COMPRESS_PRECOMPILERS = (\n        ('text/coffeescript', 'coffee --compile --stdio'),\n        ('text/less', 'lessc {infile} {outfile}'),\n        ('text/x-sass', 'sass {infile} {outfile}'),\n        ('text/x-scss', 'sass --scss {infile} {outfile}'),\n        ('text/stylus', 'stylus \u003c {infile} \u003e {outfile}'),\n        ('text/foobar', 'path.to.MyPrecompilerFilter'),\n    )\n    \nUse ``compressor.filters.parceljs.ParserFilterCSS`` on scss, sass or less in COMPRESS_PRECOMPILERS options as filter. For example: \n\n.. code-block:: python\n\n    COMPRESS_PRECOMPILERS = (\n        # ('text/coffeescript', 'coffee --compile --stdio'),\n        ('text/less', 'compressor.filters.parceljs.ParserFilterCSS'),\n        # ('text/x-sass', 'sass {infile} {outfile}'),\n        ('text/x-scss', 'compressor.filters.parceljs.ParserFilterCSS'),\n        # ('text/stylus', 'stylus \u003c {infile} \u003e {outfile}'),\n        # ('text/foobar', 'path.to.MyPrecompilerFilter'),\n    )\n\nIn your template, \n\n.. code-block:: html\n\n    {% load static %} \n    {% load compress %}\n    \u003c!DOCTYPE html\u003e\n    \u003chtml lang=\"en\"\u003e\n      \u003chead\u003e\n        \u003cmeta charset=\"UTF-8\" /\u003e\n        \u003ctitle\u003eVue Django Testing\u003c/title\u003e\n        {% compress css file style %}\n            \u003clink rel=\"stylesheet\" type=\"text/x-scss\"  href=\"{% static 'css/style.scss'%}\"\u003e\n        {% endcompress %}\n      \u003c/head\u003e\n      \u003cbody\u003e\n      .......\n\nAdd the ``type=\"text/x-scss\"`` for django-compressor to use the precompiler options to compile the asset.\n\nThere is alittle drawback with parceljs css url resolver. There is no configuration for parceljs to ignore resolving css url since django will always resolve static urls automatically. Read more this issue_\n\nA solution is to use ``///..`` on the url path followed by ``/static/(path_to_file)``\n\n.. code-block:: scss\n\n    body{\n        background-color: lightblue;\n        background-image: url(///../static/img/ssd/avatar1.png);\n\n        button{\n            font-size: .8rem;\n        }\n    }\n\nUsing typescript directly in django template\n--------------------------------------------\nAdd lang attribute to the script tag ``\u003cscript lang=\"ts\"\u003e\u003c/script\u003e`` ::\n\n    npm init --yes\n    npm install -D @babel/core, @babel/preset-env, typescript\n\n.. code-block:: ts\n\n    {% load static %} \n    {% load compress %}\n    \u003c!DOCTYPE html\u003e\n    \u003chtml lang=\"en\"\u003e\n      \u003chead\u003e\n        \u003cmeta charset=\"UTF-8\" /\u003e\n        \u003ctitle\u003eVue Django Testing\u003c/title\u003e\n      \u003c/head\u003e\n      \u003cbody\u003e\n        ....\n       {% compress parcel file myts %}\n         \u003cscript lang=\"ts\"\u003e\n            interface IUser {\n                name: string,\n                age: number\n            }\n\n            class User implements IUser{\n                constructor(user:IUser){\n                    this.name = user.name\n                    this.age = user.age\n                }\n                name: string    \n                age: number\n\n                get_name = () =\u003e {\n                    return this.name\n                };\n            }\n\n            const Peter = new User({name:'Peter', age:32})\n            console.log(Peter)\n         \u003c/script\u003e\n       {% endcompress %}\n      \u003c/body\u003e\n      ...\n\n.. _Django-Compressor: https://github.com/django-compressor/django-compressor\n.. _parceljs: https://parceljs.org\n.. _django-compressor-settings: https://django-compressor.readthedocs.io/en/latest/settings/\n.. _precompilers: https://django-compressor.readthedocs.io/en/latest/settings/#django.conf.settings.COMPRESS_PRECOMPILERS\n.. _issue: https://github.com/parcel-bundler/parcel/issues/1186/\n.. _django_vue: https://github.com/eadwinCode/django_vue\n.. _react: https://github.com/eadwinCode/django_react\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feadwincode%2Fdjango-compressor-parceljs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feadwincode%2Fdjango-compressor-parceljs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feadwincode%2Fdjango-compressor-parceljs/lists"}