Django Starup Template with Jinja Template

In this bog post, I'll show you how to use Django with Jinja which is a Django template language for server side rendering. In simple words using Jinja you can transfer variables in python to html.

If you are looking for the Startup Template you can skip to the Starter Template section.

If you want to learn about the basic Django setup, you can read one of the previous post about the same here: How to setup Django.

In this post, first I'll talk about what kind of projects are best for this kind of setup, then I'll start with the basic setup and jump directly into the template setup.

Use Cases of this Setup/Template

This kind of setup is usually best for backend heavy application where you know that you are not going to need complex frontend.

For instance, this is best for a dashboard like application since you'll not need a lot of pages in a dashboard and you can do a lot of data intensive work on the backend and just display the output charts and numbers on the frontend.

Also, this kind of setup is best for small application with limited pages. And this is also best for saving a lot of time if the application size is small. That is why Django is called a framework for developers with a deadline.

Setting up template(HTML) files

Assuming that you already setup views.py file (if not, please refer to the previous post here). You can now create a new folder in the app folder with the name template and you have to create another new folder inside this folder with the name of your app. Inside this folder you can create a file index.html. Here is how the final folder structure would look like:

.
├── db.sqlite3
├── django_app
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   ├── models.py
│   ├── templates
│   │   └── django_app
│   │       └── index.html <-- new file
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── django_project
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
└── requirements.txt

For testing the index.html you can paste the following code

<h1>Hello World</h1>

In views.py copy the following code to connect to this html file: ``` from django.shortcuts import render

def index(request): return render(request, "django_app/index.html") ``` This code renders the html file found in the specified path.

In the terminal if you'll run the command python3 manage.py runserver you'll get the output as Hello World.

Using Jinja Template Variables

To pass python variables to this HTML template you have to pass them as arguments in view.py.

from django.shortcuts import render

def index(request):
    name = {"name": "Bot"}
    return render(request, "django_app/index.html", name)

In the above code, I am passing a python dictionary as a variable to the render function.

Update the index.html file to read this variable:

<h1>Hello {{name}}!!</h1>

Now, if you'll run server you see Hello Bot!!

And this is how you use Jinja template in Django. There is much more you can do with Jinja. If you want to experiment more, read more about this here.

Get Django Starter Template

Tired to setting up Django for every project?

In this post, I'll give you a template to quickly clone from git and get started. It follows all the best practices so you won't have to worry about keeping that.

So go ahead and use this command to clone django from git in an empty folder:

git clone https://github.com/ShilpThapak/Django-Stater-Template.git .

Switch to the correct branch:

git checkout -b With-Jinja-Template

Now you just have to activate your virtual environment and run pip install requirements.txt and you are all set.

Whats Next

This is just one of the ways to create Frontend with Django. For any complex application, or just about any application, you'll need Javascript to add interactivity to you website.

In the next post, I'll talk about how to add Javascript to your website.

Thanks for reading!