How to Setup your First Django Project | The Best and Simplest Way
Tags: django, python, webdev, tutorial
Published: 2024-01-12 21:19:35

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](https://github.com/ashish-makes/django-setup/files/13924044/Professionally.setup.Django.project.pdf)**

![A-Comprehensive-Guide-to-Setting-Up-Django-Projects](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ypc92xqibdjtxbhdv3al.png)

## 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
```

![creating-virtual-enviornment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sw9v9ifksldq0cbhxg8v.png)


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
```

![activating-virtual-enviornment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oo19n9b3h10fk9k5ubmj.png)

 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
```

![installing-django](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ps7ni5dr9da28mehpqri.png)


### 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>
```

![creating-django-project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gt6kxpmlzq55l4mh57ka.png)

**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>
```

![creating-django-app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/luepom40eydpjemcph31.png)

**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.

![static-folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9r3v2vdqiw9p1zb6uucq.png)

- 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.

![tmplates-folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ps64s6mglhb7cxfq5wdt.png)

- 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.

![updating-settings-py](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9dqmf8hf0o3gubkxq1m.png)

```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0judi9ylh0acfdwrc8k.png)

```
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

![static](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njn9wqvcz9udndzadj2b.png)

```
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.

![running-migrations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7016sx52oy3ksfx3inak.png)

```
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.

![creating-super-user](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0uztgbeew9dk1f427n6c.png)

```
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](https://github.com/ashish-makes/django-setup/files/13924044/Professionally.setup.Django.project.pdf).**
**Starter Django Project: [Download the Starter Django Project.](https://github.com/ashish-makes/django-setup)**

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