How can I dockerize a Django backend and Vite frontend in a single docker-compose setup?

Below is one way to set up both your Django backend and your Vite (Node.js) frontend as separate services in one Docker Compose project. The key points are:

1. Separate Build Contexts and Dockerfiles:
   Because both parts of your project use different base images (Python vs. Node), you should use a separate Dockerfile for the Vite app. In your case, keep the existing (Python) Dockerfile in the repo root for Django and add a new Dockerfile in the webapp directory for the Node/Vite app. This also helps avoid the “failed to read dockerfile” error (which typically means Docker can’t find a Dockerfile in a given build context).

2. Define Two Services in docker-compose.yml:
   Configure one service for Django (using the Python Dockerfile and running on port 8000) and one service for the Vite app (using its own Dockerfile and running on port 3000). Use proper build contexts (e.g., context: . versus context: ./webapp).

3. Expose the Correct Ports:
   Map port 8000 for Django and port 3000 for Vite. This lets the Vite app (running inside its container) talk to Django at the correct address, for example using Docker Compose service names (e.g., referencing “django” as the hostname from the Vite container).

Below are sample files to illustrate one approach:

---

Dockerfile for Django (in repo root)

You can keep your current Dockerfile for Python/Django (adjust paths as needed):

DOCKERFILECopied
# Pull base image for Django
FROM python:3.13-slim-bullseye

# Set environment variables
ENV PIP_DISABLE_PIP_VERSION_CHECK=1
ENV PYTHONDONTWRITEBYTECODE=1
ENV PYTHONUNBUFFERED=1

# Set work directory
WORKDIR /code

# Install dependencies
COPY ./requirements.txt .
RUN pip install -r requirements.txt

# Copy project
COPY . .

---

Dockerfile for Vite (in the webapp folder)

Create a new file named Dockerfile inside your webapp directory:

DOCKERFILECopied
# Use an official Node runtime as a parent image
FROM node:18-alpine

# Set working directory in the container
WORKDIR /app

# Copy package files and install dependencies
COPY package.json package-lock.json ./
RUN npm ci

# Copy the rest of the Vite app
COPY . .

# Expose port 3000 for the Vite dev server
EXPOSE 3000

# Start the Vite development server
CMD ["npm", "run", "dev"]

---

docker-compose.yml

Update your docker-compose.yml to include both the Django and webapp services. For example:

YAMLCopied
version: "3.8"

services:
  django:
    build:
      context: .
      dockerfile: Dockerfile  # Django Dockerfile in the root
    command: python /code/manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"
    depends_on:
      - db

  webapp:
    build:
      context: ./webapp
      dockerfile: Dockerfile  # Vite Dockerfile in the webapp folder
    command: npm run dev
    volumes:
      - ./webapp:/app
    ports:
      - "3000:3000"
    depends_on:
      - django  # Optional: if the webapp needs Django up first

  db:
    image: postgres:15
    volumes:
      - postgres_data:/var/lib/postgresql/data/
    environment:
      - POSTGRES_HOST_AUTH_METHOD=trust

volumes:
  postgres_data:

---

Additional Tips

• Docker Build Context:
  Make sure you run docker-compose up --build from the directory containing your docker-compose.yml so that Docker finds the files in the correct context. The error “failed to read dockerfile” is typically due to Docker looking in the wrong directory for the Dockerfile.

• Service to Service Communication:
  In your Vite app (or the Django settings), refer to the Django service by its Compose service name (here it is “django”) instead of localhost. For example, if your Django backend needs to be referenced from the frontend, you might use an environment variable like BACKEND_URL=http://django:8000.

• Hot Reloading & Volumes:
  Mounting your project into the containers (as shown in the volumes sections) allows for live reloading. However, be cautious if installing dependencies inside the container versus locally—they must stay in sync.

Following these steps should get your Docker Compose setup building and running both services so that the Django backend listens on port 8000 and the Vite frontend on port 3000. Give it a try and adjust paths or commands as needed for your specific project requirements.