Building a Web App with Angular, Django and Django REST

18 months ago i posted the following post about integrating Angular and Django. Meanwhile, we have new releases and some updates.

Angular 7 is one of the best javascript frameworks. With typescript as a regular programming language , its separation of data and views,  CSS and HTML, its finally feels like real programming on client side.

You can build the server side using many technologies: nodejs if you want to javascript also on the server, ASP.NET if you want microsoft on your back and many more

I prefer python. Its easy, dynamic , has tons of packages available and integrates with all kind of data – local, cloud, small and big

Python offers many frameworks to build a web application – I prefer Django

In this post, I will build a simple web application using:

I also use jetbrains tools : Webstorm for client side and pycharm for the server side, Using these tools, you can open an Angular cli project and django project and skip the basic setup steps

The server – Django and Django REST 

I will go over the steps and also post the result:

  • create an empty folder
  • create and activate a virtual environmemt:

  • install Django

  • create the app

  • Add migration so you can change your database schema easily:

  • Run the server to see the first app:

You can now open your web browser and go to http://localhost:8000 to see its working.

  • Install the following packages using pip


Client Side – Angular 7

  • Install node.js – LTS 
  • Install Angular cli

  • Create a new Angular project

  • Test it using local server:

  • Build the project

This will create dist folder with everything you need for deploying the client side

Integrating with Django project:

  • Copy the js files (including the map files) to the static folder on your Django project (data/static)
  • Copy index.html generated by angular project to the templates folder – override the existing one (data/templates)
  • Change the index.html file as follow:


Update the file

On the django project we need to make some settings to enable the static folder and the REST framework

Add the rest framework to the installed apps:


Update the middleware:

Set the static folder – add the following at the bottom of the settings file:


Add some views and REST API – Server

  • Add new entry to at the main project folder (datatest):

  • Add file to the App folder (data). Set a router for customers REST API, add 2 simple views and one api entry

  • Create a templates folder on the module folder(first) and add your html files (index.html, links.html)
  • On the file add the following class:


Django REST Framework

To use Django REST framework we add a simple function to multiply the given argument by 100. Add the following code to the file:

Now , the server side is ready, you can run the server and test the different views. You can’t test the REST API using the browser because it doesn’t support GET method (only POST)


Angular Client Code

To test the server functionality , we will build a simple view

To use http requests from angular, we need to add the HttpClient service class (instead of http module that is deprecated)

app.module.ts file

Now we can add some code to use the server views and API


The first function create a get request and the second creates a post request. This is a simple example to build only the skeleton 


Now its all set. to test the code run build and copy the js files to the static folder:

Each time you change the client code, you need to repeat the build and copy process

To Download the complete code for both Angular and Django see this github repo


Want more?




Tagged , ,

13 thoughts on “Building a Web App with Angular, Django and Django REST

  1. Hi and thank you for this introduction to Angular, Django and Django REST. I’m a noob on Django/Django REST and convention escapes me (like folder structure). Could you post your final folder structure here so I can compare my interpretation of the instructions?

    1. NVM. I found it on your GitHub:


    2. nvm, I found it on your GitHub! Thanks again.

  2. Nice but incomplete.
    It is not working “out of the box”

    1. Hi SHLOMO, were you able to create/find a build that was working “out of the box”?
      If so, please share! Or explain how to get it to a working state 🙂

  3. awesome…

  4. Autolike, auto liker, auto like, Photo Liker, Autoliker, Auto Like, Auto Liker, Increase Likes, Status Liker, ZFN Liker, Working Auto Liker, Autoliker, autolike, Photo Auto Liker, autoliker, Status Auto Liker, Autolike International

  5. This article is very helpful! Thank you soooooooo much!!!!

  6. Hi,
    I have created a small django-angular application with separate django server and angular server frontend.
    Now i have to build and deploy my application onto the server. I am going to follow devarea link to build and then deploy the application. Pls help me if i face some problems.

  7. Hi, I have created a website using Angular, and I am trying to integrate Django into this Angular project.

    In your example, you mentioned copying *.js and * from dist/djint folder, but in my project, there is no such folder. Inside dist folder, only server folder exists. So, even if I followed your example, I get 404 response because there is no main.js / runtime.js / etc. in static folder. So, where can I find those *.js and * files? What do I have to do to get all those files?

Leave a Reply

Your email address will not be published.