Commit 86727af0 authored by Markus Mößler's avatar Markus Mößler
Browse files

added file structure and docker compose to react frontend doc

parent ef9f3ac5
Loading
Loading
Loading
Loading
+91 −1
Original line number Diff line number Diff line

# React Frontend (Stage 01) - Overview

## File Structure

```bash
.
├── docker-compose.yml
├── documentation
├── react-frontend
│   ├── Dockerfile
│   └── my-react-app
│       ├── package.json
│       ├── public
│       │   ├── favicon.ico
│       │   ├── index.html
│       │   ├── logo192.png
│       │   ├── logo512.png
│       │   ├── manifest.json
│       │   └── robots.txt
│       ├── README.md
│       └── src
│           ├── App.css
│           ├── App.js
│           ├── App.test.js
│           ├── index.css
│           ├── index.js
│           ├── logo.svg
│           ├── reportWebVitals.js
│           └── setupTests.js
├── README.md
└── tornado-backend
    ├── blog.py
    ├── docker-compose.yml
    ├── Dockerfile
    ├── README.md
    ├── requirements.txt
    ├── schema.sql
    ├── static
    │   └── blog.css
    └── templates
        ├── archive.html
        ├── base.html
        ├── compose.html
        ├── create_author.html
        ├── entry.html
        ├── feed.xml
        ├── home.html
        ├── login.html
        └── modules
            └── entry.html
```

## Multi-container structure

```yml
# .

services:
  react-frontend:
    build:
      context: ./react-frontend
    volumes:
      - ./react-frontend/my-react-app:/app
    ports:
      - "3000:3000"
    stdin_open: true
    tty: true
    environment:
      - CHOKIDAR_USEPOLLING=true # To support live reloading on mounted volumes
    command: ["npm", "start"]
    depends_on:
      - tornado-backend

  tornado-backend:
    build: ./tornado-backend
    links:
      - postgres
    ports:
      - "8888:8888"
    command: --db_host=postgres

  postgres:
    image: postgres:10.3
    environment:
      POSTGRES_USER: blog
      POSTGRES_PASSWORD: blog
      POSTGRES_DB: blog
    ports:
      - "5432:5432"

```

## Visualization

```mermaid