How to add Angular project to Django and Docker

Question

I would like to add Angular 4 project to Docker with Django project? My structure of files look in this way: DockerContainer :

Backend                 
Dockerfile              
Frontend                
docker-compose.yml      
requirements.txt

I would like to create Angular 4 project in Frontend directory. I can do this using ng new my-app but what should I do next? This is my docker-compose.yml :

version: '3'

services:
  db:
    image: postgres
  django:
    build: .
    command: python3 Backend/manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"
    depends_on:
      - db

Dockerfile :

FROM python:3.6.1
ENV PYTHONUNBUFFERED 1
RUN mkdir /code
WORKDIR /code
ADD requirements.txt /code/
RUN pip install -r requirements.txt
ADD . /code/

At the moment structure of my files in main directory with your suggestions look in this way:

├── Backend
│   ├── AI
│   │   ├── __init__.py
│   │   ├── __pycache__
│   │   │   ├── __init__.cpython-36.pyc
│   │   │   ├── settings.cpython-36.pyc
│   │   │   ├── urls.cpython-36.pyc
│   │   │   └── wsgi.cpython-36.pyc
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   └── manage.py
├── Dockerfile
├── Frontend
│   └── angularProject
│       └── all files in my angular project 
├── docker-compose.yml
└── requirements.txt

Answer 1

Angular 4 projects are just HTML and JavaScript (from what I understand). Generally, we would build the application and then serve it from a web server (such as nginx for Apache HTTPD). I decided to make an example of an Angular 4 Docker image based on a recent Docker feature for multi-stage builds.

The example is at https://gist.github.com/andyshinn/de65b71a7b50a0e5a73732c69f1a3d35 . Assuming your Angular 4 application code root was at Frontend , you would copy this Dockerfile and nginx.conf to the Frontend folder. Then, you can add a new service to your docker-compose.yml to build and run it. Here is an example of that addition:

version: '3'

services:
  db:
    image: postgres
  django:
    build: .
    command: python3 Backend/manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"
    depends_on:
      - db
  angular:
    build: Frontend/angularProject
    ports:
      - "8010:80"
    depends_on:
      - django