diff --git a/packages/cra-template/template.json b/packages/cra-template/template.json index dcded08f13e..5b8fe511e55 100644 --- a/packages/cra-template/template.json +++ b/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", diff --git a/packages/cra-template/template/src/config/config.js b/packages/cra-template/template/src/config/config.js index bac4a201dda..bac49afbf77 100644 --- a/packages/cra-template/template/src/config/config.js +++ b/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: diff --git a/packages/cra-template/template/src/constants/env.js b/packages/cra-template/template/src/constants/env.js index 1a03705ecf3..823ce8a748f 100644 --- a/packages/cra-template/template/src/constants/env.js +++ b/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; diff --git a/packages/cra-template/template/src/constants/index.js b/packages/cra-template/template/src/constants/index.js index c1532d6d2e4..475d17452d9 100644 --- a/packages/cra-template/template/src/constants/index.js +++ b/packages/cra-template/template/src/constants/index.js @@ -1 +1,2 @@ +export { default as env } from './env'; export * from './env'; diff --git a/packages/react-scripts/custom/config/env.js b/packages/react-scripts/custom/config/env.js index 9c6bb7232e4..50eee3f0e71 100644 --- a/packages/react-scripts/custom/config/env.js +++ b/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; diff --git a/packages/react-scripts/custom/config/transformWebpackConfig.js b/packages/react-scripts/custom/config/transformWebpackConfig.js index 7b7107096ef..af4cb52f841 100644 --- a/packages/react-scripts/custom/config/transformWebpackConfig.js +++ b/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({