From 1a1cfca6c44ea11e69c8fb1deb29f837e1bf4555 Mon Sep 17 00:00:00 2001
From: Guillaume Lours <guillaume.lours@docker.com>
Date: Wed, 29 Jun 2022 11:42:39 +0200
Subject: [PATCH] add configuration to use react-java-mysql sample with Docker
 Dev Environments feature

Signed-off-by: Guillaume Lours <guillaume.lours@docker.com>
---
 react-java-mysql/.docker/docker-compose.yaml | 61 ++++++++++++++++++++
 react-java-mysql/README.md                   |  8 +++
 react-java-mysql/backend/Dockerfile          | 26 ++++++++-
 react-java-mysql/backend/pom.xml             |  4 --
 react-java-mysql/frontend/Dockerfile         | 21 ++++++-
 5 files changed, 111 insertions(+), 9 deletions(-)
 create mode 100644 react-java-mysql/.docker/docker-compose.yaml

diff --git a/react-java-mysql/.docker/docker-compose.yaml b/react-java-mysql/.docker/docker-compose.yaml
new file mode 100644
index 0000000..9e9c7b1
--- /dev/null
+++ b/react-java-mysql/.docker/docker-compose.yaml
@@ -0,0 +1,61 @@
+services:
+  backend:
+    build:
+      context: backend
+      target: dev-envs
+    restart: always
+    secrets:
+      - db-password
+    environment:
+      MYSQL_HOST: db
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    networks:
+      - react-spring
+      - spring-mysql
+    depends_on:
+      db:
+        condition: service_healthy
+  db:
+    # We use a mariadb image which supports both amd64 & arm64 architecture
+    image: mariadb:10.6.4-focal
+    # If you really want to use MySQL, uncomment the following line
+    #image: mysql:8.0.19
+    environment:
+      - MYSQL_DATABASE=example
+      - MYSQL_ROOT_PASSWORD_FILE=/run/secrets/db-password
+    restart: always
+    healthcheck:
+      test: ["CMD", "mysqladmin", "ping", "-h", "127.0.0.1", "--silent"]
+      interval: 3s
+      retries: 5
+      start_period: 30s
+    secrets:
+      - db-password
+    volumes:
+      - db-data:/var/lib/mysql
+    networks:
+      - spring-mysql
+  frontend:
+    build:
+      context: frontend
+      target: dev-envs
+    ports:
+      - 3000:3000
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    networks:
+      - react-spring
+    depends_on:
+      - backend
+    expose:
+      - 3306
+      - 33060
+volumes:
+  db-data: {}
+secrets:
+  db-password:
+    file: db/password.txt
+networks:
+  react-spring: {}
+  spring-mysql: {}
diff --git a/react-java-mysql/README.md b/react-java-mysql/README.md
index 0a5acb8..741166a 100644
--- a/react-java-mysql/README.md
+++ b/react-java-mysql/README.md
@@ -83,3 +83,11 @@ Removing react-java-mysql_frontend_1 ... done
 Removing react-java-mysql_db_1       ... done
 Removing network react-java-mysql_default
 ```
+
+## Use with Docker Development Environments
+
+You can use this sample with the Dev Environments feature of Docker Desktop.  
+To develop directly frontend or the backend services inside containers, you just need to use the https git url of the sample:  
+`https://github.com/docker/awesome-compose/tree/master/react-java-mysql`
+
+![page](../dev-envs.png)
\ No newline at end of file
diff --git a/react-java-mysql/backend/Dockerfile b/react-java-mysql/backend/Dockerfile
index 1d72093..27d6367 100755
--- a/react-java-mysql/backend/Dockerfile
+++ b/react-java-mysql/backend/Dockerfile
@@ -1,3 +1,5 @@
+# syntax=docker/dockerfile:1.4
+
 FROM --platform=$BUILDPLATFORM maven:3.8.5-eclipse-temurin-17 AS builder
 WORKDIR /workdir/server
 COPY pom.xml /workdir/server/pom.xml
@@ -5,6 +7,24 @@ RUN mvn dependency:go-offline
 
 COPY src /workdir/server/src
 RUN mvn install
+
+FROM builder as dev-envs
+
+RUN <<EOF
+apt-get update
+apt-get install -y 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 ["mvn", "spring-boot:run"]
+
+FROM builder as prepare-production
 RUN mkdir -p target/dependency
 WORKDIR /workdir/server/target/dependency
 RUN jar -xf ../*.jar
@@ -14,7 +34,7 @@ FROM eclipse-temurin:17-jre-focal
 EXPOSE 8080
 VOLUME /tmp
 ARG DEPENDENCY=/workdir/server/target/dependency
-COPY --from=builder ${DEPENDENCY}/BOOT-INF/lib /app/lib
-COPY --from=builder ${DEPENDENCY}/META-INF /app/META-INF
-COPY --from=builder ${DEPENDENCY}/BOOT-INF/classes /app
+COPY --from=prepare-production ${DEPENDENCY}/BOOT-INF/lib /app/lib
+COPY --from=prepare-production ${DEPENDENCY}/META-INF /app/META-INF
+COPY --from=prepare-production ${DEPENDENCY}/BOOT-INF/classes /app
 ENTRYPOINT ["java","-cp","app:app/lib/*","com.company.project.Application"]
\ No newline at end of file
diff --git a/react-java-mysql/backend/pom.xml b/react-java-mysql/backend/pom.xml
index edd21fa..22e6da8 100755
--- a/react-java-mysql/backend/pom.xml
+++ b/react-java-mysql/backend/pom.xml
@@ -41,10 +41,6 @@
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-data-jpa</artifactId>
         </dependency>
-        <dependency>
-            <groupId>org.springframework.boot</groupId>
-            <artifactId>spring-boot-starter-data-jpa</artifactId>
-        </dependency>
         <dependency>
             <groupId>mysql</groupId>
             <artifactId>mysql-connector-java</artifactId>
diff --git a/react-java-mysql/frontend/Dockerfile b/react-java-mysql/frontend/Dockerfile
index 4b2b795..d7a08a8 100644
--- a/react-java-mysql/frontend/Dockerfile
+++ b/react-java-mysql/frontend/Dockerfile
@@ -1,4 +1,6 @@
-FROM node:lts AS development
+# syntax=docker/dockerfile:1.4
+
+FROM --platform=$BUILDPLATFORM node:lts AS development
 
 WORKDIR /code
 COPY package.json /code/package.json
@@ -12,9 +14,24 @@ ENV PORT=3000
 
 CMD [ "npm", "start" ]
 
+FROM development AS dev-envs
+RUN <<EOF
+apt-get update
+apt-get install -y 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" ]
+
 FROM development AS build
 
-RUN npm run build
+RUN ["npm", "run", "build"]
 
 FROM nginx:1.13-alpine