Monolithic JHipster React Front End Application Properties

Question

I'm building a JHipster Monolithic application with React. In the Backend, I can use the application.yml / ApplicationProperties.java to add properties (such as API keys) which may change between environments (Dev, Prod etc).

My question is, can I do the same thing on the React front-end? This is a Spring application so the same application.yml and ApplicationProperties.java are in place. Does anyone have a code example of surfacing custom properties to the UI?

I have read the answer from this post (JHipster React Front End (Gateway) Application Properties) but it did not help me because it is a monolithic application in my case.

Jon Ruddell Jon Ruddell · Accepted Answer · 2021-02-11T14:50:21

The solution from the other post works for a monolith. For a full solution, see below:

First, make sure you have configured the config you want exposed. Also configure it in ApplicationProperties.java (or set ignoreUnknownFields to false):

application:
  my-value: 'TestValue'

Create a REST endpoint for exposing the config value to the client (modified from the other answer):

package com.mycompany.myapp.web.rest;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * Resource to return custom config
 */
@RestController
@RequestMapping("/api")
public class CustomConfigResource {

    @Value("${application.my-value:}")
    private String myValue;

    @GetMapping("/custom-config")
    public CustomConfigVM getCustomConfig() {
        return new CustomConfigVM(myValue);
    }

    class CustomConfigVM {
        private String myValue;

        CustomConfigVM(String myValue) {
            this.myValue = myValue;
        }

        public String getMyValue() {
            return myValue;
        }

        public void setMyValue(String myValue) {
            this.myValue = myValue;
        }
    }
}

Create a reducer to fetch and store the information:

import axios from 'axios';

import { SUCCESS } from 'app/shared/reducers/action-type.util';

export const ACTION_TYPES = {
  GET_CONFIG: 'customConfig/GET_CONFIG',
};

const initialState = {
  myValue: '',
};

export type CustomConfigState = Readonly<typeof initialState>;

export default (state: CustomConfigState = initialState, action): CustomConfigState => {
  switch (action.type) {
    case SUCCESS(ACTION_TYPES.GET_CONFIG): {
      const { data } = action.payload;
      return {
        ...state,
        myValue: data['myValue'],
      };
    }
    default:
      return state;
  }
};

export const getConfig = () => ({
  type: ACTION_TYPES.GET_CONFIG,
  payload: axios.get('api/custom-config'),
});

Finally, call the reducer's getConfig method from a component, for example in App.tsx:

import { getConfig } from 'app/shared/reducers/custom-config';
...
useEffect(() => {
    props.getConfig();
  }, []);
...
const mapDispatchToProps = { getConfig };
...

Monolithic JHipster React Front End Application Properties

1 Answers