removed documentation from freact frontend branch

# 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

graph TD

    subgraph Blog Service

        TornadoServer["Tornado Server"]

        Templates["HTML Templates (Jinja-like)"]

        StaticAssets["Static Assets (CSS/JS)"]

    end

    subgraph "React (frontend)<br>Service"

        ReactServer["React Server"]

        indexJs["index.js"]

        indexCss["index.css"]

        AppJs["App.js"]

        AppCss["App.css"]

    end

    subgraph Database Service 

        PostgreSQL["PostgreSQL Database"]

    end

    User["User"] -->|HTTP Requests<br>Port 3000| ReactServer

    ReactServer -->|Renders| indexJs

    indexJs -->|Imports| indexCss

    indexJs -->|Imports| AppJs

    AppJs -->|Imports| AppCss

    User["User"] -->|HTTP Requests<br>Port 8888| TornadoServer

    TornadoServer -->|Renders| Templates

    TornadoServer -->|Serves| StaticAssets

    TornadoServer -->|Async Queries<br>Port 5432| PostgreSQL

```

# React Frontend (Stage 01) - Setup

* Add `docker-compose.yml` at the root of the project

* Add `./react-frontend` directory

* Add `./react-frontend/Dockerfile` to start the react frontend

* Initialize the react app using `create-react-app` using the steps below, choose between

  * Starting from scratch

  * Starting after cloning this repository

## Starting from scratch

For starting without cloning this repository.

### Step 1) potential clean-up

```bash

docker image prune

docker rmi -f node:16

sudo rm ./react-frontend/my-react-app -r

```

### Step 2) Create necessary directory

Create `./react-frontend/my-react-app` directory.

```bash

mkdir ./react-frontend/my-react-app

```

### Step 3) Pull `node:16` image

```bash

docker pull node:16

```

### Step 4) Start and enter the node container

```bash

docker run -it --rm -v $(pwd)/react-frontend/my-react-app:/app -w /app node:16 bash

```

### Step 5) Install and use `create-react-app`

```bash

# install create react app (globally in container)

npm install -g create-react-app

# check create react version

create-react-app --version

# create react app

create-react-app .

```

Ignore error response and exit the node container,

```bash

exit

```

Important are the following files,

* `./react-frontend/my-react-app/package.json`

* `./react-frontend/my-react-app/package-lock.json`

Check the changes,

```bash

git status

On branch react-frontend-stage-01

Your branch is up to date with 'origin/react-frontend-stage-01'.

Changes not staged for commit:

  (use "git add <file>..." to update what will be committed)

  (use "git restore <file>..." to discard changes in working directory)

        modified:   react-frontend/my-react-app/package.json

no changes added to commit (use "git add" and/or "git commit -a")

```

### Step 6) Install web-vitals package

```bash

docker run -it --rm -v $(pwd)/react-frontend/my-react-app:/app -w /app node:16 npm install web-vitals --save

```

Continue with "Starting after cloning this repository".

## Starting after cloning this repository

For starting with cloning this repository.

Potential steps in the case of problems:

```bash

docker pull node:16 # pull the node image

docker run -it --rm -v $(pwd)/react-frontend/my-react-app:/app -w /app node:16 bash # run and access node container with map of local my-react-app dir to app dir 

```

Inside the node container run,

```bash

npm intall # install all packages in package.json

```

### Step 1) Start all services

Step 1.1) Start all services with rebuilded images

```bash

docker-compose up --build

```

```bash

Compiled successfully!

react-frontend_1   | 

react-frontend_1   | You can now view app in the browser.

react-frontend_1   | 

react-frontend_1   |   Local:            http://localhost:3000

react-frontend_1   |   On Your Network:  http://172.18.0.3:3000

react-frontend_1   | 

react-frontend_1   | Note that the development build is not optimized.

react-frontend_1   | To create a production build, use npm run build.

react-frontend_1   | 

react-frontend_1   | webpack compiled successfully

```

Step 1.2) Potentially restart tornado-bakend service in a new terminal

```bash

docker-compose restart tornado-backend

```

```bash

-----------------------------------------------------------------------------------------------------------------------------------

aidaho-tinkering-club-web-app_postgres_1          docker-entrypoint.sh postgres    Up      0.0.0.0:5432->5432/tcp,:::5432->5432/tcp

aidaho-tinkering-club-web-app_react-frontend_1    docker-entrypoint.sh npm start   Up      0.0.0.0:3000->3000/tcp,:::3000->3000/tcp

aidaho-tinkering-club-web-app_tornado-backend_1   python3 blog.py --db_host= ...   Up      0.0.0.0:8888->8888/tcp,:::8888->8888/tcp

```

### Step 2) Check tornado backend and react frontend

* [http://localhost:8888](http://localhost:8888)

* [http://localhost:3000](http://localhost:3000)

### Step 3) Edit src/App.js and save to reload.

Potentially change ownership of `./react-frontend/my-react-app/` using,

```bash

sudo chown -R username:username ./react-frontend/my-react-app/

```

Change the content of the file `./react-frontend/my-react-app/src/App.js` to,

```js

import logo from './logo.svg';

import './App.css';

function App() {

  return (

    <div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>

          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a

          className="App-link"

          href="https://reactjs.org"

          target="_blank"

          rel="noopener noreferrer"

        >

          Learn React for the AIDAHO certificate!

        </a>

      </header>

    </div>

  );

}

export default App;

```

Save to reload and chekc the change on

* [http://localhost:3000](http://localhost:3000)

## Deployment

### Step 1) Configuration

For more information on the deployment see, e.g.,

* [Create react app: Available scripts](https://create-react-app.dev/docs/available-scripts)

* [Create react app: Deployment](https://create-react-app.dev/docs/deployment)

For building for relative paths, i.e., for deployment on a relative path ([see](https://create-react-app.dev/docs/deployment#building-for-relative-paths)), an entry for the homepage has to be added to the `package.json` file.

For the deployment as part of the gitlab page of this repository the following entry is used,

```json

  "homepage": "https://mmoessler.aidaho-pages.uni-hohenheim.de/aidaho-tinkering-club-web-app/react-build/",

```

### Step 2) Build the react app

Start and enter the node container

```bash

docker run -it --rm -v $(pwd)/react-frontend/my-react-app:/app -w /app node:16 bash

```

Build the react app

```bash

# build application

npm run build

```

This cerates the directory `./react-frontend/my-react-app/build`  with all neccessary files for a static deployment.

The directory contains the following files for example,

```bash

.

├── asset-manifest.json

├── favicon.ico

├── index.html

├── logo192.png

├── logo512.png

├── manifest.json

├── robots.txt

└── static

    ├── css

    │   ├── main.f855e6bc.css

    │   └── main.f855e6bc.css.map

    ├── js

    │   ├── 488.103417aa.chunk.js

    │   ├── 488.103417aa.chunk.js.map

    │   ├── main.27d96172.js

    │   ├── main.27d96172.js.LICENSE.txt

    │   └── main.27d96172.js.map

    └── media

        └── logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg

```

 No newline at end of file