nicholashobbs/react-3d

├── 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

compose.yml

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:

/frontend/Dockerfile

# 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" ]

/backend/Dockerfile

# 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" ]