-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
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
Changes from 1 commit
ffa82b8
a2b4b54
86eda51
3ea269a
929bf72
6fcf8e6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
- Loading branch information
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2198,27 +2198,31 @@ 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. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think using |
||
|
||
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 | ||
{ | ||
|
@@ -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: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. These instructions should mention the |
||
|
||
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` | ||
|
||
|
||
|
||
|
There was a problem hiding this comment.
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"