Commit 429280f3 authored by Markus Mößler's avatar Markus Mößler
Browse files

updated react frontend stage 01 doc

parent c987938b

documentation/react_frontend_stage_01.md

+40 −12
Original line number Diff line number Diff line
@@ -4,9 +4,18 @@ 
* 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

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

  * Starting from scratch

  * Starting after cloning this repository

* Further information can be found here:

  * [Create React App](https://create-react-app.dev/)

  * [W3Schools React Tutorial](https://www.w3schools.com/REACT/DEFAULT.ASP)



## Step 0) potential clean-up

## Starting from scratch



For starting without cloning this repository.



### Step 1) potential clean-up



```bash

docker image prune
@@ -16,7 +25,7 @@ docker rmi -f node:16 
sudo rm ./react-frontend/my-react-app -r

```



## Step 1) Create necessary directory

### Step 2) Create necessary directory



Create `./react-frontend/my-react-app` directory.
@@ -24,19 +33,19 @@ Create `./react-frontend/my-react-app` directory. 
mkdir ./react-frontend/my-react-app

```



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

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



```bash

docker pull node:16

```



## Step 3) Start and enter the node container

### 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 4) Install and use `create-react-app`

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



```bash

# install create react app (globally in container)
@@ -75,15 +84,34 @@ Changes not staged for commit: 
no changes added to commit (use "git add" and/or "git commit -a")

```



## Step 5) Install web-vitals package

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

```



## Step 6) Start all services

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 6.1) Start all services with rebuilded images

Step 1.1) Start all services with rebuilded images



```bash

docker-compose up --build
@@ -103,7 +131,7 @@ react-frontend_1 | 
react-frontend_1   | webpack compiled successfully

```



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

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



```bash

docker-compose restart tornado-backend
@@ -116,12 +144,12 @@ aidaho-tinkering-club-web-app_react-frontend_1 docker-entrypoint.sh npm start 
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 7) Check tornado backend and react frontend

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



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

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



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

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



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