🐛 Fix environemnt specific build configuration

packages/cra-template/template.json

@@ -52,10 +52,11 @@
     },
     "scripts": {
       "start": "yarn localize && react-scripts start",
-      "build": "yarn build:dev",
-      "build:development": "react-scripts build --target=development",
-      "build:stage": "react-scripts build --target=stage",
-      "build:master": "react-scripts build --target=production",
+      "build": "yarn build:development",
+      "build:development": "export REACT_APP_BUILD_ENV=development && react-scripts build",
+      "build:stage": "export REACT_APP_BUILD_ENV=stage && react-scripts build",
+      "build:production": "export REACT_APP_BUILD_ENV=production && react-scripts build",
+      "build:master": "yarn build:production",
       "test:watch": "react-scripts test",
       "cypress:open": "cypress open",
       "eject": "react-scripts eject",

packages/cra-template/template/src/config/config.js

@@ -1,13 +1,11 @@
 import { merge } from 'lodash';
 import { isEnvDevelopment } from 'constants/index';
 
-const { BUILD_ENV, REACT_APP_NAME } = process.env;
-// eslint-disable-next-line
-const envConfig = require(`./config.${BUILD_ENV}.js`).default;
+const envConfig = require(`./config.${process.env.REACT_APP_BUILD_ENV || process.env.NODE_ENV}.js`).default;
 
 const defaults = {
     // default configuration goes here
-    appName: REACT_APP_NAME,
+    appName: process.env.REACT_APP_NAME,
     devTools: isEnvDevelopment,
     sentry: {
         // TODO: add PUBLIC 'dsn' of your project here:

packages/cra-template/template/src/constants/env.js

@@ -1,4 +1,15 @@
-export const isEnvDevelopment = process.env.NODE_ENV === 'development';
-export const isEnvProduction = process.env.NODE_ENV === 'production';
+const environments = {
+    PRODUCTION: 'production',
+    STAGE: 'stage',
+    DEVELOPMENT: 'development',
+};
+
+export const currentEnv = process.env.REACT_APP_BUILD_ENV || process.env.NODE_ENV;
+
+export const isEnvDevelopment = currentEnv === environments.DEVELOPMENT;
+export const isEnvStage = currentEnv === environments.STAGE;
+export const isEnvProduction = currentEnv === environments.PRODUCTION;
 
 export const isServerEnv = typeof window === 'undefined';
+
+export default environments;

packages/cra-template/template/src/constants/index.js

@@ -1 +1,2 @@
+export { default as env } from './env';
 export * from './env';

packages/react-scripts/custom/config/env.js

@@ -6,53 +6,25 @@ const Target = {
   PRODUCTION: 'production',
 };
 
-const getTargetValue = (args = []) => {
-  const argKey = '--target=';
-  const targetArg = args.find(val => val.startsWith(argKey));
-
-  return targetArg ? targetArg.replace(argKey, '') : targetArg;
-};
-
-const invalidTargetValueError = value =>
+const invalidEnvValueError = value =>
   new Error(
-    `Received invalid --target value: '${value}', choose one of: ${Object.values(
+    `Received invalid REACT_APP_BUILD_ENV value: '${value}', choose one of: ${Object.values(
       Target
     ).join(', ')}`
   );
 
-const getNodeEnv = targetValue => {
-  switch (targetValue) {
-    case Target.DEVELOPMENT:
-      return 'development';
-
-    case Target.STAGE:
-    case Target.PRODUCTION:
-      return 'production';
+const getBuildEnv = () => {
+  const env = process.env.REACT_APP_BUILD_ENV;
 
-    default:
-      throw invalidTargetValueError(targetValue);
-  }
-};
-
-const getBuildEnv = targetValue => {
-  switch (targetValue) {
+  switch (env) {
     case Target.DEVELOPMENT:
     case Target.STAGE:
     case Target.PRODUCTION:
-      return targetValue;
+      return env;
 
     default:
-      throw invalidTargetValueError(targetValue);
+      throw invalidEnvValueError(env);
   }
 };
 
-function getCustomEnvVariables() {
-  const target = getTargetValue(process.argv.slice(2)) || Target.DEVELOPMENT;
-
-  return {
-    BUILD_ENV: getBuildEnv(target),
-    NODE_ENV: getNodeEnv(target),
-  };
-}
-
-module.exports = getCustomEnvVariables;
+module.exports = getBuildEnv;

packages/react-scripts/custom/config/transformWebpackConfig.js

@@ -4,7 +4,7 @@ const webpack = require('webpack');
 const WorkerPlugin = require('worker-plugin');
 
 const paths = require('../config/paths');
-const getCustomEnvVariables = require('./env');
+const getBuildEnv = require('./env');
 const insertPreloaders = require('./utils/insertPreloaders');
 const appendBabelPlugins = require('./utils/appendBabelPlugins');
 const removeMiniCSSExtractLoader = require('./utils/removeMiniCSSExtractLoader');
@@ -94,8 +94,8 @@ const transformPlugins = plugins => {
     plugin => plugin instanceof webpack.DefinePlugin
   );
 
-  const { BUILD_ENV } = getCustomEnvVariables();
-  const configNameRegex = new RegExp(`config.${BUILD_ENV}.js`);
+  const env = getBuildEnv();
+  const configNameRegex = new RegExp(`config.${env}.js`);
 
   plugins.push(
     new WorkerPlugin({