diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 4779f18e..e304f6e3 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 a0805e60..f8c3dda4 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 e14b390e..58c4c4a9 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 d297e2d0..8a98aad8 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 3c9952b8..73b95584 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,29 +416,9 @@ 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: +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. -#### 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 is outside the scope of these docs. - -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`: +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
@@ -457,6 +437,45 @@ 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. + +To define permanent environment vairables, create a file called `.env` in the root of your project: + +``` +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. 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? Many popular libraries use [decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) in their documentation. diff --git a/packages/react-scripts/template/gitignore b/packages/react-scripts/template/gitignore index 56b6cc8a..6c96c5cf 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