Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jul 13, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions react-express-mongodb/.docker/docker-compose.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:
19 changes: 18 additions & 1 deletion react-express-mongodb/backend/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
FROM node:lts-buster-slim
# syntax=docker/dockerfile:1.4

FROM node:lts-buster-slim AS development

# Create app directory
WORKDIR /usr/src/app
Expand All @@ -12,3 +14,18 @@ COPY . /usr/src/app
EXPOSE 3000

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" ]
8 changes: 6 additions & 2 deletions react-express-mongodb/compose.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
services:
frontend:
build: frontend
build:
context: frontend
target: development
ports:
- 3000:3000
stdin_open: true
Expand All @@ -17,7 +19,9 @@ services:
backend:
container_name: backend
restart: always
build: backend
build:
context: backend
target: development
volumes:
- ./backend:/usr/src/app
- /usr/src/app/node_modules
Expand Down
19 changes: 18 additions & 1 deletion react-express-mongodb/frontend/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# syntax=docker/dockerfile:1.4

# Create image based on the official Node image from dockerhub
FROM node:lts-buster
FROM node:lts-buster AS development

# Create app directory
WORKDIR /usr/src/app
Expand All @@ -22,3 +24,18 @@ EXPOSE 3000

# Serve the app
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" ]
11 changes: 11 additions & 0 deletions react-express-mysql/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,3 +97,14 @@ Removing react-express-mysql_db_1 ... done
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
```