Environment variable undefined in react app

Question

I have env var SERVER_URL=localhost:8000

config.js

export const SERVER_URL = process.env.SERVER_URL;

export { SERVER_URL as default };

and action:

function fetchData(apiUrl, timeout) {
    return timeoutPromise(timeout || 15000, fetch(`${SERVER_URL}${apiUrl}`))
        .then(checkHttpStatus)
        .then(parseJSON);
}

but after use this fetchData I get http://localhost:8000/undefined/some_api

idk where from came this undefined

Answer 1

If you are using create-react-app, only environment variables prefixed with REACT_APP_ will be available.

Try console.log(SERVER_URL), that's where your undefined came from.

Create an environment variable REACT_APP_SERVER_URL instead and refer to it with process.env.REACT_APP_SERVER_URL in your app.