Git Product home page Git Product logo

django-angular-boilerplate's Introduction

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

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

How to Use: http://ruddra.com/2017/11/20/boilerplate-django-with-angularjs-powered-by-webpack2-yarn-docker-drf/

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.