Static File Error in New Version of Django

In this blog we will look that how can you resolve the Static File Error in New Version of Django or specifically django 3.1 and new version.

If you are using any earlier version of django such as 3.0 and 2.0 , then I prefer that this blog is not for you. But yaah if you want to have better understanding with django static file then you should pursue it further.

Brief Introduction to Static Files :- 

Static files like CSS, JavaScript, Images and fonts are a core piece of any modern web application. Django provides flexibility around how these files are used, however this often leads to confusion for newcomers. 

A single Django project often contains multiple apps. By default, Django will look within each app for a static directory containing static files. So if one of your apps was called shop and you wanted to add a CSS file to it called style.css you need to first create a new directory called shop/static/shop and then add the file within it so the location would be shop/static/shop/style.css.

Error Solving Process :- 

So now here you have a static folder in your application where your all static files are located but you yet not tell about  it to President of the home, I mean to settings.py. 

So let's open settings.py file located in your project directory and let's have a look on it that what changes are their in django 3.1 or above version.

• At the top of settings.py file you will see the some import statement and BASE_DIR path which are quit different from older version of django.

  from pathlib import Path
  # Build paths inside the project like this: BASE_DIR / 'subdir'.
  BASE_DIR = Path(__file__).resolve().parent.parent

So here if you will print  BASE_DIR , it will represent the location of the folder inside which your django application and django project is located.

Example: -

BASE_DIR  

• django project ,
• django application
• manage.py

Now let's come to the bottom of settings.py file. Here you have to make important changes as per the above import pathlib in django.

So update your settings.py file as below to resolve the static file error in new version of django :- 

STATIC_ROOT = str(BASE_DIR.joinpath('staticfiles')) 

Note :- If you are using older version of django then you will have to use  STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

Then run the command python manage.py collectstatic.

You will see that a new folder staticfiles is created in your  directory which is having the static files of all the apps  which you are using in your projects included admin static files also.

Example: - 

Above mentioned

First line that is STATIC_ROOT is the folder where all static file will be collect or store after running  collectstatic command.

Now you have to add another line below  STATIC_ROOT that is :- 

STATICFILES_DIR =[str(BASE_DIR.joinpath('static'))]

Note:- Don't add this line before running the python manage.py collectstatic command , otherwise you will have a error that static folder location is not found.

Second line that is STATICFILES_DIR tells the settings.py file that where to look for static files.

That's it your error regarding static file error in new version of django will be resolve by following these steps,

Note:- Each time when you will make some changes in your static folder located in your app folder shop/static/shop/style.css. You will again have to run python manage.py collectstatic command to configure it.

Static file in django template:- 

Now you can use your static file in your HTML pages as below,

<link rel="stylesheet" href="{% static 'shop/style.css' %}">
    
<script src="{% static 'shop/index.js' %}"></script>

Now you will see that you all static file are working fine with your project.

At the last I have a bonus point for you :- 

It is always a good practice to  add these lines in your url.py file related to static files.

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Here you are configuring the urls of static location which you have just create in settings.py file.

So that is up here your static file error in new version of django it solved and static files configuration is now absolutely fine and working well.

Thanku for reading this blog,

Happy Learning