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

@@ -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: {}

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)

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"]

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>

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