Bitbucket pipelines not getting env variables - reactjs

Question

I'm using Bitbucket pipelines to deploy my react app to the s3 bucket, deployments work fine but unfortunately, my process.env variables are undefined. I already add my all env variables in deployment variables.
bitbucket-pipeline.yml:
image: node:14
pipelines:
branches:
master:
- parallel:
- step:
name: Build and Test
caches:
- node
script:
- rm -rf package-lock.json
- npm install
- npm rebuild node-sass
- CI=false npm run build:prod
artifacts:
- build/**
- step:
name: Security Scan
script:
# See more security tools at https://bitbucket.org/product/features/pipelines/integrations?&category=security
- pipe: atlassian/git-secrets-scan:0.5.1
- step:
name: Deploy to Production
deployment: Production
trigger: manual
clone:
enabled: false
script:
# sync your files to S3
- pipe: atlassian/aws-s3-deploy:1.1.0
variables:
AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
S3_BUCKET: $S3_BUCKET
LOCAL_PATH: 'build'
build script in package.json
"build": "env-cmd -f .env.prod react-scripts build",
.env.prod
REACT_APP_BASE_URL=http://myurl/api
App.js
import { useEffect } from "react";
import axios from 'axios'
const App = () => {
const getData = async () => {
console.log("base url: ", process.env.REACT_APP_BASE_URL); // it is undefined
const response = await axios.get(`${process.env.REACT_APP_BASE_URL}/api/users`);
console.log("response: ", response)
}
useEffect(() => {
getData();
}, [])
return <h1>My Component</h1>
};
}
The problem is when I run npm run build locally so the build holds all the env variables from .env.prod because the file that file exists in my local machine but in the pipe line I put the all .env.prod env variables inside deployment variables but unfortunately all the env variables are undefined

Answer 1

React runs in the user's web browser and therefore does not have access to environment variables running on the server. They are different environments.
You can embed environment variables in your app at build time:
Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.
The "at build time" part of this is important. To include and use your REACT_APP_BASE_URL variable in your app, make sure to define it in a way your "Build and Test" step can see.
Assuming you have defined that variable for the Production deployment environment, make sure to use that environment for the build step:
- step:
name: Build and Test
# Add this
deployment: Production
caches:
- node
script:
- rm -rf package-lock.json
- npm install
- npm rebuild node-sass
- CI=false npm run build:prod
artifacts:
- build/**

Answer 2

In my case, with the help of Chris I solved it by adding all environment variables inside repository variables