Django Static File

Static Files such as Images, CSS or JS files are often loaded via a different app in production websites to avoid loading multiple stuff from the same server. This article revolves arouund, how you can setup static app in Django and server Static Files from the same.

How to Create Static App in Django?

 let’s create a new project first for that let’s create a virtual environment first. Download the package if you haven’t downloaded it

pip install virtualenv
virtualenv Lazyroar
Lazyroar\Scripts\Activate

This is how it will look

now install Django

pip install django

now we will create our django project with the name “checkstatic”

//django-admin startproject projectname (template code)
django-admin startproject  checkstatic

now enter your project

for windows “cd  checkstatic”

now we will create a new app name “showstatic” for the project

//python3 manage.py startapp appname (template code)
python3 manage.py startapp showstatic

now we will walk in the IDE, I am using Visual studio code if you are using same the type (code .) in cmd

the first thing we would do is in setting.py add your app in line 32 add like this (you will see this from the apps.py file of the app)

INSTALLED_APPS = [
'showstatic.apps.ShowstaticConfig',
'django.contrib.admin',
'django.contrib.auth,
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]

now try to runserver once to confirm everything is working smoothly

python3 manage.py runserver

if you see this page the congrats you taken your first step successfully

Now we create a static folder inside the main folder (checkstatic) where we will keep our static files. One can add your files (pdf, images, text files, or anything you want)  in the static folder.

Folder structure – 

now you need to make Django know that you have created a static folder so now add this line in settings.py file,

in line 121 below STATIC_URL = ‘/static/’

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

Now tell django to look where for the static files you have added write this above STATIC_URL = ‘/static/’

STATICFILES_DIRS = [
   os.path.join(BASE_DIR, 'checkstatic/static/')
]

Now we will write a command that will bring/collect all the static files from our project and bring it to one single folder

python manage.py collectstatic

this is how it will look if everything was fine, most of the files are from admin we don’t need to worry about it,

in your project folder, you will see a new folder added named “static” and your file is inside it!!

How to Load and use Static Files in Django ?

Now to check just create the “templates” folder in showstatic and create a file name home.html to view our static files

{% load static %}
<img src = "{% static 'logo.png' %}" height="200" width="200" class="d-inline-block align-top">
<br>
<h1>Hi its working</h1>

now to view this page we need to give a route for it so now just add this in url.py of checkstatic

from django.contrib import admin
from django.urls import path
from showstatic import views
urlpatterns = [
   path('admin/', admin.site.urls),
   path('',views.home,name='home'),
]

 and in views.py of showstatic add this 

def home(request):
   return render(request,'home.html')

 now run the server and see

python3 manage.py runserver

Bingo its working!!