How to really start from scratch with Django
Most of articles on internet are not explaining thoroughly how to set-up a Django application. In this article, not only we are going to set-up a project and an application, but also set-up static files, html templates and our first view.
Before getting started, you should set-up a virtual environment for your Django activities. Check this article until your virtual environment is up.
Initiate project and app
To initiate a django project, start with this command line :
django-admin startproject <name_project>
This directory is the root of your project. Within it, you have another directory with the same name which is the project directory.
Do not rename anything because files are already set-up with this name. I recommend to end the name of your directory with “project” in order to avoid confusions.
EDIT :
Nonetheless it is completely fine to rename the folder where manage.py and your folder project are located. This “parent” folder exists because the command created a new folder in which create the django project. It names the parent folder by the name given as parameter of the command.
After many years of practice with Django, I recommend to add a dot at the end of the command like so :
django-admin startproject <name_project> .You’re asking django to create the project in the folder where you are, not within a new folder. It is clearer to start a project this way.
END OF EDIT
Once you go into your directory, you should see manage.py file. This file allows you to run every django command.
From there, you can run the following command :
On Windows :
py manage.py startapp <name_app>On Mac :
python3 manage.py startapp <name_app>
You should see a new directory appears. Now we can begin !
Creation of static and template directories
To handle static and template files, create several directories :
- templates / <app_name>
- static / <app_name>
Why are we doing this ?
The main strength of Django framework is to handle several applications within the same project. Ideally, every functionality should have its own app in one project.
The thing is, from several project, some template or static files will have the same name : base.html, static.css, script.js, etc…
In production, it is recommended to gather every static files in a directory at the root of the project also named static. It is faster for the server to fetch static files from there than from our static files sorted deep within our app organization. I won’t give every detail here, but if there are several files with the same name in the same directory, conflicts might arise.
To avoid such situations, Django developpers use that convention described above.
Setting templates organization
We are going to create 3 directories and 1 html file.
- directory “components” that will contain every little parts of html that compose html pages (header, footer, menu, navbar, etc…)
- directory “form” that will contain html templates of forms
- directory “webpages” that will contain html templates of webpages
- file “base.html” that will contain every common html parts shared by every html pages (yes, most of its contents are components)
Setting static organization
We are going to create 2 directories and 2 files in static.
- directory “css” that will contain every css files
- file “style.css” that will contain any custom css properties
- directory “js” that will contain every js files
- file script.js that will contain any custom js scripts
At the end, our tree look like this :
Configurate file settings.py
BASE_DIR
BASE_DIR is a variable of type string that contains the absolute path toward the root of the project. Remember that the root of a project has manage.py file. We have nothing to change there but it’s good to know what it is.
INSTALLED_APPS
Add the name of your app. In my illustration, I used a more “formal” way to do it but you can simply add the name of the directory created by the command manage.py startapp.
TEMPLATES
In DIRS key, add the location of where your templates are stored.
# Internationalization
In this part, you can change language and timezone of your app.
# Static files
In this part, we can add paths toward static directory.
STATIC_URL stores part of path toward static files. Basically, once the project is running, Django will fetch for every directories and files that are within a static directory. Thus, we can create a shortcut in templates toward static files such as :
{% static 'directory-name/file-name' %}#For instance :{% static 'css/style.css' %}
STATIC_ROOT is used when we run the command “collectstatic”. This command is used in production. The command collectstatic will create a static directory at the path set at STATIC_ROOT. Ideally, it should be at the root of the project. Once the static directory is created, every files found by STATIC_URL are going to be copied in it.
Configurate files urls.py
It is a common thing in django project to handle urls from a urls.py file within the app and not from the urls.py file within the project.
In the directory project, open urls.py file and compare your urls.py file with the illustration below.
In the directory app, create a urls.py file. Since we have a custom file, I added a custom organization for my urls.
from django.urls import path, include
# change the name of the app if you copy-pasted it without thinking
from tutorial_app import views
webpages_patterns = [
path('', views.index, name = 'index')
]
forms_patterns = [
]
urlpatterns = [
path('', include(webpages_patterns)),
path('', include(forms_patterns))
]As you can notice, I already added an url from a view. That’s exactly what we are going to do right now !
Create your first view
In this part, I won’t explain many things because it’d require a whole article only to explain how it works. We are here only to start a Django app.
First of all, we are going to fill templates. Beginning with base.html.
{% load static %}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- change the name of the app -->
<link rel="stylesheet" href="{% static 'tutorial_app/css/style.css' %}">
<title>tutorial_app</title>
</head>
<body>
{% block content %}
{% endblock %}
<script src="{% static 'tutorial_app/js/script.js' %}"></script>
</body>
</html>
Now we will fill the template of our view named “index”.
Then, we need to add some custom content in index.html and set some css properties. Thus, we will check if our app can handle properly static files.
Proceed with views.py file and copy-paste the code below.
def index(request):
template_name = 'webpages/index.html'
context = {
}
return render(request, template_name, context)
Back to terminal ! Write down the following commands one after another :
py manage.py makemigrations
py manage.py migrate
py manage.py runserver
If everything went well, you should see this :
Congratulations ! You can start properly your Django adventure. There are many things to learn. Maybe one day I will find the courage to do more articles (some comments might cheer me up ;) ).
