add configuration to use react-express-mongo sample with Docker Dev Environments feature (#271)

Signed-off-by: Guillaume Lours <guillaume.lours@docker.com>

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:

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

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

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

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
+```