Trigger a React build fail error if environment variable is missing - reactjs

Question

Is there any way to fail the yarn build step in case any environment variable is missing. In the bitbucket pipeline script the build process is executing even if no env variable is set under the repository variables.

Answer 1

Yes, this can be possible using an approach in the React app. In the root directory create a JS file named as validate-env.js and add the below content in it (I'm using only these env variables in my app - change them according to yours)
require('dotenv').config();
if (!process.env.REACT_APP_WEB_SOCKET_URL) {
throw 'REACT_APP_WEB_SOCKET_URL undefined';
} else if (!process.env.REACT_APP_API_URL_PROD) {
throw 'REACT_APP_API_URL_PROD undefined';
} else if (!process.env.REACT_APP_NODE_ENV) {
throw 'REACT_APP_NODE_ENV undefined';
} else if (!process.env.REACT_APP_CATE_APP) {
throw 'REACT_APP_CATERING_APP undefined';
} else if (!process.env.REACT_APP_FRESH_CHAT_TOKEN) {
throw 'REACT_APP_FRESH_CHAT_TOKEN undefined';
} else if (!process.env.REACT_APP_SENTRY_DSN_KEY) {
throw 'REACT_APP_SENTRY_DSN_KEY undefined';
} else {
console.log('required env set');
}
Make sure to install a dev dependency as yarn add dotenv -D
Now under the package.json file > script section add this line
"validate-env": "node ./validate-env",
and update the build script as (if you are using craco)
"build": "yarn validate-env && craco build",
So, whenever you will run yarn build. It will first check if all the env are present. IF anyone is missing it will fail the build process.