Django Startup Template with Jinja Template

In this blog post, I'll show you how to use Django with Jinja, a Django template language for server-side rendering. In simple terms, 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 posts about the same here: How to setup Django.

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

Use Cases of this Setup/Template

This setup is usually best for backend-heavy applications where you know that you are not going to need a 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 setup is best for small applications with limited pages. It is also great 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 have already set up the 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 templates, and inside this folder, create another new 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:

.
├── 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 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 views.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 run the server, you will see Hello Bot!!.

And this is how you use Jinja templates 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.

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 -r requirements.txt, and you are all set.

Whats Next

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

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

Thanks for reading!