Hacks by Ruddra

Boilerplate For Angular 1.X and Django(Powered by Webpack2, Docker, Yarn, DRF)

This post is deprecated. Use it at your own risk

Simple and clean boilerplate for using django and angular 1.x togather, with basic structure comes built-in.

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 boiler plate 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 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 *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 collectstatic
  7. Run: ./manage.py runserver to run the django application

Usage

  1. Create super user and access the adminsite. In there you can create movies instances.
  2. Or use API host:port/api/movies to create Movies
  3. Access host:port to see the movies.

Local Settings Sample

Lets say you want to use sqllite 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/#!/

Front Page

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

DRF API

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

ADMIN SITE

Share Your Thoughts
M ↓   Markdown
Rajs
Saturday, Mar 10, 2018

Hi, Thank you for this blog post. Could you please confirm is this method possible on FREE Plan of open shift? I get a error message saying build strategy Docker is not allowed.

Ruddra
Sunday, Mar 11, 2018

Well, I also faced the same issue. Its related role management of Openshift Online. Maybe you can look into this: https://bugzilla.redhat.com/show_bug.cgi?id=1336345

Rayner D
Monday, Apr 16, 2018

Thank you for the blog post actually ran into the allowed_hosts error and luckily you covered it in your post!

Bigi
Tuesday, May 1, 2018

343598345966414753434729374377 slink.co/c607f

Harley3986
Saturday, Sep 1, 2018

https://uploads.disquscdn.c... Saw a Mexican lady driving around with a “Jesus” bumper sticker. Can’t tell if she loves Jesus or is really supportive of her husband.

Diego Tobarra
Tuesday, Oct 9, 2018

I can’t use the make command. Do I need to intall a particular package/software to use it? Thanks for the tutorial and the boilerplate! :D

Ruddra
Friday, Oct 12, 2018

On mac/linux, you don’t need to install anything. I am not sure about windows. Sorry!!