├── backend
│ ├── config
│ │ ├── config.js # config.js determines which environment to use
│ │ ├── config.json # config.json contains the configuration for the given environment
│ │ └── messages.js # messages.js contains the messages for the application given status codes
│ ├── db
│ │ └── index.js # index.js contains the database connection with mongoose
│ ├── Dockerfile # Dockerfile for backend
│ ├── logs # logs directory
│ ├── models # models directory contains the database models
│ │ └── todos # todos model directory
│ │ └── todo.js # todo model defined in mongoose
│ ├── node_modules # in gitignore
│ ├── package.json # package.json defines the dependencies of the project
│ ├── package-lock.json # generated by npm
│ ├── routes # routes directory contains the routes
│ │ └── index.js # index.js contains the routes
│ ├── server.js # server.js contains the express server
│ └── utils
│ └── helpers
│ ├── logger.js # contains logging utility function
│ └── responses.js # contains functions to send success and error messages in the form of JSON objects back to the server.
├── compose.yaml # compose.yaml defines the services and networks
├── data # contains mongodb data
│ ├── ...
├── frontend
│ ├── Dockerfile # Dockerfile for frontend
│ ├── node_modules # in gitignore
│ ├── package.json
│ ├── package-lock.json
│ ├── public
│ │ ├── index.html # entry point for the frontend
│ │ ├── manifest.json # metadata for the web app
│ └── src
│ ├── App.js # App.js contains the main React component
│ ├── App.scss # App.scss contains the styles for the main React component
│ ├── App.test.js
│ ├── components
│ │ ├── AddTodo.js
│ │ └── TodoList.js
│ ├── custom.scss
│ ├── index.css
│ ├── index.js
│ └── serviceWorker.js # optional service worker
└── README.md
$ docker compose up -d
should be running on http://localhost:3000
$ docker compose down
services: # services are the containers that we want to run
frontend: # frontend service definition
build: # build the image from the Dockerfile
context: frontend # path to the Dockerfile
target: development # build stage
ports: # map the port of the container to the host
- 3000:3000 # host:container
stdin_open: true # keep the container running
volumes: # volumes to mount
- ./frontend:/usr/src/app # mount ./frontend directory to /usr/src/app in the container
- /usr/src/app/node_modules # mount the node_modules directory to /usr/src/app/node_modules in the container
restart: always # restart the container if it crashes
networks: # networks to connect to
- react-express
depends_on: # services that this service depends on
- backend
backend: # backend service definition
restart: always
build:
context: backend
target: development
volumes:
- ./backend:/usr/src/app
- /usr/src/app/node_modules
depends_on:
- mongo
networks:
- express-mongo
- react-express
expose: # expose the port of the container to the host
- 3000
mongo: # mongo service definition
restart: always
image: mongo:4.2.0
volumes:
- ./data:/data/db # mount the ./data directory to /data/db in the container
networks:
- express-mongo
expose:
- 27017
networks: # networks to create
react-express:
express-mongo:
# base image is node:lts-buster called development
FROM node:lts-buster AS development
# Create app directory
WORKDIR /usr/src/app
# Install app dependencies
COPY package.json /usr/src/app
COPY package-lock.json /usr/src/app
RUN npm ci
# Copy app source code into /usr/src/app
COPY . /usr/src/app
# Expose port 3000
EXPOSE 3000
# Run app
CMD ["npm", "start"]
# update and install git
FROM development as dev-envs
RUN apt-get update && apt-get install -y --no-install-recommends git
# add user vscode and group docker and add user vscode to group docker
RUN useradd -s /bin/bash -m vscode && groupadd docker && usermod -aG docker vscode
# install Docker tools (cli, buildx, compose)
COPY --from=gloursdocker/docker / /
CMD [ "npm", "start" ]
# base image is node:lts-buster-slim called development
FROM node:lts-buster-slim AS development
# Create app directory
WORKDIR /usr/src/app
# Install app dependencies
COPY package.json /usr/src/app/package.json
COPY package-lock.json /usr/src/app/package-lock.json
RUN npm ci
# Copy app source code into /usr/src/app
COPY . /usr/src/app
# Expose port 3000
EXPOSE 3000
# Run app
CMD [ "npm", "run", "dev" ]
# update and install git
FROM development as dev-envs
RUN apt-get update && apt-get install -y --no-install-recommends git
# add user vscode and group docker and add user vscode to group docker
RUN useradd -s /bin/bash -m vscode && groupadd docker && usermod -aG docker vscode
# install Docker tools (cli, buildx, compose)
COPY --from=gloursdocker/docker / /
CMD [ "npm", "run", "dev" ]