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

jmuzsik · 2018-03-06T23:17:58Z

Hi, in reference to issue 4071

A doc issue:

And that's exactly what it looks like around the surrounding context!

facebook-github-bot · 2018-03-06T23:19:34Z

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

facebook-github-bot · 2018-03-06T23:39:20Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

iansu · 2018-03-08T18:33:24Z

packages/react-scripts/template/README.md

+
+    - But you can run:
+
+      - `REACT_APP_NODE_ENV=staging npm run build`


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.

iansu · 2018-03-08T18:35:44Z

packages/react-scripts/template/README.md

+
+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:


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

jmuzsik · 2018-03-08T21:19:00Z

Ok, new format:

What do you think? @iansu

iansu · 2018-04-10T19:08:58Z

packages/react-scripts/template/README.md

@@ -2196,6 +2196,46 @@ 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 be able to conditionally run different processes depending on the specified environment.


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.

iansu · 2018-04-10T19:16:32Z

packages/react-scripts/template/README.md

+
+    - 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:


Change this to something like: "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."

iansu · 2018-04-10T19:17:17Z

packages/react-scripts/template/README.md

+
+    - To install `env-cmd` you can do so either locally or globally:
+
+        - `npm install env-cmd` or `npm install -g env-cmd`


Let's leave out the option of globally install env-cmd.

iansu · 2018-04-10T19:19:40Z

packages/react-scripts/template/README.md

+  // ...
+}
+```
+Then you can run `npm run build:staging` or whatever other environment you would like to set up.


Change this to something like "Then you can run npm run build:staging to build with the staging environment config. You can specify other environments in the same way."

iansu · 2018-04-10T19:21:09Z

packages/react-scripts/template/README.md

@@ -2196,6 +2196,46 @@ 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


Change this to something like "Customizing Environment Variables for a Build"

jmuzsik · 2018-04-14T23:31:22Z

Thanks @iansu! Hope it looks good now

Timer · 2018-04-15T15:52:39Z

This looks great -- I made a couple final tweaks.

Thanks much!

* upstream/next: (35 commits) Update envinfo and issue template (facebook#4375) Update sass-loader to 7.0.1 (facebook#4376) Support package distribution tags (facebook#4350) fix broken css module support in prod (facebook#4361) Bumped jest version to 22.4.1 (facebook#4362) bump babel 7 to beta 46 bump lint-staged to node 10 compatible version documentation: Added License to the README.md (facebook#4294) Bump `fsevents`. (facebook#4331) Fix typo in e2e-simple.sh comment (facebook#4323) Add Sass loader (facebook#4195) Fix some typos in README.md (facebook#4286) Added learnstorybook.com to Storybook links (facebook#4298) Document multiple build environments via `env-cmd` facebook#4071 (facebook#4117) Fixed link to CSS imports blog post Update CSS Modules localIndetName (facebook#4192) Enable loose mode for `class-properties` (facebook#4248) bump babel 7 beta (facebook#4253) Small typo fix facebook#4217 Changelog for 1.1.4 ...

* next: (35 commits) Update envinfo and issue template (facebook#4375) Update sass-loader to 7.0.1 (facebook#4376) Support package distribution tags (facebook#4350) fix broken css module support in prod (facebook#4361) Bumped jest version to 22.4.1 (facebook#4362) bump babel 7 to beta 46 bump lint-staged to node 10 compatible version documentation: Added License to the README.md (facebook#4294) Bump `fsevents`. (facebook#4331) Fix typo in e2e-simple.sh comment (facebook#4323) Add Sass loader (facebook#4195) Fix some typos in README.md (facebook#4286) Added learnstorybook.com to Storybook links (facebook#4298) Document multiple build environments via `env-cmd` facebook#4071 (facebook#4117) Fixed link to CSS imports blog post Update CSS Modules localIndetName (facebook#4192) Enable loose mode for `class-properties` (facebook#4248) bump babel 7 beta (facebook#4253) Small typo fix facebook#4217 Changelog for 1.1.4 ...

niwsa · 2018-05-19T18:16:19Z

@Timer The readme does not have a updated documentation for multiple environments.

Timer · 2018-05-19T20:55:09Z

It's on the next branch. :)

gmonte · 2018-06-01T05:29:02Z

Ok... But my .babelrc always get env production.

{
  "env": {
    "production": {
      "plugins": [
        "transform-remove-console"
      ]
    }
  },
  "presets": [
    "react-app"
  ]
}

In that case I will never have consoles in my build, even if I run build with another .env.
How would I do if I wanted to run babel plugins on a specific env?

Timer · 2018-06-01T12:18:01Z

You cannot change NODE_ENV or BABEL_ENV.

…ebook#4117) * Docs - Document multiple build environments via * Docs - Document multiple build environments via * Docs - Document multiple build environments via * Docs - Document multiple build environments via env-cmd * fix - based upon requests * Update README.md

Jerry added 3 commits March 6, 2018 12:36

Docs - Document multiple build environments via

ffa82b8

Docs - Document multiple build environments via

a2b4b54

Docs - Document multiple build environments via

86eda51

facebook-github-bot added the CLA Signed label Mar 6, 2018

iansu mentioned this pull request Mar 8, 2018

Documentation for npm run build #4111

Closed

iansu suggested changes Mar 8, 2018

View reviewed changes

Docs - Document multiple build environments via env-cmd

3ea269a

Timer added this to the 2.x milestone Mar 26, 2018

Timer added the tag: documentation label Mar 26, 2018

iansu suggested changes Apr 10, 2018

View reviewed changes

fix - based upon requests

929bf72

Update README.md

6fcf8e6

Timer merged commit fc2f63a into facebook:next Apr 15, 2018

Timer modified the milestones: 2.x, 100.0.0, 2.0.0 Apr 15, 2018

Timer mentioned this pull request Apr 15, 2018

Document multiple build environments via env-cmd #4071

Closed

lock bot locked and limited conversation to collaborators Jan 19, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jmuzsik commented Mar 6, 2018

facebook-github-bot commented Mar 6, 2018

facebook-github-bot commented Mar 6, 2018

iansu Mar 8, 2018

iansu Mar 8, 2018

jmuzsik commented Mar 8, 2018

iansu Apr 10, 2018

iansu Apr 10, 2018

iansu Apr 10, 2018

iansu Apr 10, 2018

iansu Apr 10, 2018

jmuzsik commented Apr 14, 2018

Timer commented Apr 15, 2018

niwsa commented May 19, 2018 •

edited

Loading

Timer commented May 19, 2018

gmonte commented Jun 1, 2018 •

edited

Loading

Timer commented Jun 1, 2018


		- But you can run:

		- `REACT_APP_NODE_ENV=staging npm run build`


		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:


		- 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:


		- To install `env-cmd` you can do so either locally or globally:

		- `npm install env-cmd` or `npm install -g env-cmd`

		@@ -2196,6 +2196,46 @@ 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

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

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

Conversation

jmuzsik commented Mar 6, 2018

facebook-github-bot commented Mar 6, 2018

facebook-github-bot commented Mar 6, 2018

iansu Mar 8, 2018

Choose a reason for hiding this comment

iansu Mar 8, 2018

Choose a reason for hiding this comment

jmuzsik commented Mar 8, 2018

iansu Apr 10, 2018

Choose a reason for hiding this comment

iansu Apr 10, 2018

Choose a reason for hiding this comment

iansu Apr 10, 2018

Choose a reason for hiding this comment

iansu Apr 10, 2018

Choose a reason for hiding this comment

iansu Apr 10, 2018

Choose a reason for hiding this comment

jmuzsik commented Apr 14, 2018

Timer commented Apr 15, 2018

niwsa commented May 19, 2018 • edited Loading

Timer commented May 19, 2018

gmonte commented Jun 1, 2018 • edited Loading

Timer commented Jun 1, 2018

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

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

niwsa commented May 19, 2018 •

edited

Loading

gmonte commented Jun 1, 2018 •

edited

Loading