ADE Construction

I want share how I build up a web application with Typescript React(frontend) and Django(backend) in Docker, for coders in the world and of course myself a half year later.

macOS 10.15.2
Visual Studio Code 1.49.3

Terminal

~$ mkdir new-app
~$ cd new-app
~$ mkdir backend frontend
~$ touch docker-compose.yml
~$ cd backend
~$ touch Dockerfile requirements.txt
~$ cd ../frontend
~$ touch Dockerfile

~$ code new-app # open VSCode (and start editing files)

VSCode

docker-compose.yml

version: '3'
services:
 backend:
   container_name: new-app-backend
   build:
     context: ./backend
     dockerfile: Dockerfile
   command: sh -c "cd /backend/main && python3 manage.py runserver 0.0.0.0:8000"
   ports:
     - 8000:8000
   volumes:
     - ./backend:/backend
   depends_on:
     - db
     - frontend
   tty: true
 db:
   container_name: new-app-db
   image: mysql:5.7
   restart: always
   environment:
     MYSQL_DATABASE: new-app
     MYSQL_USER: root
     MYSQL_PASSWORD: password
     MYSQL_ALLOW_EMPTY_PASSWORD: 'yes'
   volumes:
     - ./mysql:/var/lib/mysql
   ports:
     - 3306:3306
 frontend:
    container_name: new-app-frontend
    build:
      context: ./frontend
      dockerfile: Dockerfile
    command: sh -c "cd /frontend/main && yarn (start)"
    ports:
     - "3000:3000"
    volumes:
     - ./frontend:/frontend
    tty: true

backend > Dockerfile

FROM python:3.9
ENV PYTHONUNBUFFERED 1
RUN mkdir /backend
WORKDIR /backend
ADD ./requirements.txt .
RUN pip3 install -r requirements.txt
EXPOSE 8000

frontend > Dockerfile

FROM node:13.13.0
RUN mkdir /frontend
WORKDIR /frontend
EXPOSE 3000

backend > requirements.txt

Django>=3.0.5
mysqlclient==1.4.6
django-filter==2.2.0
Pillow==7.1.1
djangorestframework==3.11.0
django-cors-headers==3.2.1

Terminal

• building images

~/new-app$ docker-compose build

• making Django & React applications

1. Django

~/new-app$ cd backend
~/new-app/backend$ django-admin startproject main　

1. React

~/new-app$ cd ../frontend
~/new-app/frontend$ npx create-react-app main --template typescript 

VSCode

• editing database setting

backend > main > settings.py

# ALLOWED_HOSTS = []
ALLOWED_HOSTS = ['localhost']

DATABASES = {
    #'default': {
    #    'ENGINE': 'django.db.backends.sqlite3',
    #    'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    #}
   'default': {
   'ENGINE': 'django.db.backends.mysql',
   'NAME': 'new-app',
   'USER': 'root',
   'HOST': 'new-app-db',
   'POST': 3306,
   'OPTIONS': {
                'charset': 'utf8mb4',
              },
   }
}

• internationalization(optional; the case you're in Tokyo)

# https://docs.djangoproject.com/en/3.0/topics/i18n/

LANGUAGE_CODE = 'ja'  

TIME_ZONE = 'Asia/Tokyo'

Terminal

~/new-app$ docker-compose up