Django Rest Framework with Angular Material Starter SPA

This is the basic setup for a Django project with a RESTful API, serving an Angular Material powered front-end.

some

Install Django with pip into virtual environment

Never run pip as root user. It should always install into a virtual environment as a regular user. Its a good idea to setup Virtualenvwrapper to collect all virtual environments in one place, e.g. ~/venvs/.

me@pc:~/dev$ mkvirtualenv --python=/usr/bin/python3 startenv
(startenv)me@pc:~/dev$ pip install django djangorestframework django-rosetta psycopg2 python-dateutil pytz

(startenv)me@pc:~/dev$ mkdir starter && cd $_
(startenv)me@pc:~/dev/starter$ django-admin startproject startproj && cd $_
(startenv)me@pc:~/dev/starter/startproj$ ./manage.py migrate
(startenv)me@pc:~/dev/starter/startproj$ ./manage.py createsuperuser
Username: 
Email address: 
Password: 
Password (again): 
(startenv)me@pc:~/dev/starter/startproj$ ./manage.py test
(startenv)me@pc:~/dev/starter/startproj$ cd ..

Install Angular Material with npm and nvm

Equally, never run npm as root. Node packages too, should be installed only as a regular user. Use nvm (node version manager) to install and run the required node version (which will usually be the latest) and globally install some packages that will be needed for testing.

(startenv)me@pc:~/dev/starter$ nvm install node
(startenv)me@pc:~/dev/starter$ nvm use node
(startenv)me@pc:~/dev/starter$ npm -g install angular-messages karma karma-cli karma-coverage karma-ng-html2js-preprocessor phantomjs jasmine jasmine-core

Then clone the starter setup from Angular Material that comes prepared with a basic app.

(startenv)me@pc:~/dev/starter$ git clone --depth=1 https://github.com/angular/material-start.git startapp
(startenv)me@pc:~/dev/starter$ cd startapp
(startenv)me@pc:~/dev/starter/startapp$ npm install
(startenv)me@pc:~/dev/starter/startapp$ npm run tests

At this point, all tests should succeed.

There are two ways to locally serve the front-end, either via Django's development server or the built-in NodeJS live-server.

(startenv)me@pc:~/dev/starter/startapp$ live-server

Using the live-server, however, will have the back-end and front-end run on different ports and cause CORS errors when accessing the API. To serve both back-end and front-end via Django, add the following to startproj/startproj/urls.py

from os.path import abspath, join
from django.conf import settings

if settings.DEBUG:
    from django.contrib.staticfiles.urls import staticfiles_urlpatterns
    from django.conf.urls.static import static

    app_path = abspath(join(settings.BASE_DIR, '../startapp'))

    urlpatterns += staticfiles_urlpatterns()
    urlpatterns += static('/', document_root=app_path)

That makes the front-end is accessible via http://localhost:8000/app/index.html when using Django's development server

(startenv)me@pc:~/dev/starter/startapp$ cd ../startproj
(startenv)me@pc:~/dev/starter/startproj$ ./manage.py runsevrer

In a production setting, the front-end files will be served directly via a web server.