This sets up a bare bones project with django rest framework
$ source ~/.bash_profile
$ lsvirtualenv
$ mkvirtualenv django-drf-starter-project # OR $ workon django-drf-starter-project
$ django-admin startproject django_drf_starter_project
$ cd django_drf_starter_project
$ pip install django djangorestframework
$ pip freeze > requirements.txt
$ ./manage.py runserver
You should see "It worked!" at localhost:8000. (control + C stops server on mac). If you're using git also copy and paste in the .gitignore
file from here so you don't commit garbage to version control.
$ ./manage.py startapp jsframework
$ mkdir jsframework/templates
$ mkdir jsframework/templates/jsframework
$ touch jsframework/templates/jsframework/index.html jsframework/templates/jsframework/base.html
This creates a new app called jsframework within the django_drf_starter_project project. We also set up a templates folder where we will display our html templates. I made another folder called jsframework inside the templates directory. I know it looks a bit weird. We do this so we can namespace our templates later on when declaring routes. Django will automagically look in the templates
directory for every app when compiling templates.
Modify django_drf_starter_project/settings.py
to include the rest_framework app that we installed via pip and our jsframework app we created from the cli.
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'jsframework',
)
Also sync your database. Django will use sqlite as default. Run ./manage.py migrate
after updating your installed apps. A db.sqlite3
file will get generated automagically. Our database is now in sync.
Create a urls.py
file inside of the jsframework app. I know this is a bit convoluted since we already have a urls.py file in the project directory. We create a urls.py inside jsframework to hold all of the routes for the jsframework app. It's seperation of concerns.
Define our route:
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.index, name='index'),
]
Now we need to define the index
view. If you're coming from rails or anything, a view in django is more like a controller. Templates are more like views. If that confused you, ignore it.
jsframework/views.py
from django.shortcuts import render
def index(request):
return render(request, 'jsframework/index.html')
Put text into jsframework/templates/jsframework/index.html
so you have something to see. The file path is silly but hopefully you can see now why we namespace. Django automatically looks in templates directory for every app. If we had multiple apps the index.html path could get messy.
Now let the main project urls.py
now about the routes that we defined for our jsframework app. That is really simple. Add this line: url(r'^/?', include('jsframework.urls')),
. That imports the routes from one url file into the other.
You'll see text on the screen.
We want index.html to inherit from base.html. Add to base.html:
<!DOCTYPE html>
<html>
<head>
<title>Let's get djangtahstie</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
Add to index.html:
{% extends "jsframework/base.html" %}
{% block content %}
What up world?
{% endblock %}
Now we want to include our javascript and css files
Adding from cdn is really easy, it's the same as normal. If you want to include local static files things are a bit different. In settings.py there is a line STATIC_URL = '/static/'
that tells django to look in folders within apps called static for static files. Create that inside jsframework as well as directories for css, images and js.
$ mkdir jsframework/static
$ mkdir jsframework/static/js jsframework/static/css jsframework/static/img
$ touch $ mkdir jsframework/static/js/main.js jsframework/static/css/main.css
In base.html add {% load staticfiles %}
to line 1. Then reference script/link tags like so:
<link rel='stylesheet' href="{{STATIC_URL}}/css/main.css">
<script src="{{STATIC_URL}}/js/main.js"></script>