How to Make Django Reusable App Adapted for Front-ends

6 min readOct 27, 2021

Django has been one of the core web frameworks for our team for many years. As our Django based web application grows in numbers, one of the obvious problems is the fact that multiple web applications that share the same functionalities. One of the solutions to avoid rebuilding the same “wheel” is to use Django’s reusable application solution. In this post, I am going to show the folks how to develop a practical reusable Django application based on my own experience. Please note that the official Django reusable application tutorial only shows you a single reusable app that is used by one project. However, my experience of reusable Django applications all falls into the following 3 scenarios:

Assuming we have project A and project B use the same reusable app. Think of the scenarios below.

· Project A uses Bootstrap as front-end framework while project B uses Foundation.

· Project A uses Bootstrap 5 as front-end framework. Project B that is a legacy system uses Bootstrap 4.

· Both project A and project B use Bootstrap 5. Data must be rendered in different layouts.

How would this reusable app be adapted for both projects? What if there is a third project that is powered by this reusable app? The goal of this tutorial is to answer these questions. I am going to share my solution how to solve the problem.

Dependencies:

· Python 3.7

· Django 2.2.13

Sample projects and goal

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

https://github.com/slow999/DjangoAndReusableApp/releases/tag/0.0.1

Let’s run projects and look into /polls/ pages. They look quite similar between project 1 and project 2. Our goal is to convert polls app into a reusable app that supports back-end function and be compatible with two kinds of templates.

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.

First, create a folder django-polls outside of any project. The file structure should look like the below at this point.

Root folder of reusable app

Move the polls folder of project_1 into the django-polls folder. The file structure should look like the below.

File structure after “polls” app is copied over

Remove templates folder. Replace the template path in the index function in views.py by django-polls/index.html . The code in views.py should look like the below.

from django.http import HttpResponse
from django.shortcuts import renderdef index(request):
    num = 410230
    percentage = 70
    days = 30
    return render(request, 'django-polls/index.html', context={'number': num, 'percentage': percentage, 'days': days})

The file structure should look like the below now.

Create a file django-polls/README.rst with the following contents:

=====
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.

Create a file django-polls/setup.cfg with the following contents:

[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

Create a django-polls/setup.py files with the following contents:

from setuptools import setup
setup()

Create a file django-polls/MANIFEST.in with the following contents:

include LICENSE
include README.rst
recursive-include polls/static *
recursive-include polls/templates *

The file structure should look like the below now.

File structure that reusable app is ready to be generated

Build reusable app by running following command inside of django-polls folder.

python setup.py sdist

We should see django-polls-0.1.tar.gz in dist folder.

File structure after reusable is generated

Let’s install reusable app by running following command inside of dist folder.

pip install django-polls-0.1.tar.gz

The django-polls library should appear in the list of libraries as below.

At this point, the reusable app is ready to use. Let’s configure two projects in the next step.

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.

Remove polls folder from project_1. The file structure should look like the below.

“polls” folder is removed from project_1

Activate the virtual environment that has django-polls library and start project.

Here we go. you should see this page again.

“polls” page of project_1 that is powered by django-polls reusable app

Step 3. Configure project_2

Remove polls folder from project_2. The file structure should look like the below.

“polls” folder is removed from project_2

Activate virtual environment that has django-polls library and start project.

You should see this page again.

“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.

If you are interested, I’ve uploaded this project on Github here. The Git repo name is DjangoAndReusableApp. In this repo, there are three main contents. The django-polls folder contains the end result of reusable app. The project_1 and project_2 folders are the end results of two Django applications that I use as examples in this tutorial.

Thanks for reading this article. Hope this article is helpful for you. Please leave your comments and share your idea. Stay tuned.