Externalising config into JS file

.env.development

-REACT_APP_SERVER_ADDRESS=
-REACT_APP_API_BASE_ENDPOINT=/ccce-api
-REACT_APP_TOKEN_RENEW_INTERVAL=180000
\ No newline at end of file

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).

public/config.js

+SERVER_ADDRESS=''
+API_BASE_ENDPOINT='/ccce-api'
+TOKEN_RENEW_INTERVAL=180000
\ No newline at end of file

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>

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';

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]);