Django 5: Applications and sites
Tags: django, python, docker
Published: 2024-03-22 05:23:16

> _NOTE: This article was initially posted on my Substack, at https://andresalvareziglesias.substack.com/_

Hi everyone!

Once the stack is completed, with a database server, an application server, and a web server that serves static content and acts as a gateway to our application server, we can then build the Tic Tac Toe client itself. To do that, we'll first learn how the Django Framework organizes complex web applications with subapplications.

Let's get started!

## Articles in this series

- Chapter 1: [Let the journey start](https://andresalvareziglesias.substack.com/p/let-the-journey-start-with-python-docker-and-ai?utm_source=post-toc)
- Chapter 2: [Create a containerized Django app with Gunicorn and Docker](https://andresalvareziglesias.substack.com/p/create-a-containerized-django-app?utm_source=post-toc)
- Chapter 3: [Serve Django static files with NGINX](https://andresalvareziglesias.substack.com/p/serve-django-static-files-with-nginx?utm_source=post-toc)
- Chapter 4: [Adding a database to our stack](https://andresalvareziglesias.substack.com/p/adding-a-database-to-our-stack?utm_source=post-toc)
- Chapter 5: [Applications and sites](https://andresalvareziglesias.substack.com/p/django-5-applications-and-sites)
- Chapter 6: [Using the Django ORM](https://andresalvareziglesias.substack.com/p/django-6-using-the-django-orm)
- Chapter 7: [Users login, logout and register](https://andresalvareziglesias.substack.com/p/django-7-users-login-logout-and-register)

## Create frontend application

Until now, we have just created a Django app, that is more like a "project". Now, we need to define the internal apps of our project. For our super-mega-cool version of Tic Tac Toe (with dragons), for now we just need a single app. We can call it "game".

Django provides a tool for create these internal sites, using manage.py:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vun9cvj4ifbpvwda23vk.png)

Now, we have another folder in the root of the Django app source code:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5zylwcnxhn421zegis3.png)

Inside the subapp folder we have the models and views files, among other useful files. We will explain them later. For now, define a sample view writing in game/views.py this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwhy93725jtror9lv8gs.png)

Then, define the URLs of the game subapp editing game/urls.py:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ponsz48nv87et8oe8g6r.png)

At last, define the URL of the new view editing the general URLs file at  ticmagicalline/urls.py. We want our new “game” app to be the root application, so map it to ““ (empty).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08d3aw3wqblne0umoc45.png)

Now, rebuild the docker-compose cluster to include the new changes. We can build just one module, the app module actually:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61e48upl4dr3plwfyblo.png)

And restart containers:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3glz2bha5knjdcg9vr1.png)

Then, open the URL to our new subapp at:

http://localhost:8080/

If all is OK, we will see a glorious "Hello world!". Yeah!

## Templates and views

To separate logic and visualization, each view may have an associated template. Django has his own template language, you can read everything for it here:

https://docs.djangoproject.com/en/5.0/ref/templates/language/ 

To add a template to our sample view, define a sample view named index.html in a templates directory under the subapp directory (game/templates):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tpbd2ve5igu5dfmdy2c.png)

Then, associate to the view in game/views.py this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbnpbjgj94i6y2nyw83z.png)

The context dictionary is used to associate data to the request. This data can later be rendered using the Django Template Language directives. In our example, we render the content of "message" using `{{ message }}` placeholder.

Rebuild the app module again:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0c52s31dx6b00l3mrzp4.png)

And restart containers:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ll9ek778nasten5y88h.png)

Then, open the local URL again:

http://localhost:8080/

Our Hello World message is now under a proper HTML structure. Great! With this base, we can develop now our full Tic Tac Toe HTML client.

## Configure the new app in global settings file

Don't forget to register the new created app in Django app global registry, located in the main settings.py file. Search for the INSTALLED_APPS variable and add the new subapp game, like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hopwvadq5iw2xcvyq5ho.png)

Also, register the main templates directory in variable, like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ajxl0ylwul4q5m9jbh1r.png)

NOTE: Leave as-is the `[...]` parts of the existent code blocks.

## About the list

Among the Python and Docker posts, I will also write about other related topics (always tech and programming topics, I promise... with the fingers crossed), like:

- Software architecture
- Programming environments
- Linux operating system
- Etc.

If you found some interesting technology, programming language or whatever, please, let me know! I'm always open to learning something new!

## About the author

I'm Andrés, a full-stack software developer based in Palma, on a personal journey to improve my coding skills. I'm also a self-published fantasy writer with four published novels to my name. Feel free to ask me anything!