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

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

react-express-mongodb/README.md

@@ -132,3 +132,14 @@ __Explanation of service mongo__
 :key: `If you wish to check your DB changes on your local machine as well. You should have installed MongoDB locally, otherwise you can't access your mongodb service of container from host machine.` 
 
 :white_check_mark: You should check your __mongo__ version is same as used in image. You can see the version of __mongo__ image in `docker-compose `file, I used __image: mongo:4.2.0__. If your mongo db version on your machine is not same then furst you have to updated your  local __mongo__ version in order to works correctly.
+
+## 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
+```

react-express-mysql/.docker/docker-compose.yaml

@@ -0,0 +1,64 @@
+services:
+  backend:
+    build:
+      args:
+      - NODE_ENV=development
+      context: backend
+      target: dev-envs
+    command: npm run start-watch
+    environment:
+      - DATABASE_DB=example
+      - DATABASE_USER=root
+      - DATABASE_PASSWORD=/run/secrets/db-password
+      - DATABASE_HOST=db
+      - NODE_ENV=development
+    ports:
+      - 80:80
+      - 9229:9229
+      - 9230:9230
+    secrets:
+      - db-password
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    networks:
+      - public
+      - private
+    depends_on:
+      - db
+  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.27
+    command: '--default-authentication-plugin=mysql_native_password'
+    restart: always
+    secrets:
+      - db-password
+    volumes:
+      - db-data:/var/lib/mysql
+    networks:
+      - private
+    environment:
+      - MYSQL_DATABASE=example
+      - MYSQL_ROOT_PASSWORD_FILE=/run/secrets/db-password
+  frontend:
+    build:
+      context: frontend
+      target: dev-envs
+    ports:
+      - 3000:3000
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    networks:
+      - public
+    depends_on:
+      - backend
+networks:
+  public:
+  private:
+volumes:
+  back-notused:
+  db-data:
+secrets:
+  db-password:
+    file: db/password.txt

react-express-mysql/README.md

@@ -106,5 +106,5 @@ You can use this sample with the Dev Environments feature of Docker Desktop.
 
 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
+https://github.com/docker/awesome-compose/tree/master/react-express-mysql
 ```

react-express-mysql/backend/Dockerfile

@@ -1,5 +1,7 @@
+# syntax=docker/dockerfile:1.4
+
 # if you're doing anything beyond your local machine, please pin this to a specific version at https://hub.docker.com/_/node/
-FROM node:lts
+FROM node:lts AS development
 
 # set our node environment, either development or production
 # defaults to production, compose overrides this to development on build and run
@@ -29,3 +31,17 @@ COPY . /code
 # using node here is still more graceful stopping then npm with --init afaik
 # I still can't come up with a good production way to run with npm and graceful shutdown
 CMD [ "node", "src/index.js" ]
+
+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 / /

react-express-mysql/compose.yaml

@@ -4,6 +4,7 @@ services:
       args:
       - NODE_ENV=development
       context: backend
+      target: development
     command: npm run start-watch
     environment:
       - DATABASE_DB=example

react-express-mysql/frontend/Dockerfile

@@ -1,3 +1,5 @@
+# syntax=docker/dockerfile:1.4
+
 FROM node:lts AS development
 
 ENV CI=true
@@ -15,6 +17,21 @@ FROM development AS builder
 
 RUN npm run build
 
+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" ]
+
 FROM nginx:1.13-alpine
 
 COPY --from=builder /code/build /usr/share/nginx/html