Collecting static to develop frontend for Django 🦋

Developing frontend for Django can be quite a problem – you need to collect statics, then clear cache AFTER EVERY CHANGE. Let’s change the game!!! 🎮

At the request of my team’s Javascript developer!

Key features

Collecting static without typing ‘yes’

No need to type every time yes, just use --noinput:

collectstatic --noinput

Clear browser cache

Removing Files

Shortkey

With command Ctrl + Shift + Del, then check out whatever you want.

Manually

This version of clearing cache folder deletes files without asking:

find ~/.cache/chromium/Default/Cache/ -maxdepth 1 -type f -delete

JFYI a version where you need to confirm every delete:

find ~/.cache/chromium/Default/Cache/ -maxdepth 1 -type f -exec rm -iv {} \;

You can find cache folder for any browser you are using in the ~/.cache/ folder.

In Developer Mode

Open Developer mode with F12 and long press on reload icon – you will get options, among then Empty Cache and Hard Reload.

I prefer this way to be sure, because sometimes clearing cache files does not help at all… At overall messing with an apps’s system files is not a good idea.

Putting together a script

Let’s make a Python script first collecting_static.py:

File 1: collect_static.py

import subprocess
from pathlib import Path

home = str(Path.home())
collect_static_command = ['python', 'manage.py', 'makemigrations', '--noinput']
subprocess.run(collect_static_command)
clear_cache_command = ['find', '%s/.cache/chromium/Default/Cache/' % home, '-maxdepth', '1', '-type', 'f', '-delete']
subprocess.run([clear_cache_command])

Quickly breaking it down:

1. subprocess.run() runs a command in the form of an array of string

So if you want to add something like '-settings=path/to/settings_file.py' to the command, just add it to the array (I do that because, at the time of writing this little guide, this development/production files separation works on and off for me, so I use it and go on with my life. But I will come back to it soon and make a stable build, but not yet. I will update this line when I do).

2. You can’t really run '~/.cache', so we need to find a home directory with pathlib.Path.home().

After that there are two situation I will cover:

Situation 1: you have a virtual environment

I have been trying to make up a way to activate and deactivate the environment in the Python file… I got super confused and unsure, so there are only two ways presented here.

Way 1: just activate it manually

Activate if beforehand. So the resulting chain of commands will be (for virtualenv):

source /path/to/virtualenv
python collect_static.py
deactivate

Way 2: make a bash file

Or create a bash file and (de)activate environment there.

File 2: smart_collect

The content is pretty much initializing the file and doing same thing as in the path above:

#! /bin/bash
source /absolute_path/to/myvirtualenv/bin/activate
python relative_path/to/collect_static.py
deactivate

Don’t forget to make it executable:

chmod +x ./relative_path/to/smart_collect

And run the whole thing like that:

bash ./relpath/to/smart_collect

How to choose which virtualenv to use:

In order to make this reusable and choose which virtualenv to work with, make the path a bash veriable:

#! /bin/bash
source $1
python relative_path/to/collect_static.py
deactivate

And then pass the path to virtualenv with the command:

bash ./path/to/smart_collect /path/to/myvirtualenv/bin/activate

So in Pycharm, for example, I run this command in Terminal.

Situation 2: you DON’T have a virtual environment

I highly recommend using a virtual environment. But if you still don’t, then you don’t need a bash file, just run python script like this:

python relative_path/to/collect_static.py

Or remove 2nd and 4th lines and make smart_collect look like this:

#! /bin/bash
python relative_path/to/collect_static.py

And make it executable:

chmod +x ./relative_path/to/smart_collect

And run it:

bash ./relative_path/to/smart_collect

Conclusion

My friend will finally be content sitting at my laptop and rectifying his scripts on my machine lmao. And this issue too is to be revised in the future as well.

I thought about binding the bash or Python script to runserver, but not only I am totally exhausted by this topic at this point, it doesn’t sound like a good practice even to me. So that’s it.

I am very open to hearing from you anything you have to say! Especially I appreciate criticism.

3 thoughts on “Collecting static to develop frontend for Django 🦋

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.