Django + Angular = A powerful web application

Adesh Gautam
Oct 17, 2018 · 6 min read

You know how to use Django to make web apps and also, you know how to build beautiful frontends using Angular but you were probably wondering how to integrate them with each other to build a single web app that has benefits of both?

This was the thing that was going in my head when I was learning Django and Angular 4. I wanted both of them in the same application so that I would be having the power of python and goodness of Angular and without learning node.js separately to make a full-fledged Web App. And, I think, you reading this story also have the same motive.

Let’s Start

A little background first.

  1. Lots of features — Many extras like user authentication, content administration, RSS feeds etc.
  2. Secure — A lot of security features to prevent attacks like SQL injection and cross-site scripting.
  3. Scalable — It can bear heavy traffic demand making it a good fit for busy websites.

Setting up Directories

  1. Create a directory for our application.
                     mkdir my-app && cd my-app
                   mkdir backend && mkdir frontend

Setting up Django

  1. First, download this repo as zip file and copy it to the backend directory. This zip file has the template which is ready for Heroku deployment. So, deploying on Heroku is hassle free now.
  2. Unzip and rename the folder to your choice of the app name.
  3. In the folder there is another folder, also change its name to your choice, let’s suppose it as “my-app”
  4. Rename all the instances of “my-app” (without quotes) with your app name in the following files:
Procfile
manage.py
wsgi.py
settings.py
                 python3 manage.py startapp new_app
models.py
serializers.py
settings.py
settings.py
home.html
urls.py
views.py
requirements.py

Setting up Angular 4

Now, let’s do the Angular part.

                         ng new my-app

Run the project

To run the Django server, just run

                    python manage.py runserver
ng build --prod --output-path /path-to your-project-directory/backend/my-app-name/my-app/static/ang --watch --output-hashing none
  1. Use DRF or tastypie or any other API framework of your choice.
  2. Remember to define your API in urls.py file.
  3. Create an Angular app.
  4. Handle the error pages like 404.
  5. Create HTTP requests to the API you created for getting and sending data.
  6. Done!

This story is published in The Startup, Medium’s largest entrepreneurship publication followed by + 379,306 people.

Subscribe to receive our top stories here.

The Startup

Medium's largest active publication, followed by +641K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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