From 74317904bd2d79123c421c49efd67cb36df9bc3c Mon Sep 17 00:00:00 2001
From: Guillaume Lours <guillaume.lours@docker.com>
Date: Wed, 13 Jul 2022 10:15:53 +0200
Subject: [PATCH] add configuration to use react-express-mongo sample with
 Docker Dev Environments feature (#271)

Signed-off-by: Guillaume Lours <guillaume.lours@docker.com>
---
 .../.docker/docker-compose.yaml               | 43 +++++++++++++++++++
 react-express-mongodb/backend/Dockerfile      | 19 +++++++-
 react-express-mongodb/compose.yaml            |  8 +++-
 react-express-mongodb/frontend/Dockerfile     | 19 +++++++-
 react-express-mysql/README.md                 | 11 +++++
 5 files changed, 96 insertions(+), 4 deletions(-)
 create mode 100644 react-express-mongodb/.docker/docker-compose.yaml

diff --git a/react-express-mongodb/.docker/docker-compose.yaml b/react-express-mongodb/.docker/docker-compose.yaml
new file mode 100644
index 0000000..0adf162
--- /dev/null
+++ b/react-express-mongodb/.docker/docker-compose.yaml
@@ -0,0 +1,43 @@
+services:
+  frontend:
+    build:
+      context: frontend
+      target: dev-envs
+    ports:
+      - 3000:3000
+    stdin_open: true
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    restart: always
+    networks:
+      - react-express
+    depends_on:
+      - backend
+
+  backend:
+    restart: always
+    build:
+      context: backend
+      target: dev-envs
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    depends_on:
+      - mongo
+    networks:
+      - express-mongo
+      - react-express
+    expose: 
+      - 3000
+  mongo:
+    container_name: mongo
+    restart: always
+    image: mongo:4.2.0
+    volumes:
+      - ./data:/data/db
+    networks:
+      - express-mongo
+    expose:
+      - 27017
+networks:
+  react-express:
+  express-mongo:
diff --git a/react-express-mongodb/backend/Dockerfile b/react-express-mongodb/backend/Dockerfile
index 2b39211..a4767ea 100644
--- a/react-express-mongodb/backend/Dockerfile
+++ b/react-express-mongodb/backend/Dockerfile
@@ -1,4 +1,6 @@
-FROM node:lts-buster-slim
+# syntax=docker/dockerfile:1.4
+
+FROM node:lts-buster-slim AS development
 
 # Create app directory
 WORKDIR /usr/src/app
@@ -12,3 +14,18 @@ COPY . /usr/src/app
 EXPOSE 3000
 
 CMD [ "npm", "run", "dev" ]
+
+FROM development as dev-envs
+RUN <<EOF
+apt-get update
+apt-get install -y --no-install-recommends git
+EOF
+
+RUN <<EOF
+useradd -s /bin/bash -m vscode
+groupadd docker
+usermod -aG docker vscode
+EOF
+# install Docker tools (cli, buildx, compose)
+COPY --from=gloursdocker/docker / /
+CMD [ "npm", "run", "dev" ]
\ No newline at end of file
diff --git a/react-express-mongodb/compose.yaml b/react-express-mongodb/compose.yaml
index 652294e..7c591fb 100644
--- a/react-express-mongodb/compose.yaml
+++ b/react-express-mongodb/compose.yaml
@@ -1,6 +1,8 @@
 services:
   frontend:
-    build: frontend
+    build:
+      context: frontend
+      target: development
     ports:
       - 3000:3000
     stdin_open: true
@@ -17,7 +19,9 @@ services:
   backend:
     container_name: backend
     restart: always
-    build: backend
+    build:
+      context: backend
+      target: development
     volumes:
       - ./backend:/usr/src/app
       - /usr/src/app/node_modules
diff --git a/react-express-mongodb/frontend/Dockerfile b/react-express-mongodb/frontend/Dockerfile
index 476a385..d36d44b 100644
--- a/react-express-mongodb/frontend/Dockerfile
+++ b/react-express-mongodb/frontend/Dockerfile
@@ -1,5 +1,7 @@
+# syntax=docker/dockerfile:1.4
+
 # Create image based on the official Node image from dockerhub
-FROM node:lts-buster
+FROM node:lts-buster AS development
 
 # Create app directory
 WORKDIR /usr/src/app
@@ -22,3 +24,18 @@ EXPOSE 3000
 
 # Serve the app
 CMD ["npm", "start"]
+
+FROM development as dev-envs
+RUN <<EOF
+apt-get update
+apt-get install -y --no-install-recommends git
+EOF
+
+RUN <<EOF
+useradd -s /bin/bash -m vscode
+groupadd docker
+usermod -aG docker vscode
+EOF
+# install Docker tools (cli, buildx, compose)
+COPY --from=gloursdocker/docker / /
+CMD [ "npm", "start" ]
diff --git a/react-express-mysql/README.md b/react-express-mysql/README.md
index 66fad57..3db38a9 100644
--- a/react-express-mysql/README.md
+++ b/react-express-mysql/README.md
@@ -97,3 +97,14 @@ Removing react-express-mysql_db_1       ... done
 Removing network react-express-mysql_default
 
 ```
+
+## Use with Docker Development Environments
+
+You can use this sample with the Dev Environments feature of Docker Desktop.
+
+![Screenshot of creating a Dev Environment in Docker Desktop](../dev-envs.png)
+
+To develop directly on the services inside containers, use the HTTPS Git url of the sample:
+```
+https://github.com/docker/awesome-compose/tree/master/react-express-mongodb
+```