From 8faad7fad2257b9a68bc9890d45d6b9a57b80a47 Mon Sep 17 00:00:00 2001
From: ba_tno <bachtijar.ashari@tno.nl>
Date: Fri, 23 Apr 2021 12:29:37 +0200
Subject: [PATCH 1/2] Added Dockerfile and docker-compose

---
 docker-compose.yml | 10 ++++++++++
 docker/Dockerfile  | 18 ++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 docker-compose.yml
 create mode 100644 docker/Dockerfile

diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 00000000..67838fa8
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,10 @@
+version: "3.8"
+services:
+  graphviz-editor:
+    build:
+      context: ./docker
+      dockerfile: Dockerfile
+    container_name: graphviz-editor
+    ports:
+      - "5000:5000"
+    restart: always
\ No newline at end of file
diff --git a/docker/Dockerfile b/docker/Dockerfile
new file mode 100644
index 00000000..cf87efd5
--- /dev/null
+++ b/docker/Dockerfile
@@ -0,0 +1,18 @@
+FROM node:15.14.0-buster-slim
+
+# Install git and install make
+RUN apt update 
+RUN apt install git -y
+RUN apt install make -y
+
+# Clone graphviz visual editor
+RUN git clone --depth 1 https://github.com/magjac/graphviz-visual-editor
+
+WORKDIR /graphviz-visual-editor
+
+RUN npm install
+RUN make
+RUN npm run build
+RUN npm install -g serve
+
+CMD ["serve", "-s", "build"]
\ No newline at end of file

From d6d10af54d5cb80f21bec529ecd3ce961ff98d4e Mon Sep 17 00:00:00 2001
From: ba-tno <52008464+ba-tno@users.noreply.github.com>
Date: Thu, 24 Feb 2022 01:39:54 +0100
Subject: [PATCH 2/2] Update README with docker instructions. Reduce docker
 image size. Removed trailing whitespaces

---
 README.md          | 11 +++++++++++
 docker-compose.yml |  6 +++---
 docker/Dockerfile  | 27 +++++++++++++++++++++------
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 40f09227..337de596 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,17 @@ npm run build
 
 Learn more from the Create React App [README](https://github.com/facebook/create-react-app#npm-run-build-or-yarn-build) and [User Guide](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment).
 
+## Docker ##
+To run this on a system without `make` and `node` you can use Docker.
+The provided `docker-compose.yml` file builds a Docker image from the latest master commit of the current repository, starts the server and exposes port 3000.
+
+To use it:
+
+```
+git clone --depth 1 https://github.com/magjac/graphviz-visual-editor
+cd graphviz-visual-editor
+docker-compose up -d
+```
 ## Implemented Features ##
 
 * Rendering of a graph from a textual [DOT](https://www.graphviz.org/doc/info/lang.html) representation.
diff --git a/docker-compose.yml b/docker-compose.yml
index 67838fa8..66a4df7c 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,4 +1,4 @@
-version: "3.8"
+version: "3"
 services:
   graphviz-editor:
     build:
@@ -6,5 +6,5 @@ services:
       dockerfile: Dockerfile
     container_name: graphviz-editor
     ports:
-      - "5000:5000"
-    restart: always
\ No newline at end of file
+      - "3000:3000"
+    restart: always
diff --git a/docker/Dockerfile b/docker/Dockerfile
index cf87efd5..df859943 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -1,18 +1,33 @@
-FROM node:15.14.0-buster-slim
+# Multi-stage build to reduce final image size
+FROM node:lts-alpine3.15 as BUILD_IMAGE
 
-# Install git and install make
-RUN apt update 
-RUN apt install git -y
-RUN apt install make -y
+# Install git and make
+RUN apk update
+RUN apk add git
+RUN apk add make
 
 # Clone graphviz visual editor
 RUN git clone --depth 1 https://github.com/magjac/graphviz-visual-editor
 
 WORKDIR /graphviz-visual-editor
 
+# Install and make the dependencies
 RUN npm install
 RUN make
 RUN npm run build
+
+# Reduce the image size: remove development dependencies
+RUN npm prune --production
+
+# The stage that actually runs the application
+FROM node:lts-alpine3.15
+
+WORKDIR /graphviz-visual-editor
+
+# Copy the built artifacts from the build image
+COPY --from=BUILD_IMAGE /graphviz-visual-editor/build ./build
+COPY --from=BUILD_IMAGE /graphviz-visual-editor/node_modules ./node_modules
+
 RUN npm install -g serve
 
-CMD ["serve", "-s", "build"]
\ No newline at end of file
+CMD ["serve", "-s", "build"]