Django Quick Start Guide for Basic Configurations

Configuring your Django web app is a necessary part of rendering your own custom templates.

If you haven't installed Django in a virtual environment check out the Quick Start to Django Installation before continuing below.

This article will be a brief Django configurations tutorial where you will create and view your HTML and Python files.

You will need a text editor to complete this tutorial. We recommend the free version of Sublime Text.

How to open your Django project in Sublime Text

Sublime > env

Open the Sublime application then click File > Open Folder ... in the upper left corner. Select your virtual environment folder, in this case env, on your computer and open it in Sublime. 

Create a Django templates folder for your HTML templates

env > mysite > main > (New Folder) templates > (New Folder) main > (New File) home.html

Click on the mysite folder then the application folder called main. Create a new folder named templates in the mysite > main folder.

Within the templates folder create a new folder called main. The templates > main folder will hold all of the HTML files created for your application.

Create a home.html file

env > mysite > main > templates > main > home.html

Finally, create an HTML document named home.html within the templates > main folder. Add the HTML <p>Hello, world!</p> to the file and save.

Add the app main to settings.py

env > mysite > mysite > settings.py

Now we need to add the app main to the list of installed applications. Under INSTALLED_APPS add 'main.apps.MainConfig'. Save the changes to the file.

Create the main URLs

env > mysite > main > (New File) urls.py

from django.urls import path
from . import views

app_name = "main"   


urlpatterns = [
    path("", views.homepage, name="homepage"),
]

We have the Django project, app, and homepage but we still need a way to render the custom HTML template in the browser via a URL.

Create a new file called urls.py in the main application folder. It will appear just below the tests.py file once created.

Within main > urls.py,  specify the application name as "main" and add a URL path to a homepage function we will write in the next step. Save the file.

Create the homepage view

env > mysite > main > views.py

from django.shortcuts import render

# Create your views here.
def homepage(request):
  return render(request = request, template_name="main/home.html" )

Listed directly below the main > urls.py file is views.py.  Open views.py and add the code above that states when the homepage URL is requested the home.html file will render. Be sure to save the file.

Add the main URLs to the mysite URLs

env > mysite > mysite > urls.py

"""mysite URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include  #add include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include ('main.urls')),   #add this
]

Finally, we have to add the URLs from the main application to the mysite project. To do this, go to urls.py located in mysite > mysite and import include. Then add a path to include the main > urls.py file under urlpatterns.

Migrate initial changes to the database

macOS Terminal

(env)User-Macbook:mysite user$ python3 manage.py migrate

Windows Command Prompt

(env)C:\Users\Owner\desktop\env\mysite> py manage.py migrate

To ensure your web app will run correctly, apply the migrations preset by the Django web framework.

Run the development server

macOS Terminal

(env)User-Macbook:mysite user$ python3 manage.py runserver

Windows Command Prompt

(env)C:\Users\Owner\desktop\env\mysite> py manage.py runserver

Finally, run the development server in your CLI and go to http://127.0.0.1:8000/ to see your home.html template displaying in the browser. 

How to use the Extends and Include Django Template Tags

With the template rendering, you can now move on to using Django extends and Django include tags. These are built-in tags that connect HTML files throughout the Django project.

We recommend using them to maximize your DRY (don’t repeat yourself) coding practices and save you time.

Here is an example below of using block tags in addition to the extends tags so you only have to code the html, head, meta tags, and body elements once.

env > mysite > main > templates > main > (New File) header.html

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
  </head>
 <body>
    {% block content %}
    {% endblock %} 
      
  </body>
</html>

env > mysite > main > templates > main > home.html

{% extends 'main/header.html' %}
<!--Block content goes below-->
  {% block content %}
  <h1>Hello, world!</h1>
  ...
  {% endblock %}