Ashish

Posted on Jan 12

How to Setup your First Django Project | The Best and Simplest Way

#django #python #webdev #tutorial

While starting with learning Django, its very crucial to know what should be the best and the simplest way to setup your Django project.

Python's django framework is not something like the usual HTML, CSS and JavaScript project which you only deals with a few files, even the simples django project includes various files such as views.py, urls.py, models.py, settings.py, forms.py then the various folders such as staticfiles, templates which themselves includes various files. Its becomes even more complicated when you are working on a big django project.

This clearly explains Why there is a need to setup and manage django projects properly. In this tutorial today I will be sharing my way to setup the django project from creating the new django project to launching it on localhost. If you wan to know How to Deploy your Django Project Online for Free then I have also posted the website I use the most to host my django projects.

You can also get my FREE eBook related to A Comprehensive Guide to Setting Up Django Projects

Best way to setup a Django project

General Steps

To start with lets create a folder say django-setup, in this folder we will have our project setup.
Now open this folder in the code editor of your choice, here I will be using VS Code.

Creating virtual environment

Now we will setup a virtual environment t work with.

Install virtualenv using the command below in your terminal.

pip install virtualenv

Once the library is installed, now lets go back to the step 2 where we opened the folder in vs code, in terminal type the command below to create a virtual environment.

py -m venv venv

Instead of venv you can name your environment anything such as

py -m venv django-venv

Activating virtual environment

Once the virtual environment is created, we will now activate the environment. To activate the virtual environment in your terminal type

cd venv\scripts ; ./activate

This will activate the virtual environment and we are ready to work.

Installing Django

Now install Django by typing the command below in the terminal.

pip install django

Creating django project

We are all set to start creating and working with our django project.

To create django project type the command below in the terminal

django-admin startproject <project name>

Note: Make sure to replace <project name> with your desired project name.

Creating django app

Now head over and open the project folder using cd command and run the command below to create django app.

py manage.py startapp <app name>

Note: Make sure to replace <app name> with your desired app name.

Creating static folder

In the project's root directory now create a new folder named static which will include all the static files such as stylesheets, javascript files, image files and so on.

In the static folder now create three different folders named css, js, img.

Creating templates folder

In the project's root directory now create a new folder named templates which will include all the HTML pages such as base.html, index.html, about.html, contact.html and so on.

In the static folder now create your desired HTML pages like base.html, index.html, about.html, contact.html.

Updating settings.py

Now we will make some changes to settings.py file which is present in your project folder.

Import the os module a the top of settings.py file as shown in the image below.

import os

Add your app to the installed apps as shown below

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'new_app'
]

Add os.path.join(BASE_DIR, 'templates' to TEMPLATES as shown below

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Right below STATIC_URL = 'static/' add the given code

STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]

With this step we have completed to update the settings.py file, now lets move on to the further steps.

Updating urls.py file present in the project folder

Now open the urls.py file located in the django project folder and replace the code with the code given below

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('<your_app_name>.urls')),
]

Note: Make sure to replace <your_app_name> with your actual app name.

Creating urls.py file in app folder

Create a new file named urls.py in your app folder and add the code below.

from django.urls import path
from <your_app_name> import views

urlpatterns = [
    path('', views.index, name='home'),
    path('about/', views.about, name='about'),
    path('contact/', views.contact, name='contact'),
]

Here we have added three pages, index.html, about.html and contact.html, you can add more pages as required by your project.

Note: Again make sure to replace <your_app_name> with your actual app name.

Creating HTML pages

Remember we created pages like base.html, index.html, about.html, contact.html in template folder, now we will ad html code to the pages.

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% endblock title %} - Django Setup</title>
</head>
<body>

    <header>
        <!-- Navigation bar code goes here -->
    </header>

    <main>
        {% block content %}{% endblock content %}
    </main>

    <aside>
        <!-- Sidebar code goes here -->
    </aside>

    <footer>
        <!-- Footer code goes here -->
    </footer>

</body>
</html>

index.html

{% extends 'base.html' %}
{% load static %}

{% block title %}Home{% endblock title %}

{% block content %}
<h1>Home page</h1>
{% endblock content %}

about.html

{% extends 'base.html' %}
{% load static %}

{% block title %}About{% endblock title %}

{% block content %}
<h1>About page</h1>
{% endblock content %}

contact.html

{% extends 'base.html' %}
{% load static %}

{% block title %}Contact{% endblock title %}

{% block content %}
<h1>Contact page</h1>
{% endblock content %}

Creating views function for each page

Now we will create python functions for each page to render it in our browser.

In your app folder open views.py file and add the code below

from django.shortcuts import render

# Home page
def index(request):
    return render(request, 'index.html', {})

# About page
def about(request):
    return render(request, 'about.html', {})

# Contact page
def contact(request):
    return render(request, 'contact.html', {})

Migrations

Now we have to make migration, for that type the following code in your terminal one by one.

py manage.py makemigrations

py manage.py migrate

Creating super-user for the project

Create a super user to access the project's dashboard using the command below, type it in your terminal.

python manage.py createsuperuser

This command will prompt you some things such as name, email, password. Input those appropriately and hit enter.

Now we are all set. This is the simplest way to create and setup a django project. Now you can take this simple project further by adding more pages, urls, functions and so on.

Conclusion

In this post I tried to breakdown each set to setup a django project in the simplest way. I hope this will help you. Feel free to add your thoughts in the comment box if I missed something.

Get my FREE eBook: A Comprehensive Guide to Setting Up Django Projects.
Starter Django Project: Download the Starter Django Project.

GitHub: https://github.com/ashish-makes
Linkedin: https://www.linkedin.com/in/ashish-makes/

DEV Community