Skip to main content

Convert your Angular built index.html file to Django Template syntax

Project description

ng2django

PyPI PyPI - License

This is a simple Python tool that will convert an HTML file built by Angular2+ to Django Template Language. This way static files can be made available to an Agnular app that is served up with a Django project.

The script basically does two things:

  • Adds a {% load static %} tag to the top of the file
  • Changes the value of href and src attributes of link and script tags to {% static "<path-to-the-file>" %}

Dependencies

The script uses Beutifulsoup4. You can install it by running pip install -r requirements.txt.

Install

Just run $ pip install ng2django

Usage

Build your Angular app and place the files in <Django-project-root>/<app>/static/<optional-subdirectory>/.

The script takes two positional arguments:

  • source: The path to the HTML file you want to convert.
  • dest: Where you want the Django Template file saved.

Then you can run

$ ng2django <Django-project-root>/<app>/static/index.html <Django-project-root>/<app>/templates/index.html

if you are storing your files directly in your Django app's static and templates directories (not recommended), or

$ ng2django <Django-project-root>/<app>/static/<optional-subdirectory>/index.html <Django-project-root>/<app>/templates/<optional-subdirectory>/index.html -s <optional-subdirectory>

if you are using some subdirectory of those paths.

Optional Arguments

Short Long Description
-s <subdir> --subdir <subdir> Include the subpath under <Django-app>/static/ where your static files are stored.
-n --nodelete Do not delete the source file after converting.
-p --pretty Create a dest file that is more human readable.

Recommended Setup and Usage

In you Angular project open your package.json file. Under scripts, change build to

ng build --prod --output-path <Your-django-project-root>/<Django-App>/static/ng.

Add a postbuild key under script and set the value to

ng2django <Your-django-project-root>/<Django-App>/static/ng/index.html <Your-django-project-root>/<Django-App>/templates/ng/index.html -s ng.

Run npm run build and your Angular JS and CSS files will be saved to your Django app's static directory. Then, this script will run and convert your HTML file and save it in your Django app's templates directory.

Contributing

Contributions are welcome - submit an issue/pull request.

Push to PyPi

Use these commands to release on PyPi

rm -rf dist/ build/
python setup.py sdist
twine upload dist/*

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

ng2django-19.10.23.tar.gz (3.4 kB view details)

Uploaded Source

File details

Details for the file ng2django-19.10.23.tar.gz.

File metadata

  • Download URL: ng2django-19.10.23.tar.gz
  • Upload date:
  • Size: 3.4 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/1.13.0 pkginfo/1.5.0.1 requests/2.22.0 setuptools/40.8.0 requests-toolbelt/0.9.1 tqdm/4.35.0 CPython/3.7.3

File hashes

Hashes for ng2django-19.10.23.tar.gz
Algorithm Hash digest
SHA256 098b460094d2d7391b0394aa27f18447efd7a7feced9df6f4aa14c9d8f2c9e8e
MD5 0d97efc60c5fe7e01dd95149d4c16a87
BLAKE2b-256 afb0b18a9a60f3179376ed148a11916b95140b9d70b49f88faf38fed61793dfb

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page