Boilerplate: Django with AngularJs 1.X(Powered By Webpack2, Yarn, Docker, DRF, ES6)

Django with AngularJs is a popular combo. In this boilerplate, I tried to provide a foundation for using Django and AngularJs 1.X together. Here AngularJs Application has been built using ES6. Docker also comes with Postgres, NGINX etc.
Source Code is available here: https://github.com/ruddra/django-angular-boilerplate.

Tech Stack

  1. Python3
  2. Django 1.11.6, Django Rest Framework
  3. Webpack 2
  4. JavaScript(ES6)/AngularJS 1.x
  5. Yarn

Prerequisite

  1. Require Yarn. How to install Yarn: https://yarnpkg.com/lang/en/docs/install/
  2. Require Docker if you want to use this boilerplate with docker. How to install Docker: https://docs.docker.com/engine/installation/
    ** If you don't want docker, you can still use this boilerplate. Look here for details

Setup frontend

  1. Run make install-frontend to install frontend dependencies
  2. Run make build-frontend to build frontend.
  3. Run make watch to watch over the file changes

Setup Docker

  1. Run make docker-build to build up docker
  2. Run make docker-up to startup docker apps for the first time.
  3. To start again make docker-start, stop make docker-stop, restart make docker-restart
  4. For running the migrations: make docker-migrate. Run make docker-collectstatic for loading static files in Django application
    *How to use django with docker: ruddra.com/2016/08/14/docker-django-nginx-postgres/ *For more commands, go inside docker folder.

Setup Backend

If you are not using docker, then you can go to backend folder and do following steps:
1. Create Virtual Environment using: virtualenv -p python3 /path/to/venv
2. Activate it: source /path/to/venv bin activate(Its different in Windows, see virtual environment documentation)
3. Run pip install -r requirements.txt
4. Put your local settings in local_settings.py and place it in "backend/movie_app/" directory to override current settings. FYI You need to put your DB settings in local_settings.py
5. Now run ./manage.py migrate to migrate Database
6. Now run ./manage.py collectstatic to run Django's collectstatic
7. Run: ./manage.py runserver to run the Django application

Basic Usage

For demo purpose, a Django application has been created inside backend folder. If you run the project through docker, it will be available in URI localhost:8000. So you can do:

  1. Create superuser and access the admin site. In there you can create movies instances. (See available commands section for directly using docker command to create Django user)
  2. Or use API localhost:8000/api/movies to create Movies.
  3. Access localhost:8000 to see the angular app running.

How to use Backend

  1. Using backend is pretty straightforward. You can put your Django application inside backend folder. Check current demo implementation.
  2. In the current implementation, base app's view serves dist/index.html through template view. This view is connected to path /. This is the main entry point for the angular app because angular app resides in index.html.
  3. index.html is auto-generated. It is generated through webpack. So when you build your frontend app, webpack compress/minifies the files and generate dist folder inside /backend/static folder.
  4. The ./static directory is added in TEMPLATE_DIR.

How to use Frontend

a. Yarn commands are available inside frontend folder.

b. You can run yarn build to build frontend app.

c. If you want to add a new package, you can add it by yarn add <new_package>.

d. You need to import that package in /frontend/src/index.js like this:

    //Attach like the following line at the bottom of index.js
    import '../node_modules/<package>/dist/<package>.min.js';

It has some default packages preloaded like: Jquery, bootstrap, angularjs, angular resource etc.

e. Angular App itself resides in /frontend/src/webapp/client directory.

f. Static files resides in /frontend/src/webapp/assets directory.

g. index.hbs is served as the template for generating the AngularJs app.

h. JS files inside clients directory are automatically transpiled using babel(thanks to webpack).

i. When you run build command or watch command, webpack automatically compresses JS files from client directory, generates index.html from index.hbs and attach the path of compressed JS file to that index.html.

j. Then webpack put that JS file and index.html file inside ./backend/static/dist directory.

k. Static files inside assets folder are also sent to ./backend/static/dist directory.

Available Make Commands

Run them using make <command>.

In Root Directory:

build-frontend:

Build Frontend using Yarn/Webpack

install-frontend:

Install Dependencies using Yarn

watch-frontend:

Watch over JS files, if anything changes, it will auto build Frontend.

docker-build:

Build Docker from custom Dockerfile

docker-up:

Make containers UP and run them for the first time

docker-start:

Start Containers

docker-stop:

Stop Containers

docker-collectstatic:

Run Django Collect Static

docker-restart:

Make restart of Docker

docker-migrate:

Run Django Migration Command

In Docker Directory

build:

Build Docker from custom Dockerfile

up:

Make containers UP and run them for the first time

start:

Start Containers

stop:

Stop Containers

shell-nginx:

Access NGINX Container Shell

shell-web:

Access Web Container Shell

shell-db:

Access DB Container Shell

log-nginx:

Access NGINX Container Log

log-web:

Access Django Container Log

log-db:

Access DB Container Log

collectstatic:

Run Django Collectstatic

restart:

Restart Containers

migrate:

Run Django Migrations

django-shell:

Access Django Shell

django-superuser:

Create Django Super User.

Local Settings Sample

Let's say you want to use SQLite instead of PSQL. You can try like this:

# Will reside in ./backend/movie_app/
import os  
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))  
DATABASES = {  
     'default': {
         'ENGINE': 'django.db.backends.sqlite3',
         'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
     }
}

Screenshots

Front page at: http://localhost:8000/#!/

Rest API at: http://localhost:8000/api/movies/

Admin Site: at: http://localhost:8000/admin/movies/movie/

To Do

  1. Compress Sass/Css files using Webpack
  2. Unify Docker and Yarn Commands

Feel free to create issues in github or comment here.

Cheers!!

comments powered by Disqus