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

Signed-off-by: Guillaume Lours <guillaume.lours@docker.com>
master
Guillaume Lours 2 years ago committed by GitHub
parent 9f4f9d8fb8
commit 74317904bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

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

@ -1,4 +1,6 @@
FROM node:lts-buster-slim # syntax=docker/dockerfile:1.4
FROM node:lts-buster-slim AS development
# Create app directory # Create app directory
WORKDIR /usr/src/app WORKDIR /usr/src/app
@ -12,3 +14,18 @@ COPY . /usr/src/app
EXPOSE 3000 EXPOSE 3000
CMD [ "npm", "run", "dev" ] 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" ]

@ -1,6 +1,8 @@
services: services:
frontend: frontend:
build: frontend build:
context: frontend
target: development
ports: ports:
- 3000:3000 - 3000:3000
stdin_open: true stdin_open: true
@ -17,7 +19,9 @@ services:
backend: backend:
container_name: backend container_name: backend
restart: always restart: always
build: backend build:
context: backend
target: development
volumes: volumes:
- ./backend:/usr/src/app - ./backend:/usr/src/app
- /usr/src/app/node_modules - /usr/src/app/node_modules

@ -1,5 +1,7 @@
# syntax=docker/dockerfile:1.4
# Create image based on the official Node image from dockerhub # Create image based on the official Node image from dockerhub
FROM node:lts-buster FROM node:lts-buster AS development
# Create app directory # Create app directory
WORKDIR /usr/src/app WORKDIR /usr/src/app
@ -22,3 +24,18 @@ EXPOSE 3000
# Serve the app # Serve the app
CMD ["npm", "start"] 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" ]

@ -97,3 +97,14 @@ Removing react-express-mysql_db_1 ... done
Removing network react-express-mysql_default 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
```

Loading…
Cancel
Save