[Fixed]-Setting up Yeoman with Django

So that was a really stupid comment I made above. 🙂

Here’s a proper response! Yeoman is simply a scaffolding tool for us to quickly generate css, js and html files. I am using it in a completely decoupled way, cleanly separated from django.

Here’s the tree structure of the frontend site.

/Users/calvin/work/yeoman-test/
|~app/
| |~scripts/
| | |~controllers/
| | | `-main.js
| | |~vendor/
| | | |-angular.js
| | | |-angular.min.js
| | | |-es5-shim.min.js
| | | `-json3.min.js
| | `-app.js
| |~styles/
| | |-bootstrap.css
| | `-main.css
| |+views/
| |-.buildignore
| |-.htaccess
| |-404.html
| |-favicon.ico
| |-index.html
| `-robots.txt
|~test/
| |+spec/
| `+vendor/
|-.gitattributes
|-.npmignore
|-Gruntfile.js
|-package.json
`-testacular.conf.js

And here’s the tree structure for the django application acting as a pure json web-service. Using django-tastypie.

/Users/calvin/work/yeomandjango/
|~deploy/
| |-crontab
| |-gunicorn.conf.py
| |-live_settings.py*
| |-nginx.conf
| `-supervisor.conf
|~requirements/
| `-project.txt
|+static/
|-.gitignore
|-.hgignore
|-__init__.py
|-__init__.pyc
|-dev.db
|-fabfile.py
|-local_settings.py
|-local_settings.pyc
|-manage.py*
|-settings.py
|-settings.pyc
|-urls.py
`-urls.pyc

By running the django web service from domain and urls such as http://service.mysite.com/api/v1/ and having our frontend yeoman generated “static” site http://mysite.com calling these API urls as needed.

The yeoman generated AngularJS app simply POSTS/GETS/PUTS/DELETES the api resources/urls given by our django-tastypie APIs.

This is a loosely coupled configuration you can consider.

However, do note that this set-up is performing “cross-domain API requests”. This means that on our “server-side” django application, we will need to handle CORS.

Here’s an example middleware snippet that needs to be implemented at django server side for this to work.

import re

from django.utils.text import compress_string
from django.utils.cache import patch_vary_headers

from django import http

try:
    import settings 
    XS_SHARING_ALLOWED_ORIGINS = settings.XS_SHARING_ALLOWED_ORIGINS
    XS_SHARING_ALLOWED_METHODS = settings.XS_SHARING_ALLOWED_METHODS
except:
    XS_SHARING_ALLOWED_ORIGINS = '*'
    XS_SHARING_ALLOWED_METHODS = ['POST','GET','OPTIONS', 'PUT', 'DELETE']


class XsSharing(object):
    """
        This middleware allows cross-domain XHR using the html5 postMessage API.


        Access-Control-Allow-Origin: http://foo.example
        Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE
    """
    def process_request(self, request):

        if 'HTTP_ACCESS_CONTROL_REQUEST_METHOD' in request.META:
            response = http.HttpResponse()
            response['Access-Control-Allow-Origin']  = XS_SHARING_ALLOWED_ORIGINS 
            response['Access-Control-Allow-Methods'] = ",".join( XS_SHARING_ALLOWED_METHODS ) 

            return response

        return None

    def process_response(self, request, response):
        # Avoid unnecessary work
        if response.has_header('Access-Control-Allow-Origin'):
            return response

        response['Access-Control-Allow-Origin']  = XS_SHARING_ALLOWED_ORIGINS 
        response['Access-Control-Allow-Methods'] = ",".join( XS_SHARING_ALLOWED_METHODS )

        return response