How do I make environment variables available in Grove?

Question

I am developing a UI application using MarkLogic Grove(React). And I want to use different settings in the application depending on the environment. For that, I want to use environment variables.

I wrote as follows.

• ui/src/.env

    TEST="test01"

• ui/src/App.js

    const valueFromEnv = process.env.TEST;   
    const App = appProps => (
      <AppContainer
        {...appProps}
        render={props => (
          <div> x{valueFromEnv}y
      …

But, "test01" was not displayed on the browser(Only "xy" was displayed.). How do I make environment variables available in Grove?

Answer 1

You need to prefix any env variable you'd like to expose with REACT_APP_, otherwise they won't be exposed inside your frontend code. It is explained in more detail here:

https://create-react-app.dev/docs/adding-custom-environment-variables/

HTH!