DEV Community

Cover image for 🛠️ Scalable Django + Frontend Project Setup
Kushal Yadav
Kushal Yadav

Posted on

🛠️ Scalable Django + Frontend Project Setup

#django #webdev #backend #frontend

🛠️ Scalable Django + Frontend Project Setup

Complete project directory GitHub Link

This guide helps you set up a decoupled Django REST backend and a separate frontend directory using vanilla JavaScript, allowing for clean team collaboration.

📁 Project Structure 

project_name/
├── backend/         ← Django project and API app
├── frontend/        ← HTML/CSS/JS static frontend
└── .venv/           ← Python virtual environment
Enter fullscreen mode Exit fullscreen mode

🔢 Step 1: Set Up the Project Root 

mkdir project_name
cd project_name
Enter fullscreen mode Exit fullscreen mode

🔢 Step 2: Create a Virtual Environment 

python -m venv .venv

# For Linux/macOS:
source .venv/bin/activate

# For Windows CMD:
.venv\Scripts\activate
Enter fullscreen mode Exit fullscreen mode

🔢 Step 3: Install Required Packages 

pip install djangorestframework django-cors-headers
pip freeze > requirements.txt
Enter fullscreen mode Exit fullscreen mode

📝 django-cors-headers allows your frontend and backend to communicate when served from different origins.

🔢 Step 4: Create the Frontend and Backend Structure 

mkdir frontend
django-admin startproject backend
cd backend
python manage.py startapp api
Enter fullscreen mode Exit fullscreen mode

🔢 Step 5: Configure Django Settings

Add the following to backend/settings.py:

INSTALLED_APPS = [
    ...
    'rest_framework',
    'corsheaders',
    'api',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ALLOW_ALL_ORIGINS = True  # For development only
Enter fullscreen mode Exit fullscreen mode

🔐 In production, use:

CORS_ALLOWED_ORIGINS = ["https://your-frontend-domain.com"]

🔢 Step 6: Create a Sample API

📄 backend/api/views.py 

from rest_framework.response import Response
from rest_framework.decorators import api_view

@api_view(['GET'])
def hello_world(request):
    return Response({"message": "Hello from Django API!"})
Enter fullscreen mode Exit fullscreen mode

📄 backend/api/urls.py 

from django.urls import path
from .views import hello_world

urlpatterns = [
    path('hello/', hello_world),
]
Enter fullscreen mode Exit fullscreen mode

📄 backend/urls.py 

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('api.urls')),
]
Enter fullscreen mode Exit fullscreen mode

🔢 Step 7: Run the Backend Server 

python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

If you see a message about unapplied migrations, run:

python manage.py migrate
python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

Visit: http://127.0.0.1:8000/api/hello/

✅ You should see something like:

{ "message": "Hello from Django API!" }

(Image 1: backend working properly)
working Django Backend

🔢 Step 8: Set Up the Frontend

📄 frontend/index.html 

<!DOCTYPE html>
<html>
<head>
  <title>Frontend</title>
</head>
<body>
  <h1 id="message">Loading...</h1>
  <script src="main.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

📄 frontend/main.js 

fetch("http://127.0.0.1:8000/api/hello/")
  .then(res => res.json())
  .then(data => {
    document.getElementById("message").textContent = data.message;
  })
  .catch(err => {
    document.getElementById("message").textContent = "Error connecting to backend";
    console.error(err);
  });
Enter fullscreen mode Exit fullscreen mode

▶️ Serve the Frontend Locally 

cd frontend
python -m http.server 5173
Enter fullscreen mode Exit fullscreen mode

Visit: http://localhost:5173

✅ You should see your message fetched from Django’s API.

frontend working properly integrated with Django

✅ Final Result

Top comments (0)