From b8a191bf91697222d50842a444e5c4acac6c43d4 Mon Sep 17 00:00:00 2001 From: Ayrton De Craene Date: Wed, 21 Sep 2016 21:55:36 +0200 Subject: [PATCH 1/3] Load environment file via dotenv if .env file is present --- packages/react-scripts/package.json | 1 + packages/react-scripts/scripts/build.js | 6 ++++++ packages/react-scripts/scripts/start.js | 6 ++++++ packages/react-scripts/scripts/test.js | 6 ++++++ packages/react-scripts/template/README.md | 3 ++- packages/react-scripts/template/gitignore | 1 + 6 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 4779f18eee1..e304f6e31a1 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -34,6 +34,7 @@ "cross-spawn": "4.0.0", "css-loader": "0.24.0", "detect-port": "1.0.0", + "dotenv": "2.0.0", "eslint": "3.5.0", "eslint-config-react-app": "0.2.0", "eslint-loader": "1.5.0", diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index a0805e601ac..f8c3dda4faa 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -12,6 +12,12 @@ // Do this as the first thing so that any code reading it knows the right env. process.env.NODE_ENV = 'production'; +// Load environment variables from .env file. Surpress warnings using silent +// if this file is missing. dotenv will never modify any environment variables +// that have already been set. +// https://github.com/motdotla/dotenv +require('dotenv').config({silent: true}); + var chalk = require('chalk'); var fs = require('fs-extra'); var path = require('path'); diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index 19163169457..530e675d519 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -11,6 +11,12 @@ process.env.NODE_ENV = 'development'; +// Load environment variables from .env file. Surpress warnings using silent +// if this file is missing. dotenv will never modify any environment variables +// that have already been set. +// https://github.com/motdotla/dotenv +require('dotenv').config({silent: true}); + var path = require('path'); var chalk = require('chalk'); var webpack = require('webpack'); diff --git a/packages/react-scripts/scripts/test.js b/packages/react-scripts/scripts/test.js index d297e2d0c4c..8a98aad891f 100644 --- a/packages/react-scripts/scripts/test.js +++ b/packages/react-scripts/scripts/test.js @@ -10,6 +10,12 @@ process.env.NODE_ENV = 'test'; process.env.PUBLIC_URL = ''; +// Load environment variables from .env file. Surpress warnings using silent +// if this file is missing. dotenv will never modify any environment variables +// that have already been set. +// https://github.com/motdotla/dotenv +require('dotenv').config({silent: true}); + const createJestConfig = require('./utils/createJestConfig'); const jest = require('jest'); const path = require('path'); diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 3c9952b8895..5378712fc48 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -434,7 +434,8 @@ REACT_APP_SECRET_CODE=abcdef npm start ``` > Note: Defining environment variables in this manner is temporary for the life of the shell session. Setting -permanent environment variables is outside the scope of these docs. +permanent environment variables in development can be done in a `.env` file in the root of your project. +[dotenv](https://github.com/motdotla/dotenv) takes care of loading these for you. With our environment variable defined, we start the app and consume the values. Remember that the `NODE_ENV` variable will be set for you automatically. When you load the app in the browser and inspect the ``, you will see diff --git a/packages/react-scripts/template/gitignore b/packages/react-scripts/template/gitignore index 56b6cc8a311..6c96c5cff12 100644 --- a/packages/react-scripts/template/gitignore +++ b/packages/react-scripts/template/gitignore @@ -11,4 +11,5 @@ build # misc .DS_Store +.env npm-debug.log From 020c40079087a966d25e60bf2550b3d0240b4820 Mon Sep 17 00:00:00 2001 From: Ayrton De Craene Date: Fri, 23 Sep 2016 10:18:34 +0200 Subject: [PATCH 2/3] Document loading environment variables in .env file --- packages/react-scripts/template/README.md | 63 ++++++++++++++--------- 1 file changed, 40 insertions(+), 23 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 5378712fc48..e946b419e97 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -400,8 +400,8 @@ to `process.env.NODE_ENV`. These environment variables can be useful for displaying information conditionally based on where the project is deployed or consuming sensitive data that lives outside of version control. -First, you need to have environment variables defined, which can vary between OSes. For example, let's say you wanted to -consume a secret defined in the environment inside a `
`: +First, you need to have environment variables defined. For example, let's say you wanted to consume a secret defined +in the environment inside a ``: ```jsx render() { @@ -416,27 +416,6 @@ render() { } ``` -The above form is looking for a variable called `REACT_APP_SECRET_CODE` from the environment. In order to consume this -value, we need to have it defined in the environment: - -#### Windows (cmd.exe) - -```cmd -set REACT_APP_SECRET_CODE=abcdef&&npm start -``` - -(Note: the lack of whitespace is intentional.) - -#### Linux, OS X (Bash) - -```bash -REACT_APP_SECRET_CODE=abcdef npm start -``` - -> Note: Defining environment variables in this manner is temporary for the life of the shell session. Setting -permanent environment variables in development can be done in a `.env` file in the root of your project. -[dotenv](https://github.com/motdotla/dotenv) takes care of loading these for you. - With our environment variable defined, we start the app and consume the values. Remember that the `NODE_ENV` variable will be set for you automatically. When you load the app in the browser and inspect the ``, you will see its value set to `abcdef`, and the bold text will show the environment provided when using `npm start`: @@ -458,6 +437,44 @@ if (process.env.NODE_ENV !== 'production') { } ``` +The above form is looking for a variable called `REACT_APP_SECRET_CODE` from the environment. In order to consume this +value, we need to have it defined in the environment. This can be done using two ways: either in your shell or in +a `.env` file. + +### Adding Temporary Environment Variables In Your Shell + +Defining environment variables can vary between OSes. It's also important to know that this manner is temporary for the +life of the shell session. + +#### Windows (cmd.exe) + +```cmd +set REACT_APP_SECRET_CODE=abcdef&&npm start +``` + +(Note: the lack of whitespace is intentional.) + +#### Linux, OS X (Bash) + +```bash +REACT_APP_SECRET_CODE=abcdef npm start +``` + +### Adding Development Environment Variables In `.env` + +>Note: this feature is available with `react-scripts@0.5.0` and higher. + +Defining permanent environment variables in development can be done in a `.env` file in the root of your project. +[dotenv](https://github.com/motdotla/dotenv) takes care of loading these for you. + +```bash +echo "REACT_APP_SECRET_CODE=abcsdef" >> .env +npm start +``` + +>Note: if you are defining environment variables for development your CI and/or hosting platform will most likely need +these defined as well. Consult their documentation how to do this. Eg. [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars) + ## Can I Use Decorators? Many popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation. From 673a8c9aa287873c76e5b75ce215f30cf0d878b5 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 23 Sep 2016 11:58:26 +0100 Subject: [PATCH 3/3] Minor doc tweaks --- packages/react-scripts/template/README.md | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index e946b419e97..73b95584cb9 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -400,7 +400,7 @@ to `process.env.NODE_ENV`. These environment variables can be useful for displaying information conditionally based on where the project is deployed or consuming sensitive data that lives outside of version control. -First, you need to have environment variables defined. For example, let's say you wanted to consume a secret defined +First, you need to have environment variables defined. For example, let’s say you wanted to consume a secret defined in the environment inside a ``: ```jsx @@ -416,9 +416,9 @@ render() { } ``` -With our environment variable defined, we start the app and consume the values. Remember that the `NODE_ENV` -variable will be set for you automatically. When you load the app in the browser and inspect the ``, you will see -its value set to `abcdef`, and the bold text will show the environment provided when using `npm start`: +During the build, `process.env.REACT_APP_SECRET_CODE` will be replaced with the current value of the `REACT_APP_SECRET_CODE` environment variable. Remember that the `NODE_ENV` variable will be set for you automatically. + +When you load the app in the browser and inspect the ``, you will see its value set to `abcdef`, and the bold text will show the environment provided when using `npm start`: ```html
@@ -464,16 +464,17 @@ REACT_APP_SECRET_CODE=abcdef npm start >Note: this feature is available with `react-scripts@0.5.0` and higher. -Defining permanent environment variables in development can be done in a `.env` file in the root of your project. -[dotenv](https://github.com/motdotla/dotenv) takes care of loading these for you. +To define permanent environment vairables, create a file called `.env` in the root of your project: -```bash -echo "REACT_APP_SECRET_CODE=abcsdef" >> .env -npm start ``` +REACT_APP_SECRET_CODE=abcdef +``` + +These variables will act as the defaults if the machine does not explicitly set them. +Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details. ->Note: if you are defining environment variables for development your CI and/or hosting platform will most likely need -these defined as well. Consult their documentation how to do this. Eg. [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars) +>Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need +these defined as well. Consult their documentation how to do this. For example, see the documentation for [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars). ## Can I Use Decorators?