From c00b1d7ed7b41bfa93c80ebabdde6f96a2e2720b Mon Sep 17 00:00:00 2001 From: Gimleux Date: Thu, 15 Oct 2020 19:46:54 +0200 Subject: [PATCH 1/5] WIP - Network Error - Missing CORS-Header in BE? --- webapp_frontend/package-lock.json | 8 ++++++ webapp_frontend/package.json | 2 ++ webapp_frontend/src/api.ts | 27 +++++++++++++++++++ webapp_frontend/src/{ => components}/App.css | 0 .../src/{ => components}/App.test.tsx | 0 webapp_frontend/src/{ => components}/App.tsx | 17 ++++++++++-- webapp_frontend/src/index.tsx | 2 +- 7 files changed, 53 insertions(+), 3 deletions(-) create mode 100644 webapp_frontend/src/api.ts rename webapp_frontend/src/{ => components}/App.css (100%) rename webapp_frontend/src/{ => components}/App.test.tsx (100%) rename webapp_frontend/src/{ => components}/App.tsx (54%) diff --git a/webapp_frontend/package-lock.json b/webapp_frontend/package-lock.json index 9c69aeb0..1151a832 100644 --- a/webapp_frontend/package-lock.json +++ b/webapp_frontend/package-lock.json @@ -2523,6 +2523,14 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.1.tgz", "integrity": "sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==" }, + "axios": { + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz", + "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==", + "requires": { + "follow-redirects": "^1.10.0" + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", diff --git a/webapp_frontend/package.json b/webapp_frontend/package.json index e2c8742a..5c00aa8a 100644 --- a/webapp_frontend/package.json +++ b/webapp_frontend/package.json @@ -2,6 +2,7 @@ "name": "webapp_frontend", "version": "0.1.0", "private": true, + "proxy" :"http://localhost:8080", "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", @@ -10,6 +11,7 @@ "@types/node": "^12.12.64", "@types/react": "^16.9.51", "@types/react-dom": "^16.9.8", + "axios": "^0.20.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.3", diff --git a/webapp_frontend/src/api.ts b/webapp_frontend/src/api.ts new file mode 100644 index 00000000..de0e9040 --- /dev/null +++ b/webapp_frontend/src/api.ts @@ -0,0 +1,27 @@ +import Axios from "axios"; +import { + AxiosRequestConfig, + AxiosResponse, + AxiosError, +} from "axios"; + +const uri = "localhost:8080"; + +interface BackendHealthData { + time: number +} + +function callBackendHealth():any{//BackendHealthData{ + return new Promise((resolve, reject) => { + Axios.get("localhost:8080/health")//`${uri}/health`) + .then((data) => { + resolve(data.data); + }) + .catch(((error) => { + console.log(error) + //reject(error); + })); + }); +} + +export {callBackendHealth} \ No newline at end of file diff --git a/webapp_frontend/src/App.css b/webapp_frontend/src/components/App.css similarity index 100% rename from webapp_frontend/src/App.css rename to webapp_frontend/src/components/App.css diff --git a/webapp_frontend/src/App.test.tsx b/webapp_frontend/src/components/App.test.tsx similarity index 100% rename from webapp_frontend/src/App.test.tsx rename to webapp_frontend/src/components/App.test.tsx diff --git a/webapp_frontend/src/App.tsx b/webapp_frontend/src/components/App.tsx similarity index 54% rename from webapp_frontend/src/App.tsx rename to webapp_frontend/src/components/App.tsx index edf4a0b7..13b527ab 100644 --- a/webapp_frontend/src/App.tsx +++ b/webapp_frontend/src/components/App.tsx @@ -1,8 +1,19 @@ -import React from 'react'; -import logo from './logo.svg'; +import React, {useEffect, useState} from 'react'; +import logo from '../logo.svg'; import './App.css'; +import {callBackendHealth} from "../api"; function App() { + const[test,setTest] = useState("test"); + + useEffect(() => { + Promise.all([callBackendHealth()]) + .then(([backendHealthData]) => { + setTest(backendHealthData) + console.log(test) + }) + }, [test]); + return (
@@ -21,6 +32,8 @@ function App() { > Learn React + +

{test}

); diff --git a/webapp_frontend/src/index.tsx b/webapp_frontend/src/index.tsx index f5185c1e..a9d79a08 100644 --- a/webapp_frontend/src/index.tsx +++ b/webapp_frontend/src/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -import App from './App'; +import App from './components/App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( From 3be0c5da3a2d415ff64d4490aa3a0b40dfe780ac Mon Sep 17 00:00:00 2001 From: open-schnick Date: Thu, 15 Oct 2020 22:12:30 +0200 Subject: [PATCH 2/5] Fixed Pipelines, added featureRelease.yml pipeline. --- .github/workflows/featureRelease.yml | 40 ++++++++++++++++++++++++++++ .github/workflows/latestRelease.yml | 8 +++++- .github/workflows/stableRelease.yml | 6 +++++ 3 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/featureRelease.yml diff --git a/.github/workflows/featureRelease.yml b/.github/workflows/featureRelease.yml new file mode 100644 index 00000000..2ddfb07c --- /dev/null +++ b/.github/workflows/featureRelease.yml @@ -0,0 +1,40 @@ +name: Latest Release + +on: + push: + branches: + - 'feature/**' + paths: + - 'webapp_frontend/**' + - 'webapp_provider/**' + +jobs: + Build_Docker_Image_on_Push: + runs-on: ubuntu-latest + steps: + - + name: Set up Project + uses: actions/checkout@v2 + - + name: Set up Node.js environment + uses: actions/setup-node@v2.1.2 + with: + node-version: 12 + - + name: Build frontend + run: | + cd webapp_frontend + npm i + npm run-script build + cp -r build ../webapp_provider/public + - + name: Login to DockerHub + uses: docker/login-action@v1 + with: + username: ${{ secrets.DOCKER_USER }} + password: ${{ secrets.DOCKER_PW }} + - + name: Build and push + run: | + docker build -t filefighter/frontend:feature webapp_provider/ + docker push filefighter/frontend:feature \ No newline at end of file diff --git a/.github/workflows/latestRelease.yml b/.github/workflows/latestRelease.yml index 51314789..63333d83 100644 --- a/.github/workflows/latestRelease.yml +++ b/.github/workflows/latestRelease.yml @@ -1,6 +1,12 @@ name: Latest Release -on: push +on: + push: + branches: + - 'master' + paths: + - 'webapp_frontend/**' + - 'webapp_provider/**' jobs: Build_Docker_Image_on_Push: diff --git a/.github/workflows/stableRelease.yml b/.github/workflows/stableRelease.yml index 33ccfcef..56aeb2cc 100644 --- a/.github/workflows/stableRelease.yml +++ b/.github/workflows/stableRelease.yml @@ -2,8 +2,14 @@ name: Stable Release on: push: + branches: + - 'master' tags: - 'v*.*.*' + paths: + - 'webapp_frontend/**' + - 'webapp_provider/**' + jobs: Build_Docker_Image_on_new_Tag: runs-on: ubuntu-latest From c7a35a4ebae9e7885a0fbf47639818d0268c4844 Mon Sep 17 00:00:00 2001 From: open-schnick Date: Thu, 15 Oct 2020 22:32:59 +0200 Subject: [PATCH 3/5] fixed cors erros, due to missing protocol in url. --- webapp_frontend/src/api.ts | 6 +++--- webapp_frontend/src/components/App.tsx | 3 +-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/webapp_frontend/src/api.ts b/webapp_frontend/src/api.ts index de0e9040..f9f630aa 100644 --- a/webapp_frontend/src/api.ts +++ b/webapp_frontend/src/api.ts @@ -5,15 +5,15 @@ import { AxiosError, } from "axios"; -const uri = "localhost:8080"; +const uri = "http://localhost:8080"; interface BackendHealthData { - time: number + uptimeInSeconds: number } function callBackendHealth():any{//BackendHealthData{ return new Promise((resolve, reject) => { - Axios.get("localhost:8080/health")//`${uri}/health`) + Axios.get(`${uri}/health`) .then((data) => { resolve(data.data); }) diff --git a/webapp_frontend/src/components/App.tsx b/webapp_frontend/src/components/App.tsx index 13b527ab..d208230d 100644 --- a/webapp_frontend/src/components/App.tsx +++ b/webapp_frontend/src/components/App.tsx @@ -9,8 +9,7 @@ function App() { useEffect(() => { Promise.all([callBackendHealth()]) .then(([backendHealthData]) => { - setTest(backendHealthData) - console.log(test) + setTest(backendHealthData.uptimeInSeconds) }) }, [test]); From 6f8c398f8fcec4f80d2db2f0de1e23b7f4c02a37 Mon Sep 17 00:00:00 2001 From: Gimleux Date: Fri, 16 Oct 2020 08:06:04 +0200 Subject: [PATCH 4/5] Minor changes on first api call example --- webapp_frontend/src/api.ts | 10 +--- webapp_frontend/src/components/App.tsx | 68 ++++++++++++++------------ 2 files changed, 38 insertions(+), 40 deletions(-) diff --git a/webapp_frontend/src/api.ts b/webapp_frontend/src/api.ts index f9f630aa..f6c2160c 100644 --- a/webapp_frontend/src/api.ts +++ b/webapp_frontend/src/api.ts @@ -1,9 +1,4 @@ import Axios from "axios"; -import { - AxiosRequestConfig, - AxiosResponse, - AxiosError, -} from "axios"; const uri = "http://localhost:8080"; @@ -11,15 +6,14 @@ interface BackendHealthData { uptimeInSeconds: number } -function callBackendHealth():any{//BackendHealthData{ +function callBackendHealth():Promise{ return new Promise((resolve, reject) => { Axios.get(`${uri}/health`) .then((data) => { resolve(data.data); }) .catch(((error) => { - console.log(error) - //reject(error); + reject(error); })); }); } diff --git a/webapp_frontend/src/components/App.tsx b/webapp_frontend/src/components/App.tsx index d208230d..fc4c1ab4 100644 --- a/webapp_frontend/src/components/App.tsx +++ b/webapp_frontend/src/components/App.tsx @@ -1,41 +1,45 @@ -import React, {useEffect, useState} from 'react'; +import React, {ReactElement, useEffect, useState} from 'react'; import logo from '../logo.svg'; import './App.css'; import {callBackendHealth} from "../api"; -function App() { - const[test,setTest] = useState("test"); +function App():ReactElement { + const [backendLiveTime, setBackendLiveTime] = useState("Init"); - useEffect(() => { - Promise.all([callBackendHealth()]) - .then(([backendHealthData]) => { - setTest(backendHealthData.uptimeInSeconds) - }) - }, [test]); + useEffect(() => { + updateVariables() + }); - return ( -
-
-

- Hello World -

- logo -

- Edit src/App.tsx and save to reload. -

- - Learn React - - -

{test}

-
-
- ); + function updateVariables(): void { + Promise.all([callBackendHealth()]) + .then(([backendHealthData]) => { + setBackendLiveTime(backendHealthData.uptimeInSeconds) + }) + } + + return ( +
+
+

+ Hello World +

+ logo +

+ Edit src/App.tsx and save to reload. +

+ + Learn React + + +

{backendLiveTime}

+
+
+ ); } export default App; From e03cd0e983cce980b6184cc54d2fd3b9fa10fa55 Mon Sep 17 00:00:00 2001 From: Gimleux Date: Fri, 16 Oct 2020 08:09:07 +0200 Subject: [PATCH 5/5] Deleted unused line --- webapp_frontend/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/webapp_frontend/package.json b/webapp_frontend/package.json index 5c00aa8a..eaa7246f 100644 --- a/webapp_frontend/package.json +++ b/webapp_frontend/package.json @@ -2,7 +2,6 @@ "name": "webapp_frontend", "version": "0.1.0", "private": true, - "proxy" :"http://localhost:8080", "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0",