In this article, I’ll walk you through how I set up my Django project with two apps from the terminal to running the project, all the way to pushing it to GitHub. If you're new to Django, this guide might come in handy.
1. Setting Up the Virtual Environment.
First things first, I opened my Git Bash terminal and created a virtual environment to keep my project dependencies isolated:
python -m venv env
To activate the environment:
source env/Scripts/activate
2.Creating the Django Project.
Once the environment was active, I created my Django project using:
django-admin startproject django_project
cd django_project
3.Creating the 2 apps.
Inside the project, I created two apps and called them app1 and app2:
python manage.py startapp app1
python manage.py startapp app2
4.Opening the project in VScode.
Still in Git Bash, I opened the project in VS Code with:
code .
From here, I explored the structure of the project and both apps.
5.Registering the apps in settings.
Then, I made sure to add both apps to theINSTALLED_APPS
list in settings.py
:
INSTALLED_APPS = [
...,
'app1',
'app2',
]
6.Configuring URLs.
In the project’s urls.py
file, I imported include
and set up paths to both apps:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('app1/', include('app1.urls')),
path('app2/', include('app2.urls')),
]
7. Setting Up Views and URLs for Each App.
For app1
:
In app1/views.py
:
from django.shortcuts import render
def home(request):
return render(request, 'home.html')
def about(request):
return render(request, 'about.html')
In app1/urls.py
:
from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name='home'),
path('about/', views.about, name='about'),
]
For app2
:
In app2/views.py
:
from django.shortcuts import render
def contact(request):
return render(request, 'contact.html')
def services(request):
return render(request, 'services.html')
Inapp2/urls.py
:
From django.urls import path
from . import views
urlpatterns = [
path('contact/', views.contact, name='contact'),
path('services/', views.services, name='services'),
]
8.Creating the Templates Folder.
At the root of the project, I created a templates folder to hold my HTML files:
django_project/
├── templates/
│ ├── home.html
│ ├── about.html
│ ├── contact.html
│ ├── services.html
Inside each file, I added some basic HTML to test:
home.html
{% block content %}
<p>Welcome to my django project.</p>
{% endblock %}
about.html
{% block content %}
<p>.</p>Welcome to our learning project. This project is built to help you understand how Django works with multiple apps and templates.
{% endblock %}
</body>
<style>
body {
background-color: chocolate;
}
contact.html
% block content %}
<h1>Contact Us</h1>
<p>If you have any questions, feel free to reach out to us!</p>
<form method="post">
{% csrf_token %}
<label for="name">Your Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Your Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="5" required></textarea><br><br>
<button type="submit">Send</button>
</form>
{% endblock %}
</body>
<Style>
body {
font-family: Arial, sans-serif;
margin: 40px;
background-color: #f2f2f2;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #555;
font-size: 16px;
text-align: center;
}
ul {
list-style-type: square;
padding-left: 20px;
max-width: 600px;
margin: 20px auto;
background: #fff;
padding: 20px;
border-radius: 8px;
}
li {
padding: 8px 0;
color: #333;
}
form {
max-width: 400px;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 8px;
}
label {
font-weight: bold;
display: block;
margin-top: 10px;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
margin-top: 15px;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #0056b3;
}
</Style>
services.html
{% block content %}
<h1>Our Services</h1>
<ul>
<li>Website Development Tutorials</li>
<li>Django Learning Resources</li>
<li>Practical Project Building</li>
<li>Step-by-Step Guidance</li>
</ul>
<p>We help you build and understand Django projects through real-world examples.</p>
{% endblock %}
9.Connecting Django to the Templates Folder.
In settings.py
, I made sure Django knows where to look for templates by updating the TEMPLATES setting:
TEMPLATES = [
{
...,
'DIRS': [BASE_DIR / 'templates'],
...
},
]
10.Running the Server.
In the terminal:
python manage.py runserver
I copied the local link (http://127.0.0.1:8000/) and pasted it into my browser. Visiting the correct URLs showed the HTML templates I had created:
%http://127.0.0.1:8000/app1/% → Home page from App 1
%http://127.0.0.1:8000/app1/about/% → About page from App 1
%http://127.0.0.1:8000/app2/contact/% → Contact page from App 2
%http://127.0.0.1:8000/app2/services/%→ Services page from App 2
11 Pushing the Project to GitHub.
To share or back up the project, I pushed it to GitHub:
Created a new repository on Github and named it django_project
In the terminal:
git init
git add .
git commit -m "Initial commit"
git remote add origin <your_repo_link>
git push -u origin master
You can copy and share the repo link with others as needed.%https://github.com/yvonne20865/django_project%
here's my link...
*Final Thoughts *
And that’s how I set up my Django project with two apps, HTML templates, proper URL routing, and pushed it to GitHub. The process is simple once you break it down, and using templates makes your project look and feel like a real website from the start.
Hope this helps! Let me know if you have any questions or tips from your own setup experience.
Top comments (0)