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