How to Dockerize a Django and Vite app in a Single docker-compose Setup?

I have a Django project that connected with a Vite app, and I’m trying to set up Docker Compose to run both together. However, I’m facing issues while building and running the containers. I'm using vite for installing the tailwind and everything is working fine without docker, I already configure the django project in docker, but need to configure the frontend vite app which is called webapp, it's in the same directory as django.

Goal:

  • Django backend → runs on 8000
  • Vite frontend → runs on 3000 and connects to Django
  • Both services should run using docker-compose up --build

However, when I try to run docker-compose up --build, I get several erros, or even the docker will build without the vite working.

Issue: When running docker-compose up --build, I get various errors, including:

  • failed to solve: failed to read dockerfile: open Dockerfile: no such file or directory
  • Vite does not start properly in the container, even if Django works.

My file directory:

For_Testing_Purpose-1/
django_project
 ┣ __pycache__
 ┣ asgi.py
 ┣ settings.py
 ┣ urls.py
 ┣ wsgi.py
 ┗ __init__.py
homepage
 ┣ migrations
 ┣ __pycache__
 ┣ admin.py
 ┣ apps.py
 ┣ models.py
 ┣ tests.py
 ┣ urls.py
 ┣ views.py
 ┗ __init__.py
templates
 ┗ home.html
webapp
 ┣ dist
 ┃ ┣ .vite
 ┃ ┃ ┗ manifest.json
 ┃ ┣ assets
 ┃ ┃ ┗ tailwind-4t-_kGsy.css
 ┃ ┗ vite.svg
 ┣ node_modules
 ┣ public
 ┃ ┗ vite.svg
 ┣ src
 ┃ ┗ style.css
 ┣ .gitignore
 ┣ index.html
 ┣ package-lock.json
 ┣ package.json
 ┗ vite.config.ts
.dockerignore
db.sqlite3
docker-compose.yml
Dockerfile
manage.py
requirements.txt

I connect between django and vite app using django_vite and there's no problem with that it works perfect when start the vite and start the django app, but in docker, I'm struggling in that point.

I will provide my Dockerfile and docker-compose.yml without adding any nodejs or vite to it, because all of my attemps got failed:

Dockerfile:

# Pull base image
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/website_core
WORKDIR /code

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

# Copy project
COPY . .

Docker-compose.yml

services:
  web:
    build: .
    command: python /code/manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - 8000:8000
    depends_on:
      - db

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

volumes:
  postgres_data:

To run vite I go to the directory cd webapp then npm run dev

Of course there's something wrong with my way, but I'm trying to figure out that and I'm struggling!!

What I Have Tried From the Beginning:

  1. Verified Docker Installation:

  2. Ran docker run hello-world to check if Docker is working. Created and Built the Backend and Frontend Docker Images Individually:

  3. Tried Running Containers Separately:

  4. Checked docker-compose.yml and Directory Structure:

  5. Ran docker-compose up --build and Got Errors: Received failed to solve: failed to read dockerfile: open Dockerfile: no such file or directory. Also saw the warning about the version attribute being obsolete.

  6. Verified If Docker Can See the Files:

  7. Ensured I Am in the Correct Directory Before Running docker-compose up --build

  8. Updated Docker and Docker Compose:

Questions: How can I properly set up Vite and Django to communicate in Docker?

This is my repo if you want to take a look Github repo

Any guidance on this would be greatly appreciated! 🚀

Вернуться на верх