From 63516dd8debea2e80fbfab80a2733812156839d5 Mon Sep 17 00:00:00 2001
From: Imre Toth <imre.toth@ess.eu>
Date: Thu, 8 Jul 2021 10:50:44 +0200
Subject: [PATCH] Externalising config into JS file
---
.env.development | 3 ---
README.md | 6 ++++++
public/config.js | 3 +++
public/index.html | 1 +
src/api/SwaggerApi.js | 4 ++--
src/components/auth/TokenRenew.js | 2 +-
6 files changed, 13 insertions(+), 6 deletions(-)
delete mode 100644 .env.development
create mode 100644 public/config.js
diff --git a/.env.development b/.env.development
deleted file mode 100644
index f3e6aa48..00000000
--- a/.env.development
+++ /dev/null
@@ -1,3 +0,0 @@
-REACT_APP_SERVER_ADDRESS=
-REACT_APP_API_BASE_ENDPOINT=/ccce-api
-REACT_APP_TOKEN_RENEW_INTERVAL=180000
\ No newline at end of file
diff --git a/README.md b/README.md
index efff13ab..bcde5f3b 100644
--- a/README.md
+++ b/README.md
@@ -29,12 +29,18 @@ Precedency of environment variable files are (files on the left have more priori
All environment variables start with `REACT_APP_` prefix.
+## External configuration
+All necessary configuration is stored in a config file in the `public` folder, called `config.js`. The config file has to be included in the _index.html_ file!
+The following values can be set in the file:
+
| Environment variable | Description |
| -------------------------|-------------|
| SERVER_ADDRESS | The backend server base URL _(host:port)_ (if backend server is running natively on the same host as the UI then the value has to be empty, and proxy has to be set!)|
| API_BASE_ENDPOINT | The context path of the application's REST API _(e.g. /ccce-api)_ |
| TOKEN_RENEW_INTERVAL | Time interval to renew JWT auth token _(in milliseconds)_ |
+Refering to a value in the JS source code is: _window.field-name_ (e.g. window.SERVER_ADDRESS).
+
## Useful links to start developing in ReactJS
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
diff --git a/public/config.js b/public/config.js
new file mode 100644
index 00000000..1694510f
--- /dev/null
+++ b/public/config.js
@@ -0,0 +1,3 @@
+SERVER_ADDRESS=''
+API_BASE_ENDPOINT='/ccce-api'
+TOKEN_RENEW_INTERVAL=180000
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index aa069f27..b3ba7c1a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -39,5 +39,6 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
+ <script src="%PUBLIC_URL%/config.js"></script>
</body>
</html>
diff --git a/src/api/SwaggerApi.js b/src/api/SwaggerApi.js
index 2b4f3f65..57f4bef9 100644
--- a/src/api/SwaggerApi.js
+++ b/src/api/SwaggerApi.js
@@ -5,11 +5,11 @@ import { CircularProgress } from '@material-ui/core';
import { useHistory } from 'react-router';
import { useCustomSnackbar } from '../components/common/snackbar/Snackbar';
-const SERVER = `${process.env.REACT_APP_SERVER_ADDRESS}`; // current domain
+const SERVER = `${window.SERVER_ADDRESS}`; // current domain
const createSwaggerClient = async () => {
const swaggerOptions = {
- url: `${SERVER}${process.env.REACT_APP_API_BASE_ENDPOINT}`,
+ url: `${SERVER}${window.API_BASE_ENDPOINT}`,
requestInterceptor: (req) => {
// if (user) req.headers["Authorization"] = `Bearer ${user.token}`;
req.headers['Content-Type'] = 'application/json';
diff --git a/src/components/auth/TokenRenew.js b/src/components/auth/TokenRenew.js
index 5fbfd763..ccdfa489 100644
--- a/src/components/auth/TokenRenew.js
+++ b/src/components/auth/TokenRenew.js
@@ -8,7 +8,7 @@ export default function TokenRenew() {
useEffect(() => {
const interval = setInterval(() => {
renewToken();
- }, `${process.env.REACT_APP_TOKEN_RENEW_INTERVAL}`);
+ }, `${window.TOKEN_RENEW_INTERVAL}`);
return () => clearInterval(interval);
}, [renewToken]);
--
GitLab