Difference Between Static Static_Url and Static_Root on Django

What's the difference between STATIC_URL and STATIC_ROOT in Django?

Like you mentioned, it is pretty clear from the documentation:

STATIC_ROOT:
The absolute path to the directory where collectstatic will collect static files for deployment.
STATIC_URL
default: None
URL to use when referring to static files located in STATIC_ROOT.
Example: "/static/" or "http://static.example.com/"

While, the STATIC_ROOT is just the path to the directory where static files have been collected, STATIC_URL is the URL which will serve those static files.

And, as you can see in the example, you can define STATIC_URL as a subdomain "http://static.example.com/" and when you use it in the template:

<link rel="stylesheet" href="{{ STATIC_URL }}css/base.css" type="text/css" />

It will be treated as:

<link rel="stylesheet" href="http://static.example.com/css/base.css" type="text/css" />

But, if the STATIC_URL was just /static/ then the above link would point to:

<link rel="stylesheet" href="/static/css/base.css" type="text/css" />

And, since this href starts with / it will append your domain to access the static files: http://yourdomain/static/css/base/css

Why is the default value of STATIC_URL simply /static/ ? Does STATIC_URL have to be able to reference STATIC_ROOT?

Default value of STATIC_URL is not /static/ but None as you can see in the documentation. And, it doesn't have to reference to STATIC_ROOT because it is not dependent on it (as shown in the example above).

The real difference between MEDIA_ROOT (media files) and STATIC_ROOT (static files) in python django and how to use them correctly

Understanding the real difference between MEDIA_ROOT and STATIC_ROOT can be confusing sometimes as both of them are related to serving files.

To be clear about their differences, I could point out their uses and types of files they serve.

STATIC_ROOT, STATIC_URL and STATICFILES_DIRS are all used to serve the static files required for the website or application. Whereas, MEDIA_URL and MEDIA_ROOT are used to serve the media files uploaded by a user.

As you can see that the main difference lies between media and static files. So, let's differentiate them.

Static files are files like CSS, JS, JQuery, scss, and other images(PNG, JPG, SVG, etc. )etc. which are used in development, creation and rendering of your website or application. Whereas, media files are those files that are uploaded by the user while using the website.

So, if there is a JavaScript file named main.js which is used to give some functionalities like show popup on button click then it is a STATIC file. Similarly, images like website logo, or some static images displayed in the website that the user can't change by any action are also STATIC files.

Hence, files(as mentioned above) that are used during the development and rendering of the website are known as STATIC files and are served by STATIC_ROOT, STATIC_URL or STATICFILES_DIRS(during deployment) in Django.

Now for the MEDIA files: any file that the user uploads, for example; a video, or image or excel file, etc. during the normal usage of the website or application are called MEDIA files in Django.

MEDIA_ROOT and MEDIA_URL are used to point out the location of MEDIA files stored in your application.

Hope this makes you clear.

Static Root and Static Url confusion in Django

From the django docs,

STATIC_ROOT is the absolute path to the directory where collectstatic will collect static files for deployment.

STATIC_URL is the URL to use when referring to static files located in STATIC_ROOT.

So, when you request some specific static resource, it is searched in STATIC_ROOT + STATIC_URL and then served.

Now in your problem, you do

STATIC_ROOT = os.path.join(BASE_DIR, 'play/static_root')
STATIC_URL = '/static/'

which means django would have effectively been searching in BASE_DIR/play/static_root/static/ which would be incorrect, so looking at other paths you can figure out that you need to do

STATIC_ROOT = os.path.join(BASE_DIR, 'play/')

Differences between STATICFILES_DIR, STATIC_ROOT and MEDIA_ROOT

You can find these settings in the Django documentation. Here are my own definitions and quotations from the documentation:

MEDIA_ROOT is the folder where files uploaded using FileField will go.

Absolute filesystem path to the directory that will hold user-uploaded files.
STATIC_ROOT is the folder where static files will be stored after using manage.py collectstatic

The absolute path to the directory where collectstatic will collect static files for deployment.

If the staticfiles contrib app is enabled (default) the collectstatic management command will collect static files into this directory. See the howto on managing static files for more details about usage.
STATICFILES_DIRS is the list of folders where Django will search for additional static files aside from the static folder of each app installed.

This setting defines the additional locations the staticfiles app will traverse if the FileSystemFinder finder is enabled, e.g. if you use the collectstatic or findstatic management command or use the static file serving view.

In your settings, you should have:

MEDIA_ROOT = os.path.join(BASE_DIR, "media/")
STATIC_ROOT = os.path.join(BASE_DIR, "static/")

# Make a tuple of strings instead of a string
STATICFILES_DIRS = ("/home/user/project/django1/top/listing/static", )

...where:

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

as defined in the default Django settings.py now.

Django - What is different {% static %} and /static/?

The problem with hardcoded URLs <img src="/static/img/person.png" /> is that if in future you want to change static URL you have to go through all files to replace it with newer one, and usually in production sometimes we want to use CDN to serve static content and that is not served via /static/.

For the other difference between {% static %} and {{ STATIC_URL }} check this answer.

What is the difference between static files and media files in Django?

Static files are meant for javascript/images etc, but media files are for user-uploaded content.

What is the need of providing STATIC_ROOT?

STATIC_ROOT is only needed in production, since the Django development server runserver takes care of serving static files directly from your static directories.

STATIC_ROOT is the absolute path to the directory where python manage.py collectstatic will collect static files for deployment.

Example: STATIC_ROOT="/var/www/example.com/static/"

Now the command python manage.py collectstatic will copy all the static files(ie in static folder in your apps, static files in all paths) to the directory /var/www/example.com/static/. now you only need to serve this directory on apache or nginx..etc.

Note: You often see examples where STATIC_ROOT is set to os.path.join(BASE_DIR, 'static'). This is a bad practice as it creates the static folder inside your source code repository. Always set it to a path outside of your project folder, e.g. /var/www/example.com/static/ when your project is in /var/www/example.com/src/.

I don't really understand how STATICFILES_DIRS and STATIC_ROOT Django settings works

choose them seperately

STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),) #no slash

STATICFILES_ROOT = os.path.join(BASE_DIR, "static_cdn")

https://stackoverflow.com/a/8690002/1388866 Read this.