How to Make Django Reusable App Adapted for Front-ends

Dependencies:

· Python 3.7

Sample projects and goal

Click the link below and download sample project_1 and project_2 zip files.

Sample projects
“polls” page of project_1
“polls” page of project_2

Step 1: Create a reusable app

Let use project_1 as a reference. Because the backends of polls app in project_1 and project_2 are the same. This step follows most of walkthroughs on Django official tutorial page here.

Root folder of reusable app
File structure after “polls” app is copied over
from django.http import HttpResponse
from django.shortcuts import render
def index(request):
num = 410230
percentage = 70
days = 30
return render(request, 'django-polls/index.html', context={'number': num, 'percentage': percentage, 'days': days})
“templates” folder is removed
=====
Polls
=====
Polls is a Django app to conduct Web-based polls. For each question,
visitors can choose between a fixed number of answers.
Detailed documentation is in the "docs" directory.Quick start
-----------
1. Add "polls" to your INSTALLED_APPS setting like this::INSTALLED_APPS = [
...
'polls',
]
2. Include the polls URLconf in your project urls.py like this::path('polls/', include('polls.urls')),3. Run ``python manage.py migrate`` to create the polls models.4. Start the development server and visit http://127.0.0.1:8000/admin/
to create a poll (you'll need the Admin app enabled).
5. Visit http://127.0.0.1:8000/polls/ to participate in the poll.
[metadata]
name = django-polls
version = 0.1
description = A Django app to conduct Web-based polls.
long_description = file: README.rst
url = https://www.example.com/
author = Your Name
author_email = yourname@example.com
license = BSD-3-Clause # Example license
classifiers =
Environment :: Web Environment
Framework :: Django
Framework :: Django :: X.Y # Replace "X.Y" as appropriate
Intended Audience :: Developers
License :: OSI Approved :: BSD License
Operating System :: OS Independent
Programming Language :: Python
Programming Language :: Python :: 3
Programming Language :: Python :: 3 :: Only
Programming Language :: Python :: 3.6
Programming Language :: Python :: 3.7
Programming Language :: Python :: 3.8
Topic :: Internet :: WWW/HTTP
Topic :: Internet :: WWW/HTTP :: Dynamic Content
[options]
include_package_data = true
packages = find:
python_requires = >=3.6
install_requires =
Django >= X.Y # Replace "X.Y" as appropriate
from setuptools import setup
setup()
include LICENSE
include README.rst
recursive-include polls/static *
recursive-include polls/templates *
File structure that reusable app is ready to be generated
python setup.py sdist
File structure after reusable is generated
pip install django-polls-0.1.tar.gz
django-polls is pip installed

Step 2: Configure project_1

Create a django-polls folder inside of templates folder. Move polls/templates/polls/index.html file into templates/django-polls folder. The templates folder should look like the below.

index.html file is added
“polls” folder is removed from project_1
“polls” page of project_1 that is powered by django-polls reusable app

Step 3. Configure project_2

Create a django-polls folder inside of templates folder. Move polls/templates/polls/index.html file into templates/django-polls folder. The templates folder should look like the below.

index.html file is added
“polls” folder is removed from project_2
“polls” page of project_2 that is powered by django-polls reusable app

Conclusion

To make a reusable app compatible with more than one template or front-end framework, we need to maintain templates in the client projects. Make sure that the name of template folder in the client project matches the one declared in view function of reusable app. In addition, when you develop reusable app, please put care in naming the template folder. Avoid common name so that it doesn’t raise conflict with existing template folders in prospective client projects.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store