Django REST framework (DRF) with Angular 4|5 Tutorial (Part 1)
This is the first part of a tutorial series about getting started with Django framework and Angular 4|5.
The final objective is to create a restful web application which has two separate parts. The first part is the back end which is created with Django and the Django REST framework, the second part is the front end which is built using Angular 2+ framework.
We are going to use Django 1.11, Django REST framework 3.6.2 and Angular 2+.
Before starting, this tutorial has a bunch of development requirements:
- You need to have Python installed and configured
- PIP and Virtualenv installed
- Node.js and Angular 2 CLI installed
Objectives of the part 1
In the first part of these tutorial series, we are going to cover basic introductions to the two server side used frameworks Django and DRF, and their initial setup.
- Getting started with Django and DRF.
- The custom project anatomy and structure (front end and back end)
Getting started with Django and DRF
Django is a web framework based on Python which allows developers to quickly prototype and build web applications. It has a powerful ORM that abstracts how you can interact with popular SQL based database systems such as MySQL and PostgreSQL. Django has also a powerful template engine with powerful concepts such as tags and inheritance etc. Developers can also use built in and community provided packages to quickly solve common web development problems without reinventing the wheel.
Django was created many years ago to build traditional web sites or applications but since then, the web has evolved with other types of modern apps such as Rest based applications. These apps expose a set of Restful APIs that provide a standard way to interact or consume resources across different clients such as browsers and mobile phones etc. Thanks to Django and Django Rest Framework (DRF) you can build Restful APIs with a great ease using the great features provided with Django and DRF such as, the great ORM, the browsable APIs, serialization, auth and permissions classes etc.
Installing Django and Setting up a new project
You can install Django and then generate a new project in a matter of a few commands so open your command line.
Start by creating a new virtual environment with:
virtualenv myenv source myenv/bin/activate
Then use PIP to install Django and DRF with:
pip install django pip install djangorestframework
Now we can generate a new Django project using:
django-admin startproject angular2drf
Django provides us with a simple directory or project structure
angular2drf/ ├── angular2drf │ ├── __init__.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py └── manage.py
Which is quite good for most cases but not for us since we have two tiers, the server and the client, so we need to customize it to meet our requirements.
So create two folders inside the project directory, for client and server
mkdir client mkdir server
Then move all files to server, you should get a structure similar to:
angular2drf/ ├── client └── server ├── angular2drf │ ├── __init__.py │ ├── settings.py │ └── wsgi.py ├── __init__.py ├── manage.py └── urls.py
Also add an
__init__.py file inside the server folder to make it a Python module.
You can also change angular2drf name to something more meaningfull like config but you need to make some changes:
First rename angular2drf to config.
Then open server/manage.py then change the 6th line to
Next open server/config/settings.py and change
ROOT_URLCONF = 'angular2drf.urls' to ROOT_URLCONF = 'config.urls' WSGI_APPLICATION = 'angular2drf.wsgi.application' to WSGI_APPLICATION = 'config.wsgi.application'
Next open server/config/wsgi.py and change
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "angular2drf.settings") to os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.settings")
If there is no error, you should be able to migrate your db and run the server without any problems
python server/manage.py migrate python server/manage.py runserver Performing system checks... System check identified no issues (0 silenced). May 05, 2017 - 23:25:52 Django version 1.11, using settings 'config.settings' Starting development server at http://127.0.0.1:8000/ Quit the server with CONTROL-C.
So that is all for this part, in the next part we are going to continue with our tutorial. Basically we are going to see how to create database models, configure DRF and create our Restful APIs.
RELATED TUTORIALSDjango 2 Ajax CRUD with Python 3.7 and jQuery
Django 2 CRUD Tutorial: Generic Class-Based Views
Angular 6|7 Tutorial — CRUD & Python REST API
Django Authentication — Login, Logout and Password Change/Reset
Python Django JWT — djangorestframework-jwt Example
Django Form Example—Bootstrap 4 UI via django-crispy-forms
Django TemplateView GET|POST Example — URLs, as_view and get_context_data