From 70026cebc0fd20b660cafe0bf95d0eea73459de2 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Tue, 27 Oct 2020 20:30:09 +0100 Subject: Propagate user-specified API url to React build This change fixes an issue where we did not forward the environmental variable for controlling the API url to the React build. --- frontend/Dockerfile | 6 ++++-- frontend/src/api/routes/token-signin.js | 9 +++++++-- frontend/src/api/socket.js | 2 +- 3 files changed, 12 insertions(+), 5 deletions(-) (limited to 'frontend') diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 36e3c20b..113b09c9 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -1,7 +1,8 @@ FROM node:14 MAINTAINER OpenDC Maintainers -ARG REACT_APP_OAUTH_CLIENT_ID +ARG OPENDC_OAUTH_CLIENT_ID +ARG OPENDC_API_BASE_URL # Copy OpenDC directory COPY ./ /opendc @@ -10,7 +11,8 @@ COPY ./ /opendc RUN cd /opendc/ \ && rm -rf ./build \ && yarn \ - && export REACT_APP_OAUTH_CLIENT_ID=$REACT_APP_OAUTH_CLIENT_ID \ + && export REACT_APP_OAUTH_CLIENT_ID=$OPENDC_OAUTH_CLIENT_ID \ + && export REACT_APP_API_BASE_URL=$OPENDC_API_BASE_URL \ && yarn build # Setup nginx to serve the frontend diff --git a/frontend/src/api/routes/token-signin.js b/frontend/src/api/routes/token-signin.js index 7553d043..577f4723 100644 --- a/frontend/src/api/routes/token-signin.js +++ b/frontend/src/api/routes/token-signin.js @@ -1,5 +1,10 @@ export function performTokenSignIn(token) { - return new Promise((resolve) => { - window['jQuery'].post('/tokensignin', { idtoken: token }, (data) => resolve(data)) + const apiUrl = process.env.REACT_APP_API_BASE_URL || '' + const data = new FormData() + data.append('idtoken', token) + + return fetch(`https://${apiUrl}/tokensignin`, { + method: 'POST', + body: data, }) } diff --git a/frontend/src/api/socket.js b/frontend/src/api/socket.js index 96034021..6974d5eb 100644 --- a/frontend/src/api/socket.js +++ b/frontend/src/api/socket.js @@ -6,7 +6,7 @@ let requestIdCounter = 0 const callbacks = {} export function setupSocketConnection(onConnect) { - const apiUrl = process.env.REACT_APP_API_URL || window.location.hostname + ':' + window.location.port + const apiUrl = process.env.REACT_APP_API_BASE_URL || window.location.hostname + ':' + window.location.port socket = io.connect(window.location.protocol + '//' + apiUrl) socket.on('connect', onConnect) -- cgit v1.2.3 From 45c3adb6fdfed5c191d8a14562eaabbd54c5c91b Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Tue, 27 Oct 2020 23:08:12 +0100 Subject: Split prod and dev config for Docker Compose This change splits the Docker Compose configuration into three files in order to share the configuration for different environments (e.g. development and production). Furthermore, this change drops the requirement for a reverse proxy. --- frontend/.dockerignore | 1 + frontend/nginx.conf | 17 ----------------- frontend/src/api/routes/token-signin.js | 10 +++++----- frontend/src/api/socket.js | 6 ++++-- 4 files changed, 10 insertions(+), 24 deletions(-) create mode 100644 frontend/.dockerignore (limited to 'frontend') diff --git a/frontend/.dockerignore b/frontend/.dockerignore new file mode 100644 index 00000000..3c3629e6 --- /dev/null +++ b/frontend/.dockerignore @@ -0,0 +1 @@ +node_modules diff --git a/frontend/nginx.conf b/frontend/nginx.conf index ed7e5cfe..1b4e3a73 100644 --- a/frontend/nginx.conf +++ b/frontend/nginx.conf @@ -8,23 +8,6 @@ server { try_files $uri $uri/ /index.html; } - location /socket.io { - proxy_http_version 1.1; - - proxy_buffering off; - proxy_set_header Upgrade $http_upgrade; - proxy_set_header Connection "Upgrade"; - proxy_pass http://api:8081/socket.io; - } - - location /tokensignin { - proxy_pass http://api:8081/tokensignin; - } - - location /api { - proxy_pass http://api:8081/api; - } - error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; diff --git a/frontend/src/api/routes/token-signin.js b/frontend/src/api/routes/token-signin.js index 577f4723..d6cff570 100644 --- a/frontend/src/api/routes/token-signin.js +++ b/frontend/src/api/routes/token-signin.js @@ -1,10 +1,10 @@ export function performTokenSignIn(token) { const apiUrl = process.env.REACT_APP_API_BASE_URL || '' - const data = new FormData() - data.append('idtoken', token) - return fetch(`https://${apiUrl}/tokensignin`, { + return fetch(`${apiUrl}/tokensignin`, { method: 'POST', - body: data, - }) + body: new URLSearchParams({ + idtoken: token, + }), + }).then((res) => res.json()) } diff --git a/frontend/src/api/socket.js b/frontend/src/api/socket.js index 6974d5eb..1c432167 100644 --- a/frontend/src/api/socket.js +++ b/frontend/src/api/socket.js @@ -6,9 +6,11 @@ let requestIdCounter = 0 const callbacks = {} export function setupSocketConnection(onConnect) { - const apiUrl = process.env.REACT_APP_API_BASE_URL || window.location.hostname + ':' + window.location.port + const apiUrl = + process.env.REACT_APP_API_BASE_URL || + `${window.location.protocol}//${window.location.hostname}:${window.location.port}` - socket = io.connect(window.location.protocol + '//' + apiUrl) + socket = io.connect(apiUrl) socket.on('connect', onConnect) socket.on('response', onSocketResponse) } -- cgit v1.2.3 From add670266391580e300235365e733f1ceea70122 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Tue, 27 Oct 2020 23:20:33 +0100 Subject: Fix images on frontpage This change fixes the invalid images on the frontpage by hosting them ourselves. --- frontend/public/img/screenshot-construction.png | Bin 0 -> 76461 bytes frontend/public/img/screenshot-simulation-zoom.png | Bin 0 -> 100583 bytes frontend/src/components/home/ModelingSection.js | 2 +- frontend/src/components/home/SimulationSection.js | 2 +- 4 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 frontend/public/img/screenshot-construction.png create mode 100644 frontend/public/img/screenshot-simulation-zoom.png (limited to 'frontend') diff --git a/frontend/public/img/screenshot-construction.png b/frontend/public/img/screenshot-construction.png new file mode 100644 index 00000000..223e8d48 Binary files /dev/null and b/frontend/public/img/screenshot-construction.png differ diff --git a/frontend/public/img/screenshot-simulation-zoom.png b/frontend/public/img/screenshot-simulation-zoom.png new file mode 100644 index 00000000..d7744926 Binary files /dev/null and b/frontend/public/img/screenshot-simulation-zoom.png differ diff --git a/frontend/src/components/home/ModelingSection.js b/frontend/src/components/home/ModelingSection.js index 60d372f2..643dca65 100644 --- a/frontend/src/components/home/ModelingSection.js +++ b/frontend/src/components/home/ModelingSection.js @@ -5,7 +5,7 @@ const ModelingSection = () => ( diff --git a/frontend/src/components/home/SimulationSection.js b/frontend/src/components/home/SimulationSection.js index 9852cbb8..e7a02068 100644 --- a/frontend/src/components/home/SimulationSection.js +++ b/frontend/src/components/home/SimulationSection.js @@ -5,7 +5,7 @@ const ModelingSection = () => ( -- cgit v1.2.3