################################################### Configure new Django App ################################################### .. _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 .. _configure_new_django_app_at_install_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 : .. code-block:: bash 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 : .. code-block:: python # 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 : .. code-block:: bash 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 : .. code-block:: bash 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 : .. code-block:: python 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 ] .. _configure_new_django_app_at_app_level: 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 .. code-block:: bash 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 : .. code-block:: bash (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 : .. code-block:: bash 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. .. code-block:: html {% load static %} . . 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 : .. code-block:: html . . 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 : .. code-block:: bash 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 : .. code-block:: python 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 : .. code-block:: bash 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 : .. code-block:: python # 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 .. code-block:: bash usr1@server:~/myprojectdir$ source myprojectenv/bin/activate The prompt is changed as follows .. code-block:: bash (myprojectenv) usr1@server:~/myprojectdir$ 8.2. Execute the build of the project Once the configuration has been done execute .. code-block:: bash (myprojectenv) usr1@server:~/myprojectdir$ python3 manage.py migrate 8.3. Restart Gunicorn to apply the changes .. code-block:: bash (myprojectenv) usr1@server:~/myprojectdir$ sudo systemctl restart gunicorn