Introduction

This is an article where the main focus is to set static files in order for the Django-based web application to be able to use it. There are several static files available. For an example a style sheet file which is defining the CSS for decorating the display element of the web page. Another example is the javascript file for enriching the functionality of the web page. And also images in the web page for further render process. Actually, this article exist in the form of two parts. Each of those parts available in this article is to discuss and to show how to set static files in Django-based web application. In detail, the first part is to be able to install and run the Django-based web application normally. The second part is about how to configure the Django-based web application in order to load the static files needed.

Installing and Running the Django-based Web Application

The first part of this article is about how to run the Django-based web application. The activity consists of several processes. Those processes are creating a new python virtual environment. Continue on the process, activate the new created python virtual environment. Furthermore, don’t forget to create a new project or even a new application using Django framework. Still, the important thing is to make sure that the Django-based web application exist and running. All of the above steps for achieving the purpose is in the following list. And those list exists in the necessary processes in the following sequence :

1. First of all, it is the initial step for creating a new python virtual environment. The following is the command example for creating a new python environment :

user@hostname:~/python/django$ virtualenv -p /usr/bin/python3.7 env

In the above command execution, the process for creating a new python virtual environment is using ‘python executable binary program’. It will generate a folder with the name of ‘env’. It contains all of the necessary things for running a new python virtual environment.

2. Activate the new created python virtual environment using the following command :

user@hostname:~/python/django$ source /home/user/python/django/env/bin/activate

3. Since the python virtual environment is active, just directly create a new Django project by executing the command below :

(env) user@hostname:~/python/django$ django-admin startproject todoproject
(env) user@hostname:~/python/django$ cd todoproject/
(env) user@hostname:~/python/django/todoproject$ ls -al
total 20
drwxr-xr-x 4 user user 4096 Mar 16 13:51 .
drwxrwxrwx 14 user user 4096 Mar 16 13:51 ..
-rwxrwxrwx 1 user user 631 Mar 16 13:51 manage.py
drwxr-xr-x 2 user user 4096 Mar 16 13:51 todoproject
(env) user@hostname:~/python/django/todoproject$

4. Continue on, following the above step, just execute the following command to create a new Django application :

(env) user@hostname:~/python/django/todoproject$ django-admin startapp todoapp
(env) user@hostname:~/python/django/todoproject$ ls -al
total 20
drwxr-xr-x  4 user user 4096 Mar 16 13:51 .
drwxrwxrwx 14 user user 4096 Mar 16 13:51 ..
-rwxrwxrwx  1 user user  631 Mar 16 13:51 manage.py
drwxr-xr-x  3 user user 4096 Mar 16 13:51 todoapp
drwxr-xr-x  2 user user 4096 Mar 16 13:51 todoproject
(env) user@hostname:~/python/django/todoproject$ 

Configuring Django-based Web Application to Load Static Files

Second part or section for showing to show how to load the static files. Run the internal webserver for executing the application normally. Therefore, after successfully complete all the steps in the previous part or section, do all of the steps in this part or section. Set the static files configuration in order for the Django-based web application to use those files exist in the following steps :

1. Edit the file with the name of ‘settings.py’ and add the following line configuration :

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATICFILES_DIRS = (os.path.join(BASE_DIR,"static"),)
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'static')

2. Make sure to put all the static files needed by application in the ‘static’ folder.

3. Test the application to check whether the static files is loaded or not.