From c781f1cbb45a1f35393c433b681e2a289a100b1b Mon Sep 17 00:00:00 2001
From: Guillaume Lours <guillaume.lours@docker.com>
Date: Fri, 8 Jul 2022 17:54:08 +0200
Subject: [PATCH] add configuration to use react-rust-postgres sample with
 Docker Dev Environments feature (#264)

Signed-off-by: Guillaume Lours <guillaume.lours@docker.com>
---
 .../.docker/docker-compose.yaml               | 51 +++++++++++++++++++
 react-rust-postgres/backend/Dockerfile        | 18 +++++++
 react-rust-postgres/compose.yaml              |  1 +
 react-rust-postgres/frontend/Dockerfile       | 16 ++++++
 react-rust-postgres/readme.md                 |  8 +++
 5 files changed, 94 insertions(+)
 create mode 100644 react-rust-postgres/.docker/docker-compose.yaml

diff --git a/react-rust-postgres/.docker/docker-compose.yaml b/react-rust-postgres/.docker/docker-compose.yaml
new file mode 100644
index 0000000..091741d
--- /dev/null
+++ b/react-rust-postgres/.docker/docker-compose.yaml
@@ -0,0 +1,51 @@
+name: react-rust-postgres
+services:
+  frontend:
+    build:
+      context: ../frontend
+      target: dev-envs
+    networks:
+      - client-side
+    ports:
+      - 3000:3000
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+
+  backend:
+    build:
+      context: ../backend
+      target: dev-envs
+    environment:
+      - RUST_LOG=debug
+      - PG_DBNAME=postgres
+      - PG_HOST=db
+      - PG_USER=postgres
+      - PG_PASSWORD=mysecretpassword
+      - ADDRESS=0.0.0.0:8000
+    networks:
+      - client-side
+      - server-side
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    depends_on:
+      - db
+
+  db:
+    image: postgres:12-alpine
+    restart: always
+    environment:
+      - POSTGRES_PASSWORD=mysecretpassword
+    networks:
+      - server-side
+    ports:
+      - 5432:5432
+    volumes:
+      - db-data:/var/lib/postgresql/data
+
+networks:
+  client-side: {}
+  server-side: {}
+
+volumes:
+  backend-cache: {}
+  db-data: {}
diff --git a/react-rust-postgres/backend/Dockerfile b/react-rust-postgres/backend/Dockerfile
index 1e0ddf9..0ca943b 100644
--- a/react-rust-postgres/backend/Dockerfile
+++ b/react-rust-postgres/backend/Dockerfile
@@ -1,3 +1,4 @@
+# syntax=docker/dockerfile:1.4
 FROM rust:buster AS base
 
 ENV USER=root
@@ -16,6 +17,23 @@ EXPOSE 8000
 
 CMD [ "cargo", "run", "--offline" ]
 
+FROM base AS dev-envs
+
+EXPOSE 8000
+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 [ "cargo", "run", "--offline" ]
+
 FROM base AS builder
 
 RUN cargo build --release --offline
diff --git a/react-rust-postgres/compose.yaml b/react-rust-postgres/compose.yaml
index 9ff8c99..8a6cc2a 100644
--- a/react-rust-postgres/compose.yaml
+++ b/react-rust-postgres/compose.yaml
@@ -1,3 +1,4 @@
+name: react-rust-postgres
 services:
   frontend:
     build:
diff --git a/react-rust-postgres/frontend/Dockerfile b/react-rust-postgres/frontend/Dockerfile
index ec2593b..a875a4d 100755
--- a/react-rust-postgres/frontend/Dockerfile
+++ b/react-rust-postgres/frontend/Dockerfile
@@ -1,3 +1,4 @@
+# syntax=docker/dockerfile:1.4
 FROM node:lts AS development
 
 ENV CI=true
@@ -11,6 +12,21 @@ COPY . /code
 
 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" ]
+
 FROM development AS builder
 
 RUN npm run build
diff --git a/react-rust-postgres/readme.md b/react-rust-postgres/readme.md
index b0662aa..de63685 100644
--- a/react-rust-postgres/readme.md
+++ b/react-rust-postgres/readme.md
@@ -74,3 +74,11 @@ Removing react-rust-postgres_frontend_1 ... done
 Removing react-rust-postgres_db_1       ... done
 Removing network react-rust-postgres_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-rust-postgres`
+
+![page](../dev-envs.png)