Include CSS and Javascript in my django template [duplicate]

First, create staticfiles folder. Inside that folder create css, js, and img folder.

settings.py

import osPROJECT_DIR = os.path.dirname(__file__)DATABASES = {    'default': {         'ENGINE': 'django.db.backends.sqlite3',          'NAME': os.path.join(PROJECT_DIR, 'myweblabdev.sqlite'),                                 'USER': '',         'PASSWORD': '',         'HOST': '',                               'PORT': '',                         }}MEDIA_ROOT = os.path.join(PROJECT_DIR, 'media')MEDIA_URL = '/media/'STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')STATIC_URL = '/static/'STATICFILES_DIRS = (    os.path.join(PROJECT_DIR, 'staticfiles'),)

main urls.py

from django.conf.urls import patterns, include, urlfrom django.conf.urls.static import staticfrom django.contrib import adminfrom django.contrib.staticfiles.urls import staticfiles_urlpatternsfrom myweblab import settingsadmin.autodiscover()urlpatterns = patterns('',    .......) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)urlpatterns += staticfiles_urlpatterns()

template

{% load static %}<link rel="stylesheet" href="{% static 'css/style.css' %}">

Refer django docs on static files.

In settings.py:

import osCURRENT_PATH = os.path.abspath(os.path.dirname(__file__).decode('utf-8'))MEDIA_ROOT = os.path.join(CURRENT_PATH, 'media')MEDIA_URL = '/media/'STATIC_ROOT = 'static/'STATIC_URL = '/static/'STATICFILES_DIRS = (                    os.path.join(CURRENT_PATH, 'static'),)

Then place your js and css files static folder in your project. Not in media folder.

In views.py:

from django.shortcuts import render_to_response, RequestContextdef view_name(request):    #your stuff goes here    return render_to_response('template.html', locals(), context_instance = RequestContext(request))

In template.html:

<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/style.css" /><script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.8.3.min.js"></script>

In urls.py:

from django.conf import settingsurlpatterns += patterns('',    url(r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT, 'show_indexes': True}),)

Project file structure can be found here in imgbin.

Read this https://docs.djangoproject.com/en/dev/howto/static-files/:

For local development, if you are using runserver or adding staticfiles_urlpatterns to your URLconf, you’re done with the setup – your static files will automatically be served at the default (for newly created projects) STATIC_URL of /static/.

And try:

~/tmp$ django-admin.py startproject myprj~/tmp$ cd myprj/~/tmp/myprj$ chmod a+x manage.py~/tmp/myprj$ ./manage.py startapp myapp

Then add 'myapp' to INSTALLED_APPS (myprj/settings.py).

~/tmp/myprj$ cd myapp/~/tmp/myprj/myapp$ mkdir static~/tmp/myprj/myapp$ echo 'alert("hello!");' > static/hello.js~/tmp/myprj/myapp$ mkdir templates~/tmp/myprj/myapp$ echo '<script src="{{ STATIC_URL }}hello.js"></script>' > templates/hello.html

Edit myprj/urls.py:

from django.conf.urls import patterns, include, urlfrom django.views.generic import TemplateViewclass HelloView(TemplateView):    template_name = "hello.html"urlpatterns = patterns('',    url(r'^$', HelloView.as_view(), name='hello'),)

And run it:

~/tmp/myprj/myapp$ cd ..~/tmp/myprj$ ./manage.py runserver

It works!