Configure new Django App

Configure new Django app

The configuration of the Django app is done on two levels :

at the common Django installation level
at the specific Django app level

The following steps are related to the configuration of demo1 app at the common Django installation level.

1. Update `settings.py` file at Django install level to declare the `demo1` app centrally

Edit the settings.py file that is under the following hierarchy :

myprojectdir
├── manage.py
├── myprojectenv
├── myproject
    ├── settings.py    #contains all the configuration of the Django installation

Declare the demo1 app in the settings.py under the lists :

INSTALLED_APPS

STATICFILES_DIRS

The file should look like this :

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'demo1',                                                        #declaration of demo1 app
]

#STATIC_URL = 'static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

STATIC_URL = 'static/'

STATICFILES_DIRS =( os.path.join(STATIC_ROOT, 'common/css/'),
                    os.path.join(STATIC_ROOT, 'common/js/'),
                    os.path.join(STATIC_ROOT, 'common/img/'),

                    os.path.join(STATIC_ROOT, 'demo1/css/'),       #path to css files used by demo1 app
                    os.path.join(STATIC_ROOT, 'demo1/js/'),        #path to js files used by demo1 app
                    os.path.join(STATIC_ROOT, 'demo1/img/'),       #path to img files used by demo1 app
                )

2. Copy static files of `demo1` app under the Django install central `static` directory

Copy the static files for the app demo1 respectively under :

myprojectdir/static/demo1/css/ for the styling files

myprojectdir/static/demo1/js/ for the javascript files

myprojectdir/static/demo1/img/ for the image files

The files hierarchy should look like this :

myprojectdir
├── manage.py
├── myprojectenv
├── myproject
├── static
    ├── demo1
        ├── css     #copy all css files used by demo1 app here
        ├── js      #copy all js files used by demo1 app here
        ├── img     #copy all image files used by demo1 app here

3. Update the `urls.py` file at Django install level to declare `demo1` url

Edit the urls.py file that is under the following hierarchy :

myprojectdir
├── manage.py
├── myprojectenv
├── myproject
    ├── settings.py    #contains all the configuration of the Django installation
    ├── urls.py        #contains all mappings between URLs, that the Django installation serves, and Python views

Declare the demo1 routing in the myprojectdir/myproject/urls.py file at the central project level :

from django.contrib import admin
from django.urls import include, path
from myapp import views

urlpatterns = [
    path('',views.index, name='index'),
    path('myapp/', views.index, name='index'), #default landing page
    path('admin/', admin.site.urls), #django admin app
    path('demo1/', include('demo1.urls')), #route to demo1 app urls
]

The following steps are related to the configuration at the specific Django app level.

4. create the `*.html` files at app level

The app level *.html files should be created at in the templates directory under the following hierarchy

myprojectdir
├── manage.py
├── myprojectenv
├── myproject
├── static
├── demo1
    ├── __init__.py
    ├── __pycache__
    ├── admin.py
    ├── apps.py
    ├── migrations
    ├── models.py
    ├── templates
        ├── demo1         #html files need to be created at this level
    ├── tests.py
    ├── urls.py
    ├── views.py

To achieve this, first, create the following directory hierarchy :

(myprojectenv) usr1@server:~/myprojectdir$ cd demo1
(myprojectenv) usr1@server:~/myprojectdir/demo1$ mkdir templates
(myprojectenv) usr1@server:~/myprojectdir/demo1$ cd templates
(myprojectenv) usr1@server:~/myprojectdir/demo1/templates$ mkdir demo1

In the /demo1/templates/demo1 directory copy the *.html files you would like to use. The hierarchy of the directories should look like this

The resulting hierarchy looks like this :

myprojectdir
├── manage.py
├── myprojectenv
├── myproject
├── static
├── demo1
    ├── __init__.py
    ├── __pycache__
    ├── admin.py
    ├── apps.py
    ├── migrations
    ├── models.py
    ├── templates
        ├── demo1
            ├── index.html   #html files to be used for demo1 app
    ├── tests.py
    ├── urls.py
    ├── views.py

5. Edit the `.html` file at app level to reference static content such as `.css`, `*.png`, …

With the static files copied in the static directory at Django install level (see step 2), we need to edit all the *.html files to add the right reference to the static ressources.

Add the line {% load static %} at the begining of the html file.

{% load static %}
<!DOCTYPE html>
.
.

To make sure the *.html pages are using the right path to *.css, *.js and images, we need to replace the paths using {% static .... %} as follows :

 <link rel="shortcut icon" href="{% static 'demo1/img/dep-f-ico1.png' %}"/>
.
.

6. configure the `views.py` file at app level

Edit the views.py file under the app directory. The file should be at the following hierarchy :

myprojectdir
├── manage.py
├── myprojectenv
├── myproject
├── static
├── demo1
    ├── __init__.py
    ├── __pycache__
    ├── admin.py
    ├── apps.py
    ├── migrations
    ├── models.py
    ├── templates
    ├── tests.py
    ├── urls.py
    ├── views.py            #views files at the app level to edit

Update the views.py file as follows :

from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import get_object_or_404, render
from django.template import loader
from django.urls import reverse
from django.views import generic

def index(request):
    return render (request, 'demo1/index.html', {})  # This will render the index.html file as a response to the index request

7. Edit the `urls.py` file at app level

Edit the urls.py file under the app directory. The file should be at the following hierarchy :

myprojectdir
├── manage.py
├── myprojectenv
├── myproject
├── static
├── demo1
    ├── __init__.py
    ├── __pycache__
    ├── admin.py
    ├── apps.py
    ├── migrations
    ├── models.py
    ├── templates
    ├── tests.py
    ├── urls.py           #urls file at the app level to edit
    ├── views.py

Update the urls.py file as follows :

# config/urls.py

from django.urls import path, include # Import this function
from . import views

app_name = "demo1"

urlpatterns = [
    # Main app
    path('', views.index, name="index"),
]

8. Deploy the app

Now that all configurations are ready you need to launch Python Virtual environment and execute the migration

8.1. Activate virtual env

To use Django command line, activate the virtual environement

usr1@server:~/myprojectdir$ source myprojectenv/bin/activate

The prompt is changed as follows

(myprojectenv) usr1@server:~/myprojectdir$

8.2. Execute the build of the project

Once the configuration has been done execute

(myprojectenv) usr1@server:~/myprojectdir$ python3 manage.py migrate

8.3. Restart Gunicorn to apply the changes

(myprojectenv) usr1@server:~/myprojectdir$ sudo systemctl restart gunicorn

Configure new Django App