Loading documentation/react_frontend_stage_01.md 0 → 100644 +102 −0 Original line number Diff line number Diff line # React frontend stage 01 * 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 ## Step 0) potential clean-up ```bash docker image prune docker rmi -f node:16 sudo rm ./react-frontend/my-react-app -r ``` ## Step 1) Create necessary directory Create `./react-frontend/my-react-app` directory. ```bash mkdir ./react-frontend/my-react-app ``` ## Step 2) Pull `node:16` image ```bash docker pull node:16 ``` ## Step 3) 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` ```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 root@842e478c9a52:/app# exit ``` ## Step 5) 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 Step 6.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 6.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 7) Check tornado backend and react frontend * [Tornado backend](http://localhost:8888) * [React frontend](http://localhost:3000) No newline at end of file Loading
documentation/react_frontend_stage_01.md 0 → 100644 +102 −0 Original line number Diff line number Diff line # React frontend stage 01 * 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 ## Step 0) potential clean-up ```bash docker image prune docker rmi -f node:16 sudo rm ./react-frontend/my-react-app -r ``` ## Step 1) Create necessary directory Create `./react-frontend/my-react-app` directory. ```bash mkdir ./react-frontend/my-react-app ``` ## Step 2) Pull `node:16` image ```bash docker pull node:16 ``` ## Step 3) 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` ```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 root@842e478c9a52:/app# exit ``` ## Step 5) 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 Step 6.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 6.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 7) Check tornado backend and react frontend * [Tornado backend](http://localhost:8888) * [React frontend](http://localhost:3000) No newline at end of file
