Boilerplate For Angular 1.X and Django
Apr 29, 2018 · 2 Min Read · 1 Like · 2 Comments![Boilerplate For Angular 1.X and Django](/content/images/2020/04/angular_hu12ea26e9e775fef891d6b33234cbd5d8_2061254_220x0_resize_q75_lanczos.jpg 220w,/content/images/2020/04/angular_hu12ea26e9e775fef891d6b33234cbd5d8_2061254_440x0_resize_q75_lanczos.jpg 440w,/content/images/2020/04/angular_hu12ea26e9e775fef891d6b33234cbd5d8_2061254_500x0_resize_q75_lanczos.jpg 500w,/content/images/2020/04/angular_hu12ea26e9e775fef891d6b33234cbd5d8_2061254_600x0_resize_q75_lanczos.jpg 600w,/content/images/2020/04/angular_hu12ea26e9e775fef891d6b33234cbd5d8_2061254_640x0_resize_q75_lanczos.jpg 640w,,/content/images/2020/04/angular_hu12ea26e9e775fef891d6b33234cbd5d8_2061254_720x0_resize_q75_lanczos.jpg 720w,,/content/images/2020/04/angular_hu12ea26e9e775fef891d6b33234cbd5d8_2061254_1024x0_resize_q75_lanczos.jpg 640w)
Photo by Blake Connally on Unsplash
This post is deprecated. Use it at your own risk
Simple and clean boilerplate for using django and angular 1.x together, with basic structure comes built-in.
Tech Stack
- Python3
- Django 1.11.6, Django Rest Framework
- Webpack 2
- JavaScript(ES6)/AngularJS 1.x
- Yarn
Prerequisite
- Require Yarn. How to install Yarn: https://yarnpkg.com/lang/en/docs/install/
- 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
- Run
make install-frontend
to install frontend dependencies - Run
make build-frontend
to build frontend. - Run
make watch
to watch over the file changes
Setup docker
- Run
make docker-build
to build up docker - Run
make docker-up
to startup docker apps for first time. - To start again
make docker-start
, stopmake docker-stop
, restartmake docker-restart
- 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:
- Create Virtual Environment using:
virtualenv -p python3 /path/to/venv
- Activate it:
source /path/to/venv bin activate
(Its different in Windows, see virtual environment documentation) - Run
pip install -r requirements.txt
- 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 inlocal_settings.py
- Now run
./manage.py migrate
to migrate Database - Now run
./manage.py collectstatic
to run collectstatic - Run:
./manage.py runserver
to run the django application
Usage
- Create super user and access the adminsite. In there you can create movies instances.
- Or use API
host:port/api/movies
to create Movies - 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/#!/
Rest API at: http://localhost:8000/api/movies/
Admin Site at: http://localhost:8000/admin/movies/movie/
Last updated: Dec 29, 2024
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! 😃
On mac/linux, you don’t need to install anything. I am not sure about windows. Sorry!!