# Django Static Files

When we develop a web application we also need a way to use and serve static contents like (JS,CSS, and images ...)

In Django, any assets which are required for project development can be called static files. Some examples are:

1. JS files
    
2. CSS files
    
3. Logo and banners which i need to show on webpage
    

> These `static` files are put in place by developers rather than the user, User uploaded files like (profile picture, CV) are called `media` files in Django which we will talk in next tutorial

#### Configure static files settings

* Make sure `django.contrib.staticfiles` is included on `INSTALLED_APPS`
    
* In your `settings.py` file, add `STATIC_URL` (e.g.: STATIC\_URL = '/static/')
    
* Store your static files in folder called `static` inside your django app
    

Apart from storing static files inside django app's `static` folder, we can also provide Django with list of other directories as well. To do that, we need to configure `STATICFILES_DIRS` on our `settings.py` file

```plaintext
# settings.py
STATICFILES_DIRS = [
    BASE_DIR/"static", 
    "/data/django-project/static-images/",
    "/var/www/static-django/"
]```

### Linking static files on HTML Templates 

Let's assume, `logo.jpg` exists in our app `static` folder (any app)
Now, your HTML templates would look like,
```

{% load static %}

<img src="{% static 'logo.jpg' %}">
```

> If you run this template through Django (creating views and URLs) and inspect the HTML source of your page, you will see `<img src="{% static 'logo.jpg' %}"` replaced by `<img src="/static/logo.jpg">`. the `/static/` part that got appended in the URL is from the `STATIC_URL` settings we kept on our Django settings `(settings.py)`

### Serving static files

We just linked our static file on the Templates, but we also need a way to serve those static files, e.g: when browsers requests to `/static/logo.jpg` then our Django server must send the logo.jpg as response.

* If we use `django.contrib.staticfiles` as explained above, `python manage.py runserver` command will automatically serve static files when `DEBUG` is set to True `[ DEBUG=True on settings.py ]`
    

So this means, we do not need to create a new URL or view to serve these static files, because Django does this for us

> This way is not suitable for production, and on production environment we don't user `runserver` instead we use some `wsgi` or `asgi` servers with some webservers like `nginx`. We we see more about it on Django deployments series.

#### Static files Deployment (for production deployment only)

On production environment, since as discussed earlier we don't use Django built in static file serving mechanism, so we need a way to gather and collect all static files from all the static folders into one single folder, so that we can deploy this folder or serve content from this folder.

`django.contrib.staticfiles` provides a command for gathering static files from different applications of the project in a single directory so you can serve them easily. Steps:

1. Set `STATIC_ROOT` on settings.py `(e.g: STATIC_ROOT='/home/static/')`
    
2. Run `collectstatic` command `(python manage.py collectstatic)`