add configuration to use react-nginx sample with Docker Dev Environments feature (#269)

Signed-off-by: Guillaume Lours <[email protected]>

Author: glours

react-nginx/.docker/docker-compose.yaml

@@ -0,0 +1,11 @@
+services:
+  frontend:
+    build:
+      context: .
+      target: dev-envs
+    container_name: frontend
+    ports:
+      - "80:3000"
+      - "3000:3000"
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock

react-nginx/Dockerfile

@@ -1,3 +1,5 @@
+# syntax=docker/dockerfile:1.4
+
 # 1. For build React app
 FROM node:lts AS development
 
@@ -22,6 +24,22 @@ FROM development AS build
 
 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" ]
+
 # 2. For Nginx setup
 FROM nginx:alpine
 

react-nginx/README.md

@@ -86,3 +86,14 @@ Stopping frontend ... done
 Removing frontend ... done
 Removing network react-nginx_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-nginx
+```

react-nginx/compose.yaml

@@ -1,4 +1,3 @@
-version: "3.7"
 services:
   frontend:
     build: