Settings.py and paths for html and static files Django

Question

I am using Django 1.8 and I am having trouble displaying my JavaScript and CSS when I run the development Django server. I think the main problem is not having a good understanding of what to set my static root and static root dir as. I have noticed that my folder/file paths are created differently compared to others when I create a Django project and app. What would I make my STATIC_ROOT and STATICFILES_DIR be assigned to?

Settings.py:

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(_file_)))
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'Myapp'
)

ROOT_URLCONF = 'MyProject.urls'
TEMPLATES = [
{
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [os.path.join(BASE_DIR, 'templates' )],
    'APP_DIRS': True,
    'OPTIONS': {
        'context_processors': [
            'django.template.context_processors.debug',
            'django.template.context_processors.request',
            'django.contrib.auth.context_processors.auth',
            'django.contrib.messages.context_processors.messages',
        ],
    },
},
]

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

STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static")

urls.py:

from django.conf.urls import include, url
from django.contrib import admin
from Myapp.views import startpage 
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
# Examples:
# url(r'^$', 'MyProject.views.home', name='home'),
# url(r'^blog/', include('blog.urls')),

url(r'^admin/', include(admin.site.urls)),
url(r'^$', startpage)
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

views.py:

from django.shortcuts import render, render_to_response

# Create your views here.
def startpage(request):
return render_to_response('htmlpage.html');

Here is my current directories:

C:\Users\Me\DjangoProjects\
                           |-----MyProject\
                                         |------MyApp\
                                                       |----_init_.py
                                                       |----admin.py
                                                       |----models.py
                                                       |----tests.py
                                                       |----views.py
                                                       |----_pycache_\
                                                       |----migrations\
                                         |------MyProject\
                                                       |----_init_.py
                                                       |----settings.py
                                                       |----urls.py
                                                       |----wsgi.py
                                                       |----_pycache_\
                                         |------staticfiles\
                                         |------templates\
                                                       |----htmlpage.html
                                         |------db.sqlite3
                                         |------manage.py

I also don't know where I would put my JSON file, because I am using jquery/javascript to grab data from the JSON file. Also, my javascript code is embedded within my html file, is that okay or do I need to make a separate javascript file?

Any help would be much appreciated. Thank you.

MADE UPDATES.

Answer 1

Okay, answering your question in the reverse order of your questions.

Firstly, its always a better convention and practice to keep your html, javascript and css in separate files. So all your HTML files goes in the templates directory and the javascript and CSS in js and css directory inside static directory.

Now, I don't think you'll be requiring to access some json file everytime your web-app is loaded. If it is, then again its something wrong as for that purpose, you have your database. So move that data to your DB. Else if it is for one time purpose, say data upload, then you can keep it inside a directory say json inside the static directory.

Now lastly, coming to your main question of STATIC_ROOT vs STATIC_DIRS vs STATIC_URL, then there already is an excellent explanation of the same here-> Differences between STATICFILES_DIR, STATIC_ROOT and MEDIA_ROOT

plus you need to rename your 'staticfiles' directory to 'static' as in your settings.py you have mentioned the STATIC_URL = '/static/' and not /'staticfiles'/ or else you can change the STATIC_URL = /'staticfiles'/, but the former is a followed convention, so try stick to that.

Answer 2

This is the solution to your problem of reading data from a json file using your javascript in general i.e., it is not dependent on django or php or something like that.

function getAllSupportedItems( ) {
    return $.getJSON("staticfiles/json_folder/name_of_your_json_file.json").then(function (data) {
        return data.items;
    });
}

getAllSupportedItems().done(function (items) {
    // you have your items here
});

See this for a better explanation -> Using Jquery to get JSON objects from local file

One more thing, which you might get stuck if you overcome this problem.

In your settings.py you have mentioned your STATIC_URL = '/static/' whereas you've named that folder as 'staticfiles'. So either you rename your 'staticfiles' to 'static' or vice-versa. Though former is the convention, so rename it to 'static' else your settings.py will look for a folder named 'static' in the BASE Directory, but it will never find one as you have named it 'staticfiles'