Heroku environment variables are not visible for the react app

Question

I have a Front End application which is mainly based on React, and I have created a node server to serve the application. Build and everything are successful, and the the index.html is also served, but it doesn't read the environment variables that I set through heroku application settings (even from CLI).

Package.json scripts

    "scripts": {
    "start": "node server",
    "start-dev": "react-scripts start",
    "start-windows": "set PORT=3001 && react-scripts start",
    "build": "react-scripts build",
    "postinstall": "npm run build",
    "test": "jest src/**/*.test.js",
    "eject": "react-scripts eject"
  }

node server,

const express = require ('express')
const app = express();
const http = require('http').Server(app);
const path = require( 'path')
let port = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'build')));


app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'build') + '/index.html');
});

app.listen(port, () => {
  console.log(`App running on port ${port}`);
});

I print followings in a js,

console.log('LOCAL_TEST_ENVIRONMENT --- ', process.env.LOCAL_TEST_ENVIRONMENT) // LOCAL_TEST_ENVIRONMENT ---  undefined
console.log('BACKEND_URL --- ', process.env.BACKEND_URL) // BACKEND_URL --- undefined
console.log('NODE_ENV --- ', process.env.NODE_ENV) // NODE_ENV --- production

Environment variables I set,

How can I fix this?

Answer 1

The prefix REACT_APP_ is necessary when accessing env variables, try

{process.env.REACT_APP_LOCAL_TEST_ENVIRONMENT}