How to Dockerize Django and React project

Overview

Hey there! In this tutorial you will see how you can easily setup your Django and React.js project inside docker containers for development. You will also learn how you can run debugger for your Django server inside docker.

Prerequisites
Project Setup
Dockerizing
Debugging Django server
Conclusion

Prerequisites

This tutorial is not about learning Docker in any ways but it does assume that you are a little familiar with docker concepts and terminologies. Before moving ahead you must install docker and docker-compose on your machine.

At the point of writing this tutorial I'm using docker v20.10.17 and doccker-compose v1.29.2.

Project Setup

Setting up your project can be as per your own preference, but here we are keeping it really simple with following versions and structure.

Environment

Django v3.2.13 python v3.6.6 React v18.2.0 Node v18.0.0

Project Structure

djang-react-docker-app
    - client
      - node-modules
      - ...
      - package-lock.json
      - package.json
      - .dockerignore
      - Dockerfile
    - server
      - ...
      - requirements.txt
      - venv
      - Dockerfile
    - docker-compose.yml

Dockerizing

After creating the above project structure, you can now start writing your docker images for both client and server.

client/Dockerfile

FROM node:18
WORKDIR /app/client
COPY package.json /app/client
COPY package-lock.json /app/client
RUN npm install --silent
EXPOSE 3000
CMD [ "npm", "start"]

server/Dockerfile

FROM python:3.6.6
ENV PYTHONDONTWRITEBYTECODE=1
ENV PYTHONUNBUFFERED=1
WORKDIR /app/server
COPY requirements.txt /app/server
RUN pip install -r requirements.txt
EXPOSE 8000
CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]

Note: In both the docker images we are not copying the whole code inside docker wroking directory because we will leverage docker volumes to store our code.

docker-compose.yml

version: "3.9"

services:
  client:
    build: ./client
    command: ["npm", "start"]
    ports:
      - "3000:3000"
    volumes:
      - ./client:/app/client
    depends_on:
      - server
  server:
    build: ./server
    command: ["python3", "manage.py", "runserver", "0.0.0.0:8000"]
    volumes:
      - ./server:/app/server
    ports:
      - "8000:8000"
      - "8001:8001"

Debugging Django server

For debugging your django project inside docker container you need to install debugpy==1.5.1 package in your venv. After that follow the below steps to run debugger in vscode.

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Run Django",
      "type": "python",
      "request": "attach",
      "pathMappings": [
        {
          "localRoot": "${workspaceFolder}/",
          "remoteRoot": "/app/server"
        }
      ],
      "port": 8001,
      "host": "localhost"
    }
  ]
}

server/manage.py

#!/usr/bin/env python
"""Django's command-line utility for administrative tasks."""
import os
import sys


def main():
    """Run administrative tasks."""
    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'server.settings')

    # debugging django server
    from django.conf import settings

    if settings.DEBUG:
        if os.environ.get('RUN_MAIN') or os.environ.get('WERKZEUG_RUN_MAIN'):
            import debugpy
            debugpy.listen(("0.0.0.0", 8001))
            print('Attached!')

    try:
        from django.core.management import execute_from_command_line
    except ImportError as exc:
        raise ImportError(
            "Couldn't import Django. Are you sure it's installed and "
            "available on your PYTHONPATH environment variable? Did you "
            "forget to activate a virtual environment?"
        ) from exc
    execute_from_command_line(sys.argv)


if __name__ == '__main__':
    main()

Awesome! The last step is to spin up your django containers by running sudo docker-compose up -d (in your root project path).

Tips:

To access your docker container run sudo docker exec -it your_container_id bash. This way you can install packages from inside docker into your project.
Your changes to your project files will always reflect while running inside docker due to volumes.

Conclusion

In this tutorial we learnt how you can easily setup your development environment inside docker containers. This can be helpful if you want to quickly onboard new team members in your team and get them started. Let me know if you faced any problem while setting this up, I'll surely reply.

If you find this usefull then please share it with your friends and colleagues and do drop a like on this blog. See ya!