Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Document multiple build environments via env-cmd #4071 #4117

Merged
merged 6 commits into from
Apr 15, 2018
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Docs - Document multiple build environments via
  • Loading branch information
Jerry committed Mar 6, 2018
commit a2b4b54fbf85f15ae0edf7714f3a769b173c99bc
30 changes: 18 additions & 12 deletions packages/react-scripts/template/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2198,27 +2198,31 @@ This will make sure that all the asset paths are relative to `index.html`. You w

#### Building for Multiple Environments
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change this to something like "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 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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove lines 2201 through 2209. It's explained elsewhere how Create React App handles environment variables and we don't need to cover it again.


`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`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think using NODE_ENV and REACT_APP_NODE_ENV for this example is potentially confusing. The similar names implies that there is some connection between them. The example we commonly use is something like REACT_APP_API_URL which is set to one value in .env.production or .env and then overridden for other environments.


When the environment variable is set you can do conditionals within your code:

```js
if (process.env.REACT_APP_NODE_ENV === 'staging') {
analytics.setEnvironment('staging');
}
```

A better way is to do this is within your `package.json` :
Though, you should write this command within your `package.json` :

```js
{
Expand All @@ -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:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These instructions should mention the env-cmd package and how to install it.


Within `.env.staging` write this: `REACT_APP_NODE_ENV=staging`
`REACT_APP_NODE_ENV=staging`

and within your `package.json`:

Expand All @@ -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`



Expand Down