Create a starter template for working with django-rest-framework

See the [source code here](

Django rest framework serializes data from structured databases (Postgres, Mysql, Sqlite) into JSON. Django provides the server and database management. [Django rest framework]( converts the structured data into javascript object notation, which gets sent to the browser. Modern frontend javascript frameworks like angular, backbone and react all like to eat JSON. This workflow gets a django project set up with the rest framework.

### Set up virtual environment

$ source ~/.bash_profile
$ lsvirtualenv
$ mkvirtualenv django-drf-starter-project # OR $ workon django-drf-starter-project

### Create django app

$ django-admin startproject django_drf_starter_project
$ cd django_drf_starter_project
$ pip install django djangorestframework
$ pip freeze > requirements.txt
$ ./ 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.

### Create a new app

$ ./ 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.

### Let django know about it

Modify `django_drf_starter_project/` 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 `./ migrate` after updating your installed apps. A `db.sqlite3` file will get generated automagically. Our database is now in sync.

![migrate it](

### Render templates to browser

Create a `` file inside of the jsframework app. I know this is a bit convoluted since we already have a file in the project directory. We create a 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.

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 `` 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.

### Template inheritance

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>

Add to index.html:
{% extends “jsframework/base.html” %}

{% block content %} What up world?
{% endblock %}

### Add static files

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 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>

See the [source code here](

Engineer, writer and community organizer. I built Employbl to help candidates get jobs in the Bay Area:

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store