Create a Django ‘helloworld’ application using Visual Studio Code

We will create and deploy a basic ‘helloworld’ Django application today in Azure App Services. This will give us an overview on how deploy a Django web application to a Serverless Azure App Services.

Serverless app services gives us an advantage on effortless Continuous Deployment as well as Management of your Infrastructure for your application. Another advantage is, in-case of any failures, Azure in-built features like Application Insights, Azure Monitor, for security Azure DDoS Protection Plan as well as Azure Defender, Azure Security Center will take care for your application security.

Pre-Requisite —

1. Python — Install Python in your Desktop (Download Python | Python.org)

2. Install Visual Studio Code as well (Download Visual Studio Code — Mac, Linux, Windows)

STEP — 1) Deploy an Azure App Services in your Azure Subscription. We have covered that detailed step-to-step creation in our previous article, take a look — Create an Azure App Service with GitHub Continuous Deployment Integration.

STEP — 2) We suggest users to use Visual Studio Code as it gives an easy extension to connect to your Azure Account and One-click management of your Azure Services. Download Visual Studio Code from here — Download Visual Studio Code — Mac, Linux, Windows.

STEP — 3) Open VS-Code and Open Command Terminal inside it. Browse to Terminal Option on Menu Bar and Select New Terminal. Use can use shortcut Ctrl+Shift+`

Open New Terminal in VS Code

STEP — 4) After Installing Python, lets install Django

pip install django

Installing Django using VS Code Command terminal

STEP — 5) After Installing Django let’s create a project inside the parent folder

django-admin startproject helloworldproject

Creating Hello-World Project using django-admin

STEP — 6) After Creating the “helloworldproject”, let’s get inside the folder using “cd” command and create an application inside the project.

A project can have multiple applications inside it.

cd helloworldproject

Change Directory to created Project to create child applications

STEP — 7) Lets create an application inside the project where the other major components of the application will be running.

django-admin startapp helloworldapp

Create an application inside the django-project

STEP — 8) This would be our project folder structure as per figure below.

Folder Structure after creating project and application

STEP — 9) Let’s Register the created application “helloworldapp” inside “settings.py” in helloworldproject.

9.1 — Go to“ helloworldproject/settings.py ”
9.2 — Go to INSTALLED_APPS and add ‘helloworldapp’ as mentioned below.

# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'helloworldapp'
]

Add Application inside Settings.py

STEP — 10) Let’s create another folder inside the parent directory in which helloworldproject is created named ‘templates’. We will use this folder to save your HTML files like index.html.

Create ‘Templates’ Folder

This would be our project folder structure as per figure below after adding Templates Directory

Folder Structure after creating Templates Directory

STEP — 11) Map “Templates” Directory inside settings.py file. This will be configured using BASE_DIR for referencing your HTML Templates.

NOTE: In Production don’t use CSS and JS Files in TEMPLATES folder, use external links like Azure Blob Storages or nginx for same.

11.1 — Create a TEMPLATE_DIR where you’ll join “templates” folder with BASE_DIR.

TEMPLATE_DIR = os.path.join(BASE_DIR,"templates")

Create TEMPLATE_DIR Variable to join “templates” directory with BASE_DIR

11.2 — Add TEMPLATE_DIR inside ‘DIRS’ list variable to TEMPLATES list to make Django know here your TEMPLATES are saved.

TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [TEMPLATE_DIR],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]

Line 59, Add TEMPLATES_DIR inside ‘DIRS’ list

STEP — 12) Let’s Create basic “helloworld” HTML page inside Template Directory.

Hello World HTML in Index.HTML inside Templates Directory

STEP — 13) Let’s create a view so that whenever Django will get the request for request from urls.py file will be redirected to view mentioned with request URL.
View will be inside helloworldapp / views.py

Here we created a view name index. You can use any name as per your project

# Create your views here.
def index(request):
    return render(request, 'index.html')

Create a View for Index File

STEP — 14) Now Let’s configure the urls.py inside the parent project folder (helloworldproject / urls.py)

14.1 — Import Views from “helloworldapp”. This will import all the views you created in “helloworldapp”

from helloworldapp import views

14.2 — Maps your imported views with the urls request.

Here we used ‘ ’ for blank requests like helloworld.com
We will use ‘earth’ for helloworld.com/earth

path('', views.index, name="Index File")

Line 22, mapped the index view with ‘ ‘ blank path value

STEP — 15) Test the application in localhost. Open Command Terminal inside VS Code using shortcut Ctrl+Shift+` OR following STEP — 3

Run the command —

python manage.py runserver

In -case of port error run following command —

python manage.py runserver 127.0.0.1:8002

Change port 8002 as per your choice.

Run Python manage.py runserver command in command terminal

STEP — 16) Open http://127.0.0.1:8000 in your browser. This would be the result.

Congratulations !! Hello world in Django — Browser View

Congratulations you’ve created your first Django Application

Let’s Now Deploy this application in a Serverless Azure App Service to make it globally accessible. — Deploy a Django application in Azure App Services

This Article has been published by OrionLab.io