From ffa82b8dd6409b6f375d5e5af01d234ef64fad4d Mon Sep 17 00:00:00 2001 From: Jerry Date: Tue, 6 Mar 2018 12:36:35 -0500 Subject: [PATCH 1/6] Docs - Document multiple build environments via --- packages/react-scripts/template/README.md | 57 +++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 8d282b52fe4..8791b84161d 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2196,6 +2196,63 @@ If you are not using the HTML5 `pushState` history API or not using client-side This will make sure that all the asset paths are relative to `index.html`. You will then be able to move your app from `http://mywebsite.com` to `http://mywebsite.com/relativepath` or even `http://mywebsite.com/relative/path` without having to rebuild it. +#### Building for Multiple Environments + +Applications are generally split between different environments such as staging, production, and development. To allow the app to run in these different environments one must set environment variables to conditionally run different processes depending on the environment. + +`create-react-app` handles environment variables in a specific way. [Read More Here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) + +Primarily, You cannot override `NODE_ENV`, it is always set to `'production'` + +So you cannot run `NODE_ENV=staging npm run build` + +And, it is mandated that you prefix any custom environment variables with `REACT_APP_` + +So you can run `REACT_APP_NODE_ENV=staging npm run build` + +And then you can do conditionals depending on what this environment variable is set to: + +```js +if (process.env.REACT_APP_NODE_ENV === 'staging') { + analytics.setEnvironment('staging'); +} +``` + +A better way is to do this is within your `package.json` : + +```js +{ + // ... + "scripts": { + "build:staging": "REACT_APP_NODE_ENV=staging npm run build", + // ... + } + // ... +} +``` + +Though, the most simplified way is to use .env files as so: + +Within `.env.staging` write this: `REACT_APP_NODE_ENV=staging` + +and within your `package.json`: + +```js +{ + // ... + "scripts": { + "build:staging": "env-cmd .env.staging npm run build", + // ... + } + // ... +} +``` +This will allow you to run `npm run build:staging` + +`.env.production` will be the fallback option in this case as `'production'` is the default `env` + + + ### [Azure](https://azure.microsoft.com/) See [this](https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321) blog post on how to deploy your React app to Microsoft Azure. From a2b4b54fbf85f15ae0edf7714f3a769b173c99bc Mon Sep 17 00:00:00 2001 From: Jerry Date: Tue, 6 Mar 2018 17:58:01 -0500 Subject: [PATCH 2/6] Docs - Document multiple build environments via --- packages/react-scripts/template/README.md | 30 ++++++++++++++--------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 8791b84161d..af4ac31fcf0 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2198,19 +2198,23 @@ This will make sure that all the asset paths are relative to `index.html`. You w #### Building for Multiple Environments -Applications are generally split between different environments such as staging, production, and development. To allow the app to run in these different environments one must set environment variables to conditionally run different processes depending on the environment. +Applications are generally split between different environments such as staging, production, and development. To allow the app to run in these different environments one must set environment variables to be able to conditionally run different processes depending on the specified environment. -`create-react-app` handles environment variables in a specific way. [Read More Here](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) +`create-react-app` handles environment variables in a specific way. [Adding Custom Environment Variables](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) -Primarily, You cannot override `NODE_ENV`, it is always set to `'production'` +1. You cannot override `NODE_ENV`, it is always set to `'production'` -So you cannot run `NODE_ENV=staging npm run build` +2. It is mandated that you prefix any custom environment variables with `REACT_APP_` -And, it is mandated that you prefix any custom environment variables with `REACT_APP_` + - This means you cannot run: -So you can run `REACT_APP_NODE_ENV=staging npm run build` + - `NODE_ENV=staging npm run build` -And then you can do conditionals depending on what this environment variable is set to: + - But you can run: + + - `REACT_APP_NODE_ENV=staging npm run build` + +When the environment variable is set you can do conditionals within your code: ```js if (process.env.REACT_APP_NODE_ENV === 'staging') { @@ -2218,7 +2222,7 @@ if (process.env.REACT_APP_NODE_ENV === 'staging') { } ``` -A better way is to do this is within your `package.json` : +Though, you should write this command within your `package.json` : ```js { @@ -2231,9 +2235,11 @@ A better way is to do this is within your `package.json` : } ``` -Though, the most simplified way is to use .env files as so: +But, the ideal way is to use `.env` files as you can specify many environment variables simultaneously. This can be done as so: + +Within `.env.staging` write this: -Within `.env.staging` write this: `REACT_APP_NODE_ENV=staging` +`REACT_APP_NODE_ENV=staging` and within your `package.json`: @@ -2247,9 +2253,9 @@ and within your `package.json`: // ... } ``` -This will allow you to run `npm run build:staging` +Then run `npm run build:staging` -`.env.production` will be the fallback option in this case as `'production'` is the default `env` +You may use `.env.production` as the fallback option in this case as `'production'` is the default `NODE_ENV` From 86eda518d82757996e5ccbf7018a42ccb8dbbb9c Mon Sep 17 00:00:00 2001 From: Jerry Date: Tue, 6 Mar 2018 18:13:16 -0500 Subject: [PATCH 3/6] Docs - Document multiple build environments via --- packages/react-scripts/template/README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index af4ac31fcf0..431e07f989d 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2214,7 +2214,7 @@ Applications are generally split between different environments such as staging, - `REACT_APP_NODE_ENV=staging npm run build` -When the environment variable is set you can do conditionals within your code: +When the environment variable is set you can then do conditionals within your code: ```js if (process.env.REACT_APP_NODE_ENV === 'staging') { @@ -2257,8 +2257,6 @@ Then run `npm run build:staging` You may use `.env.production` as the fallback option in this case as `'production'` is the default `NODE_ENV` - - ### [Azure](https://azure.microsoft.com/) See [this](https://medium.com/@to_pe/deploying-create-react-app-on-microsoft-azure-c0f6686a4321) blog post on how to deploy your React app to Microsoft Azure. From 3ea269a000fb49ad36d1e835200467573d128f0e Mon Sep 17 00:00:00 2001 From: Jerry Date: Thu, 8 Mar 2018 16:16:01 -0500 Subject: [PATCH 4/6] Docs - Document multiple build environments via env-cmd --- packages/react-scripts/template/README.md | 45 ++++++----------------- 1 file changed, 12 insertions(+), 33 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 431e07f989d..921db6167be 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2200,50 +2200,29 @@ This will make sure that all the asset paths are relative to `index.html`. You w Applications are generally split between different environments such as staging, production, and development. To allow the app to run in these different environments one must set environment variables to be able to conditionally run different processes depending on the specified environment. -`create-react-app` handles environment variables in a specific way. [Adding Custom Environment Variables](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) +`create-react-app` handles environment variables in a specific way. [This link](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) explains how it does but the main facts to know in relation to this are: 1. You cannot override `NODE_ENV`, it is always set to `'production'` 2. It is mandated that you prefix any custom environment variables with `REACT_APP_` - - This means you cannot run: + - So you cannot depend upon using `NODE_ENV` to set the environment of your application. - - `NODE_ENV=staging npm run build` +The ideal way to do this is to use `.env` files as you can specify many environment variables simultaneously. This can be done as so: - - But you can run: +1. Within `.env.staging` you can set your environment variables: - - `REACT_APP_NODE_ENV=staging npm run build` + - `REACT_APP_API_URL=http://api-staging.example.com` -When the environment variable is set you can then do conditionals within your code: +2. You can use the [env-cmd](https://www.npmjs.com/package/env-cmd) npm package in conjunction with the `.env` file. -```js -if (process.env.REACT_APP_NODE_ENV === 'staging') { - analytics.setEnvironment('staging'); -} -``` - -Though, you should write this command within your `package.json` : - -```js -{ - // ... - "scripts": { - "build:staging": "REACT_APP_NODE_ENV=staging npm run build", - // ... - } - // ... -} -``` + - To install `env-cmd` you can do so either locally or globally: -But, the ideal way is to use `.env` files as you can specify many environment variables simultaneously. This can be done as so: + - `npm install env-cmd` or `npm install -g env-cmd` -Within `.env.staging` write this: +3. Lastly, within your `package.json`: -`REACT_APP_NODE_ENV=staging` - -and within your `package.json`: - -```js +```javascript { // ... "scripts": { @@ -2253,9 +2232,9 @@ and within your `package.json`: // ... } ``` -Then run `npm run build:staging` +Then you can run `npm run build:staging` or whatever other environment you would like to set up. -You may use `.env.production` as the fallback option in this case as `'production'` is the default `NODE_ENV` +You may use `.env.production` as the fallback option in this case as `'production'` is the default `NODE_ENV`. ### [Azure](https://azure.microsoft.com/) From 929bf7228811b4c53642c60434894bb79ebe9d09 Mon Sep 17 00:00:00 2001 From: jmuzsik Date: Sat, 14 Apr 2018 19:30:26 -0400 Subject: [PATCH 5/6] fix - based upon requests --- packages/react-scripts/template/README.md | 28 +++++++---------------- 1 file changed, 8 insertions(+), 20 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 921db6167be..0e42ca89a3f 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -2196,33 +2196,20 @@ If you are not using the HTML5 `pushState` history API or not using client-side This will make sure that all the asset paths are relative to `index.html`. You will then be able to move your app from `http://mywebsite.com` to `http://mywebsite.com/relativepath` or even `http://mywebsite.com/relative/path` without having to rebuild it. -#### Building for Multiple Environments +#### Customizing Environment Variables for a Build -Applications are generally split between different environments such as staging, production, and development. To allow the app to run in these different environments one must set environment variables to be able to conditionally run different processes depending on the specified environment. - -`create-react-app` handles environment variables in a specific way. [This link](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables) explains how it does but the main facts to know in relation to this are: - -1. You cannot override `NODE_ENV`, it is always set to `'production'` - -2. It is mandated that you prefix any custom environment variables with `REACT_APP_` - - - So you cannot depend upon using `NODE_ENV` to set the environment of your application. - -The ideal way to do this is to use `.env` files as you can specify many environment variables simultaneously. This can be done as so: - -1. Within `.env.staging` you can set your environment variables: +You can specify a new environment by creating a custom `env` file. For example, to specify config for a staging environment create a file named `.env.staging` +1. Within `.env.staging` you can set your environment variables as so: - `REACT_APP_API_URL=http://api-staging.example.com` 2. You can use the [env-cmd](https://www.npmjs.com/package/env-cmd) npm package in conjunction with the `.env` file. - - - To install `env-cmd` you can do so either locally or globally: - - - `npm install env-cmd` or `npm install -g env-cmd` + - To install `env-cmd` you can do: + - `npm install env-cmd` 3. Lastly, within your `package.json`: -```javascript +``` json { // ... "scripts": { @@ -2232,7 +2219,8 @@ The ideal way to do this is to use `.env` files as you can specify many environm // ... } ``` -Then you can run `npm run build:staging` or whatever other environment you would like to set up. + +Then you can run `npm run build:staging` to build with the staging environment config. You can specify other environments in the same way. You may use `.env.production` as the fallback option in this case as `'production'` is the default `NODE_ENV`. From 6fcf8e65d37435d7748013b608cdfe530412ef80 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sun, 15 Apr 2018 11:52:14 -0400 Subject: [PATCH 6/6] Update README.md --- packages/react-scripts/template/README.md | 45 ++++++++++++----------- 1 file changed, 23 insertions(+), 22 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 0e42ca89a3f..99a9d1e129f 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -87,6 +87,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Serving Apps with Client-Side Routing](#serving-apps-with-client-side-routing) - [Service Worker Considerations](#service-worker-considerations) - [Building for Relative Paths](#building-for-relative-paths) + - [Customizing Environment Variables for Arbitrary Build Environments](#customizing-environment-variables-for-arbitrary-build-environments) - [Azure](#azure) - [Firebase](#firebase) - [GitHub Pages](#github-pages) @@ -2196,33 +2197,33 @@ If you are not using the HTML5 `pushState` history API or not using client-side This will make sure that all the asset paths are relative to `index.html`. You will then be able to move your app from `http://mywebsite.com` to `http://mywebsite.com/relativepath` or even `http://mywebsite.com/relative/path` without having to rebuild it. -#### Customizing Environment Variables for a Build +### Customizing Environment Variables for Arbitrary Build Environments -You can specify a new environment by creating a custom `env` file. For example, to specify config for a staging environment create a file named `.env.staging` +You can create an arbitrary build environment by creating a custom `.env` file and loading it using [env-cmd](https://www.npmjs.com/package/env-cmd). -1. Within `.env.staging` you can set your environment variables as so: - - `REACT_APP_API_URL=http://api-staging.example.com` +For example, to create a build environment for a staging environment: -2. You can use the [env-cmd](https://www.npmjs.com/package/env-cmd) npm package in conjunction with the `.env` file. - - To install `env-cmd` you can do: - - `npm install env-cmd` - -3. Lastly, within your `package.json`: - -``` json -{ - // ... - "scripts": { - "build:staging": "env-cmd .env.staging npm run build", - // ... - } - // ... -} -``` +1. Create a file called `.env.staging` +1. Set environment variables as you would any other `.env` file (e.g. `REACT_APP_API_URL=http://api-staging.example.com`) +1. Install [env-cmd](https://www.npmjs.com/package/env-cmd) + ```sh + $ npm install env-cmd --save + $ # or + $ yarn add env-cmd + ``` +1. Add a new script to your `package.json`, building with your new environment: + ```json + { + "scripts": { + "build:staging": "env-cmd .env.staging npm run build", + } + } + ``` -Then you can run `npm run build:staging` to build with the staging environment config. You can specify other environments in the same way. +Now you can run `npm run build:staging` to build with the staging environment config. +You can specify other environments in the same way. -You may use `.env.production` as the fallback option in this case as `'production'` is the default `NODE_ENV`. +Variables in `.env.production` will be used as fallback because `NODE_ENV` will always be set to `production` for a build. ### [Azure](https://azure.microsoft.com/)