process is defined well from bootstrap.js but undefined inside the react code

Question

I`m working on Nodejs app, which includes Front-end react that calls back-end api (Typescript). The app is working great in development; but not in production.

When creating the production build, the front-end works fine and the back-end also started fine when running it using these commands on different Terminals:

sudo node server/main.js
sudo node bootstrap.js

However; When running the production build, I checked the "process" & "process.env" in the browser inspect tools, and they are returning normal values at the bootstrap file; but they are both returning "undefined" inside the react code blocks (which are build within the "build" folder located at the project root).

I have the files (.env, bootstrap.js, package.json) all at the project root.

.env code

# --- SERVER ---

HTTPS_CERT_PATH=./cert/backend/localhost.crt
HTTPS_KEY_PATH=./cert/backend/localhost.key

SERVER_PORT=3000

# --- REPORT ---

HTTPS_CERT_PATH=./cert/backend/localhost.crt
HTTPS_KEY_PATH=./cert/backend/localhost.key

REPORT_PORT=3001

# --- UI-CLIENT ---

CLIENT_PORT=4000
CLIENT_HTTPS_CERT_PATH=./cert/frontend/localhost.crt
CLIENT_HTTPS_KEY_PATH=./cert/frontend/localhost.key

# Change to 'https' if server certificates are specified
# Also, the port should be same as in the SERVER_PORT variable
API_SERVER_HOST=http://localhost:3000
API_REPORT_HOST=http://localhost:3001


# --- DO NOT CHANGE. CONTACT THE SUPPORT IF REQUIRED ---

PUBLIC_URL=
RSYSLOG_PORT=514
DATABASE_PORT=5433
LOG_FOLDER=./_docker/
APP_LOG_FOLDER=./_logs
ENABLE_SYSLOG_LISTENER=true
SSH_CONNECTION_DEBUG=false
ENABLE_RAM_LOG=false
REACT_APP_VALIDATION_URL=/api
REACT_APP_REPORT_URL=/api1

bootstrap code

const { createProxyMiddleware } = require('http-proxy-middleware')
const express = require('express');
const request = require('request');
const https = require('https');
const fs = require('fs');
const path = require('path');
require('dotenv').config();

const CLIENT_PORT = process.env.CLIENT_PORT || 4000;

const VALIDATION_API_URL = process.env.REACT_APP_VALIDATION_URL;
const REPORT_API_URL = process.env.REACT_APP_REPORT_URL;

const API_SERVER_HOST = process.env.API_SERVER_HOST;
const API_REPORT_HOST = process.env.API_REPORT_HOST;

const PUBLIC_URL = process.env.PUBLIC_URL;

const HTTPS_CERT_PATH = process.env.CLIENT_HTTPS_CERT_PATH;
const HTTPS_KEY_PATH = process.env.CLIENT_HTTPS_KEY_PATH;

const app = express();

var proxyapi = createProxyMiddleware('/api', { target: 'http://localhost:3000', changeOrigin: true });
var proxyapi1 = createProxyMiddleware('/api1', { target: 'http://localhost:3001', changeOrigin: true });

console.log(process.env);

app.use(VALIDATION_API_URL, (req, res) => {
    const proxyUrl = API_SERVER_HOST + VALIDATION_API_URL + req.originalUrl.split(VALIDATION_API_URL)[1]
    console.log("Original url:" + req.originalUrl);
    console.log("Proxying to:" + proxyUrl + "\n");
    req.pipe(request({url: proxyUrl, rejectUnauthorized: false})).pipe(res)
})

app.use(REPORT_API_URL, (req, res) => {
    const proxyUrl = API_REPORT_HOST + REPORT_API_URL + req.originalUrl.split(REPORT_API_URL)[1]
    console.log("Original url:" + req.originalUrl);
    console.log("Proxying to:" + proxyUrl + "\n");
    req.pipe(request({url: proxyUrl, rejectUnauthorized: false})).pipe(res)
})


app.use(PUBLIC_URL, express.static(path.join(__dirname, 'build')));
app.get(`${PUBLIC_URL}/*`, (req, res) => {
    console.log("Request: " + req.originalUrl)
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
})


let options;
try {
    options = {
        cert: fs.readFileSync(HTTPS_CERT_PATH),
        key: fs.readFileSync(HTTPS_KEY_PATH)
    };
} catch (e) {
    console.warn('Unable to create https access. Error while certificate reading: ' + e);
}

if (options) {
    https.createServer(options, app).listen(CLIENT_PORT);
    console.log(`Application listening at https://localhost:${CLIENT_PORT}${PUBLIC_URL}`)
} else {
    app.listen(CLIENT_PORT, () => {
        console.log(`Application listening at http://localhost:${CLIENT_PORT}${PUBLIC_URL}`)
    });
}

package.json code

{
  "name": "octopus-var",
  "version": "0.0.1",
  "description": "",
  "author": "",
  "private": true,
  "license": "Octopus Cybersecurity INC.",
  "scripts": {
    "start": "node server/main",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage"
  },
  "dependencies": {
    "@nestjs/common": "^7.5.1",
    "@nestjs/core": "^7.5.1",
    "@nestjs/event-emitter": "^1.0.0",
    "@nestjs/jwt": "^7.2.0",
    "@nestjs/passport": "^7.1.5",
    "@nestjs/platform-express": "^7.5.1",
    "@nestjs/schedule": "^0.4.3",
    "@nestjs/typeorm": "^7.1.5",
    "archiver": "^5.3.0",
    "bcrypt": "^5.0.1",
    "blob-stream": "^0.1.3",
    "chart.js": "^3.5.0",
    "chartjs-node-canvas": "^3.2.0",
    "crypto-js": "^4.0.0",
    "csv-parse": "^4.15.4",
    "dotenv": "^10.0.0",
    "http": "0.0.1-security",
    "http-proxy-middleware": "^2.0.4",
    "image-size": "^1.0.0",
    "javascript-obfuscator": "^2.19.0",
    "js2xmlparser": "^4.0.1",
    "jsencrypt": "^3.2.0",
    "logform": "^2.2.0",
    "moment": "^2.29.1",
    "nest-winston": "^1.5.0",
    "node-html-to-image": "^3.2.0",
    "node-pty": "^0.10.1",
    "node-ssh": "^12.0.1",
    "nodemailer": "^6.7.0",
    "passport": "^0.4.1",
    "passport-jwt": "^4.0.0",
    "passport-local": "^1.0.0",
    "pdfkit": "^0.12.1",
    "pg": "^8.5.1",
    "phantom": "^6.3.0",
    "read-last-lines": "^1.8.0",
    "reflect-metadata": "^0.1.13",
    "rimraf": "^3.0.2",
    "rxjs": "^6.6.3",
    "ssh2": "^0.8.9",
    "ssh2shell": "^1.9.8",
    "systeminformation": "^5.9.9",
    "typeorm": "^0.2.30",
    "uuid": "^8.3.2",
    "winston": "^3.3.3",
    "winston-daily-rotate-file": "^4.5.5",
    "xlsx": "^0.17.0",
    "xml2js": "^0.4.23"
  },
  "devDependencies": {
    "@nestjs/cli": "^7.5.1",
    "@nestjs/schematics": "^7.1.3",
    "@nestjs/testing": "^7.5.1",
    "@types/cron": "^1.7.2",
    "@types/express": "^4.17.8",
    "@types/jest": "^26.0.15",
    "@types/node": "^14.14.6",
    "@types/passport-jwt": "^3.0.4",
    "@types/passport-local": "^1.0.33",
    "@types/supertest": "^2.0.10",
    "@typescript-eslint/eslint-plugin": "^4.6.1",
    "@typescript-eslint/parser": "^4.6.1",
    "eslint": "^7.12.1",
    "eslint-config-prettier": "7.2.0",
    "eslint-plugin-prettier": "^3.1.4",
    "jest": "^26.6.3",
    "prettier": "^2.1.2",
    "supertest": "^6.0.0",
    "ts-jest": "^26.4.3",
    "ts-loader": "^8.0.8",
    "ts-node": "^9.0.0",
    "tsconfig-paths": "^3.9.0",
    "typescript": "^4.1.3"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "ts"
    ],
    "rootDir": "src",
    "testRegex": ".*\\.spec\\.ts$",
    "transform": {
      "^.+\\.(t|j)s$": "ts-jest"
    },
    "collectCoverageFrom": [
      "**/*.(t|j)s"
    ],
    "coverageDirectory": "../coverage",
    "testEnvironment": "node"
  }
}

Please help!