Django-compress with your Django app tutorial
Django-compressor is a great app for minifying your Django css and js in production to optimize your app speed.
I am going to walk through the very basic configuration of a django app that is being hosted at Google App Engine with Django-compressor or any other hosting provider like Digital Ocean e.t.c
1.Install django compressor (do not forget to add django compressor to lib folder and requirements.txt)
```
pip install django_compressor
```
2.Add compressor to your installed apps in settings.py
```
INSTALLED_APPS = [
# other apps,
"compressor",
]
```
3.Add django compressor file finder to your STATICFILES_FINDERS in your settings.py
```
STATICFILES_FINDERS = ( ##django compressor
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
# other finders..
'compressor.finders.CompressorFinder',
)
```
4.Install cssmin and jsmin (do not forget to add them to lib folder and requirements.txt)
```
pip install cssmin
pip install jsmin
```
5.Add cssmin and jsmin to installed apps in your settings.py
```
INSTALLED_APPS = [
# other apps
"compressor",
"cssmin",
"jsmin",
]
```
6.Include the below code in your settings.py file to enable offline compression in production, If I find a better explanation on why I will update it.
Note: Disable this setting, the whole below setting, while in development while Debug = True.
```
COMPRESS_ENABLED = True
COMPRESS_ROOT = STATIC_ROOT ##django compressor
COMPRESS_OFFLINE = True
if not COMPRESS_ENABLED: ##django compressor
COMPRESS_ENABLED = True
COMPRESS_CSS_FILTERS = ["compressor.filters.cssmin.CSSMinFilter"]
COMPRESS_JS_FILTERS = ["compressor.filters.jsmin.JSMinFilter"] ##django compressor
```
7.Configure your templates accordingly for Django-compress, example my index.html file..,
```
{% load compress %} #we load compress
{% load static %}
{% compress css %}
<link rel="stylesheet" href="{% static 'bower_components/bootstrap/css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'css/animate.css' %}">
<link rel="stylesheet" href="{% static 'css/ca_style.css' %}
{% endcompress %}
Some stuff here
{% load static %}
{% compress js %}
<script src="{% static 'bower_components/jquery/dist/jquery.min.js' %}"></script>
<script src="{% static 'bower_components/angular/angular.min.js' %}"></script>
{% endcompress %}
```
8.To compress your css and js using Django-compress run
```
python manage.py collectstatic
python manage.py compress
```
before deploying your app to production.
9.In your app.yaml file, add
```
handlers:
- url: /static
static_dir: static/
application_readable: True #added for django-compressor ##add this
```
to enable css and js compression in production and avoid
Offline generation error
You have offfline compression enabled but key _ is missing from offline manifest
That’s it, any additions or pointers are welcomed. Pointers taken from the documentation https://django-compressor.readthedocs.io/en/latest/usage/.