Django Static Files

Introduction to Django Static Files

Websites frequently require serving additional files such as pictures, CSS, or JavaScript. These files are referred to as "static files" in Django. Django includes the django.contrib.staticfiles module to assist you in managing them.

How to Create a Static App in Django?

Let's create a Django static app to better understand how Django static file works. To create a Django App, install and activate the virtual environment to download the necessary packages.

Installing Virtual Environment

Creating Virtual Environment

Activating Virtual Environment

Once the virtual environment is created now, we will install Django in our virtual environment.

After installing Django, we can create our Django project.

Once we create the project, we will create an app inside the Django project.

We can check our app by following command

Now our default app is running fine. Let's try to show an image on a page by making the following changes.

• Add the app to setting.py of the project.

• Add STATICFILES_DIRS and STATIC_ROOT in setting.py file

• Now create the Templates folder inside firstapp directory. Inside the folder, create a file name index.html and paste the following code.

The Directory will be look like

• Open the view.py file of firstapp and paste the following code.

• Now for connecting the views, add the following code in the urls.py file of testproject.

Now our app is ready run the following command to see the output.

Configuring Django Static Files

For configuring Django static files, we mainly have to follow four steps.

1. Ensure that django.contrib.staticfiles is included in your INSTALLED_APPS of your setting.py file of the project.
2. Define the STATIC_URL in the setting.py file of the project.

3. Make sure that you use the static template tag In your templates.

4. Keep all your Django static files in a folder within your app named static.

How to Load and Use Static Files in Django?

Local Development

When we are at local development environment, the Django web server automatically serves static files, and you don't need to change many settings inside your Django project. A Django project can sometimes has more than one app, and by default, Django will look within every app for a static directory with static files. For example, there is an app inside your Django project named firstapp. Then to add a CSS file then, you have to create a new directory called firstapp/static and then put the file in firstapp/static/style.css. Django projects may involve multiple apps and static files that are shared among other apps; it is common for larger projects to create instead a base-level folder, usually called static.  In the settings.py file, add STATIC_URL which specifies the location of static files in our project.

Loading Django Static Files into Templates

There are mainly two steps involved in loading static files into a template:

• {% load static %}  should be included in the template's top.
• {% static % } template tag should be used with the appropriate link.

{% load static %} should be used at the top of all the static files so we can use this tag on our base file, which is inherited in all the templates, so we don't have to add this line in all the files.

Collectstatic

When we are at production environment serving static files needs a few extra steps, and this is where most Django beginners get confused. The goal of local development is to keep things simple and easy, but it is far from fast. In a production environment, it is best practice to put all of the Django project's static files in one place and serve only one location.

Django has a pre-installed management tool collectstatic to collect all static files in one place. We have the command to collect all the static files in one place. But Before running the command, we require three additional configurations in our project, setting.py, so that it can function correctly.

• Setting STATICFILES_DIRS in setting.py file STATICFILES_DIRS tells Django collectstatic engine to find static files in the Django project.

• Setting STATIC_ROOT directory in setting.py file STATIC_ROOT is the directory location of Django static files when collectstatic is executed. Generally, the name of the directory is kept staticfiles

• Setting STATICFILES_STORAGE in setting.py file STATICFILES_STORAGE is the file storage engine used by the collectstatic command to collect static files.

Finally, settng.py file will contain the following code.

Now we have done all the setups for Django collect static command. We can run the command.

Production

We have configured our Django project to collect static files properly. Now we will use another app WhiteNoise to serve the static files compiled via collectstatic command. This method is primarily used in the production environment. WhiteNoise app is used in order to fast loading of the application. In order to use WhiteNoise first, we have to install this by the following command.

After Installing the WhiteNoise we have to make the following configuration in setting.py file of the project.

• Add whitenoise above the built-in staticfiles app in the INSTALLED APPS list.

• Under MIDDLEWARE, add a new WhiteNoiseMiddleware.

• Change STATICFILES_STORAGE to use WhiteNoise.

Finally, setting.py file will contain the following code.

CDNs

Content Delivery Networks (CDNs) help sites that get a lot of traffic and need to run well. Instead of serving static files from your Django server, you put them on a dedicated CDN network and then call them. It does help store content at the edge of the network, which speeds up websites.CDN network static files can be smoothly loaded via WhiteNoise.