From 3b28a85961ebe385a9f5e2e6549ec63fb6caccfa Mon Sep 17 00:00:00 2001
From: Rpsl <gmail@rpsl.info>
Date: Thu, 29 Jul 2021 12:26:05 +0300
Subject: [PATCH] Added local dev environment via separated docker containers

---
 Dockerfile-dev-backend  | 18 ++++++++++++++++++
 Dockerfile-dev-frontend | 10 ++++++++++
 Makefile                | 16 ++++++++++++++++
 README.md               | 22 +++++++++++++++++-----
 docker-compose.yml      | 29 +++++++++++++++++++++++++++++
 5 files changed, 90 insertions(+), 5 deletions(-)
 create mode 100644 Dockerfile-dev-backend
 create mode 100644 Dockerfile-dev-frontend
 create mode 100644 Makefile
 create mode 100644 docker-compose.yml

diff --git a/Dockerfile-dev-backend b/Dockerfile-dev-backend
new file mode 100644
index 00000000..697e2d13
--- /dev/null
+++ b/Dockerfile-dev-backend
@@ -0,0 +1,18 @@
+FROM python:3.8-alpine
+
+COPY . /app
+
+WORKDIR /app
+
+RUN apk add --update ffmpeg && \
+    apk add --update --virtual .build-deps gcc musl-dev && \
+    pip install --no-cache-dir pipenv && \
+    pipenv install --system --deploy --clear && \
+    pip uninstall pipenv -y && \
+    apk del .build-deps && \
+    rm -rf /var/cache/apk/*
+
+ENV DOWNLOAD_DIR /downloads
+VOLUME /downloads
+EXPOSE 8081
+CMD ["python3", "app/main.py"]
diff --git a/Dockerfile-dev-frontend b/Dockerfile-dev-frontend
new file mode 100644
index 00000000..613cc55f
--- /dev/null
+++ b/Dockerfile-dev-frontend
@@ -0,0 +1,10 @@
+FROM node:16-alpine
+
+COPY ./ui /app
+
+WORKDIR /app
+
+RUN npm ci && \
+    node_modules/.bin/ng build
+
+CMD ["node_modules/.bin/ng", "build", "--watch"]
\ No newline at end of file
diff --git a/Makefile b/Makefile
new file mode 100644
index 00000000..31a6cd86
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,16 @@
+.PHONY: serve-dev build build-dev attach-dev-frontend attach-dev-backend
+
+serve-dev:
+	docker-compose up
+
+attach-dev-frontend:
+	docker exec -it -t metube-dev-frontend /bin/sh
+
+attach-dev-backend:
+	docker exec -it -t metube-dev-backend /bin/sh
+
+build-dev:
+	docker-compose build
+
+build:
+	docker build -t metube .
diff --git a/README.md b/README.md
index 77a8f8a7..6b9cf528 100644
--- a/README.md
+++ b/README.md
@@ -75,6 +75,23 @@ If you're using the [linuxserver/swag](https://docs.linuxserver.io/general/swag)
 
 ## Build and run locally
 
+A Docker image can be built locally (it will build the UI too):
+
+```bash
+make build
+```
+
+### Run dev mode with local docker
+
+```bash
+make serve-dev
+```
+It will launch two containers: `metube-dev-frontend` and `metube-dev-backend`. Frontend will be started in watching mode but backend need to be restarted after code changes - `docker restart metube-dev-backend`
+
+After first start `metube-dev-backend` may crashed with error about nonexistent files - it's normal, just wait while frontend will be build and restart backend.
+
+### Run without docker
+
 Make sure you have node.js and Python 3.8 installed.
 
 ```bash
@@ -90,11 +107,6 @@ pipenv install
 pipenv run python3 app/main.py
 ```
 
-A Docker image can be built locally (it will build the UI too):
-
-```bash
-docker build -t metube .
-```
 
 ## Development notes
 
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 00000000..bcab67db
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,29 @@
+version: "3"
+
+services:
+    backend:
+        build:
+            context: .
+            dockerfile: Dockerfile-dev-backend
+        container_name: metube-dev-backend
+        image: metube-dev-backend
+        expose:
+            - 8081
+        ports:
+            - "8081:8081"
+        links:
+            - frontend
+        volumes:
+            - ./ui:/app/ui
+            - ./app:/app/app
+
+    frontend:
+        build:
+            context: .
+            dockerfile: Dockerfile-dev-frontend
+        container_name: metube-dev-frontend
+        image: metube-dev-frontend
+        expose:
+            - 4200
+        volumes:
+            - ./ui:/app