Home

Overview

Guide to create a Django and Angular Project

This repo's folder structure has a backend and frontend at the same level.
|-project
  |-backend
    |- Django project
  |-frontend
    |- Angular project

But this wiki is a guide to create Django project as the main folder, and Angular as a subfolder in a frontend folder.
|- Django project
   |- manage.py
   |- frontend
      |-Angular project
   |- api

Creating the Django Project

Prerequisites:

    pyenv 
    pyenv-virtualenv
    python 3.6.8
    node.js
    angular

Create Virtual Env and Activate

Step 1: Create Virtual Env

    pyenv virtualenv 3.6.8 <project name>

    this will create your env as (ie: project name=djangular_invoice_messages):
    3.6.8/envs/djangular_invoice_messages

Step 2: Open a new file, type content and save as .python-version

    3.6.8/envs/djangular_invoice_messages

Step 3: To activate the virtualenv

    - close your terminal, and open a new one
    - cd to where your .python-version was saved    

Step 4: Proceed to 'Check if django is in VirtualeEnv' step

Activating Virtual Env (optional)

    pyenv activate <project name>

    same as:
    source /Users/yourhome/.pyenv/versions/3.6.8/envs/<project name>/bin/activate

Making your virtualenv local (optional)

    pyenv local

    (this will create a .python-version with your virtualenv version/name)

Check if django is in VirtualeEnv

    python -m django -V

    (if result is: no command found install django)

Install Django (you should be in your VirtualeEnv)

    pip install Django

Start a Project

    django-admin startproject <project name>

    (this will create your <project name> folders and your files in it)

Create your .python-version file

In the django project:

cd <project name>
vi .python-version
    type 3.6.8/envs/djangular_invoice_messages and save

Test run

    cd <project name>
    python manage.py runserver
    http://127.0.0.1:8000/

Create an App

    cd <project name>
    python manage.py startapp <app name>

Create a dummy view

    Update overflow.views:

        from django.http import HttpResponse

        def overflow(request):
            return HttpResponse("Overflow views.")

    Update/Create overflow.urls:

        from django.urls import path

        from . import views

        urlpatterns = [
            path('', views.overflow, name='overflow'),

    Add your app in the INSTALLED_APPS in settings.py
        ....
        'overflow',

    Test run
        http://127.0.0.1:8000/overflow/

Accessing Django Admin screen

Migrate to create all the default tables

 manage.py migrate

Create Super User

 manage.py createsuperuser

Launch admin

 http://127.0.0.1:8000/admin

Create the Angular Frontend in the Django Project

You should be inside <project name>, at the same level of manage.py
if not:
    cd <project name>

Create frontend folder

    mkdir frontend

Create an Angular Project named

    cd frontend
    ng new <project name>

    Answer Yes to Angular Routing, and choose scss

Create proxy to consume overflow in port 8000

    Create a proxy.conf.json file in the main folder water-overflow

    {
        "/messages":{
            "target" : "http://localhost:8000",
            "secure" : false
        },
    }

Test run

    cd water-overflow
    ng serve

    http://localhost:4200/

Make Your Django serve your Angular Frontend

Install rest framework, corsheaders, webpack_loader

    pip install djangorestframework
    pip install django-cors-headers
    pip install django-webpack-loader        

Though not related to Angular, install pytest. It will be helpful later

    pip install pytest

Save installations in requirements.txt

    pip freeze > requirements.txt

Update .settings

    Add the following in INSTALLED_APPS
        'rest_framework',
        'corsheaders',
        'webpack_loader',

    Add corsheaders in MIDDLEWARE

        'corsheaders.middleware.CorsMiddleware',

    Set CORS Settings Just above the STATIC_URL

        # CORS Settings

        CORS_ORIGIN_ALLOW_ALL = True

    Set Angular Path above STATIC_URL

        ANGULAR_APP_DIR = os.path.join(BASE_DIR, 'frontend/water-overflow/dist/water-overflow')

    Set Static Files Directory below STATIC_URL

        STATICFILES_DIRS = [
            os.path.join(ANGULAR_APP_DIR),
        ]

Update your .urls.py to server Angular

    Import serve, and RedirectView

        from django.contrib.staticfiles.views import serve
        from django.views.generic import RedirectView

    Add Urls to Serve your index.html, and staticfiles

        urlpatterns = [
            url(r'^admin/', admin.site.urls),
            url(r'^messages/', include('messages.urls')),
            url(r'^$', serve, kwargs={'path':'index.html'}),
            url(r'^(?!/?static/)(?!/?media/)(?P<path>.*\..*)$',
            RedirectView.as_view(url='/static/%(path)s', permanent=False)),
        ]

Test run

    Build your Angular Project

        cd frontend/invoice_messages
        ng build

GIT COMMIT

Create a blank Repo in github:
    aislaapps

To commit all codes from django to frontend folders, we need to remove .git folder in frontend/invoice_messages
Angular has auto git init the folders on creation.

    cd frontend/<project name>
    rm -rf .git


Git initialise the main folder, and commit:

    cd <project name>
    Update .gitignore
    git init
    git add .
    git commit -m "Initial Django Angular Setup"
    git push -u origin master