Djangular-Serve offers full control and management over Django and Angular PWA.
Project description
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
- Getting Started
- Commands
- PWA Usage
- Roadmap
- Contributing
- License
- Contact
- Acknowledgements
About The Project
Built With
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.
- Fork the Project
- Commit your Changes
- Push to the Branch
- 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
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.