forafekt/djangular-serve

Djangular-Serve is a tool to fluidly connect Django and Angular. It will serve the entire Angular project through one base template and url of your Django project as a single progressive web application. It will also take care of Angular RouterLinks & Django urls/paths as well as serving all the static files directly to your template. It includes built-in meta, service worker & more. All fully customizable as you will see in the example.

DJANGULAR SERVE

Djangular-Serve is a tool to fluidly connect Django and Angular. It will serve the entire Angular project through one base template and url of your Django project as a single progressive web application. It will also take care of Angular RouterLinks & Django urls/paths as well as serving all the static files directly to your template. It includes built-in meta, service worker & more. All fully customizable as you will see in the example.
Explore the docs »

View Demo · Report Bugs · Request Feature

Table of Contents

• About the Project
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Commands
• PWA Usage
• Roadmap
• Contributing
• License
• Contact
• Acknowledgements

About The Project

Built With

• Python 3
• Django
• Angular 2

Getting Started

To start using Djangular-Serve, continue with the following instructions...

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• npm & Angular

See https://nodejs.org for installing NODEJS/NPM on your machine correctly

Once installed run:

npm install -g @angular/cli

Installation

1 . Install djangular-serve

pip install djangular-serve or pip3 install djangular-serve

2 . Add to Django INSTALLED_APPS

'djangular_serve'

3 . Add urls

urlpatterns = [
    ...
    path('', include('djangular_serve.urls'),
    or
    url(r'^', include('djangular_serve.urls'),
]

4 . In your settings.py file add and edit the following settings:

Set your relevant paths to allow djangular-serve to find templates and static

This is one way. Do it in whatever way it works for you.

Build paths inside the project like this: APP_DIR / 'subdir'.

BASE_DIR = Path(__file__).resolve(strict=True).parent.parent  # Absolute root path
APP_DIR = Path(__file__).resolve(strict=True).parent  # 'example' project
URL = os.path.relpath(APP_DIR / "static")  # example/static
ANGULAR_DIR = os.path.join(BASE_DIR / ".")  # root/ngservetest <- Your Angular project

Tell Django to look for Static files and templates.

In debug it is possible to have a different static location for local dev if preferred.

Again, set this to whatever way works best for your project.

if DEBUG:
    DJANGO_TEMPLATE_DIRS = (
        os.path.join(APP_DIR, 'templates'),
    )

    STATICFILES_DIRS = (
        os.path.join(APP_DIR, 'static_files'),
    )
else:  # Change later for production if needed.
    DJANGO_TEMPLATE_DIRS = (
        os.path.join(APP_DIR, 'templates'),
    )

    STATICFILES_DIRS = (
        os.path.join(APP_DIR, 'static_files'),
    )

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': DJANGO_TEMPLATE_DIRS,
        ...
        ...
    },
]

Commands

# Build Angular application to Django static
serve -s ng

# Move relevant static files to respective directories
serve -mv js, css, img or all

# Make a new directory in your static root
serve -mk <any-dir>

PWA Usage

The settings below are what will automatically distribute your app to your chosen path

""" 
Serve CDN or static css files to your template. 
"""
STYLESHEETS = [
    {
        'src': 'example/static/ng_css/styles.css'
    },
    # OR
    #    {
    #        'src': '{}/styles.css'.format(URL)
    #    },
]

""" 
Serve CDN or static js files to your template. 
"""
JAVASCRIPT = [
    {
        'src': 'example/static/ng_js/main.js'
    },
    {
        'src': 'example/static/ng_js/polyfills.js'
    },
    {
        'src': 'example/static/ng_js/runtime.js'
    },
]

""" 
Serve CDN or static fonts files to your template. 
"""
FONTS = [
    {
        'src': 'https://fonts.googleapis.com/icon?family=Material+Icons'
    },
]
# Path to get service-worker
SERVICE_WORKER_PATH = os.path.join(BASE_DIR, 'example/templates', 'sw.js')

# Gets name of service worker to automatically register .e.g 'sw.js'
# This will tell manifest and url to get this specific file and serve.
SERVICE_WORKER_NAME = os.path.basename(SERVICE_WORKER_PATH)

APP_NAME = 'Djangular Serve'
APP_DESCRIPTION = "Build Angular into Django static"
APP_THEME_COLOR = '#000000'
APP_BACKGROUND_COLOR = '#ffffff'
APP_DISPLAY = 'standalone'
APP_SCOPE = '/'
APP_ORIENTATION = 'any'
APP_START_URL = '/'
APP_STATUS_BAR_COLOR = 'default'
APP_DIR = '.'
APP_LANG = LANGUAGE_CODE
APP_ICONS = [
    {
        'src': '/static/images/logo_icons.png',
        'sizes': '160x160'
    }
]
APP_ICONS_APPLE = [
    {
        'src': '/static/images/apple_icons.png',
        'sizes': '160x160'
    }
]
APP_SPLASH_SCREEN = [
    {
        'src': '/static/images/icons/splash-640x1136.png',
        'media': '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)'
    }
]

Here is an example on setting up your _index.html template.

<!doctype html>
{% load static %}
{% load serve_tags %}
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{ LANGUAGE_CODE|default:'en' }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
<head>
  <meta charset="utf-8">
  <title>{% block title %}{% endblock title %}</title>
  <base href="/">

  {% block head %}{% manifest_meta %}{% endblock head %}
  <!-- [if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"
          type="text/javascript"></script>
  <![endif] -->

  {% serve_fonts %}
  {% serve_css %}
</head>

<body class="mat-typography">
{% block body %}


<app-root>{% block content%}{% endblock content %}</app-root>


  <!-- JS -->
  {% serve_js %}
  {% block js %}{% endblock js %}

<!-- [if lte IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>
<![endif] -->
{% endblock body %}
</body>
</html>

For more examples, please refer to the Documentation

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Any contributions you make are greatly appreciated.

1. Fork the Project
2. Commit your Changes
3. Push to the Branch
4. Open a Pull Request

License

Distributed under the MIT License. See LICENSE in djangular_serve/docs for more information.

Contact

LinkedIn: https://linkedin.com/in/jonnydoyle
Project Link: https://github.com/forafekt/djangular-serve