From 004139a7472219a09c733610d0cc675d62f29667 Mon Sep 17 00:00:00 2001 From: jbranchaud Date: Sun, 5 Nov 2017 10:18:39 -0600 Subject: [PATCH] Add Accessing Env Vars In create-react-app as a react til --- README.md | 3 ++- .../accessing-env-vars-in-create-react-app.md | 27 +++++++++++++++++++ 2 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 react/accessing-env-vars-in-create-react-app.md diff --git a/README.md b/README.md index cb45d7c..e9f5fdd 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/). For a steady stream of TILs from a variety of rocketeers, checkout [til.hashrocket.com](https://til.hashrocket.com/). -_582 TILs and counting..._ +_583 TILs and counting..._ --- @@ -409,6 +409,7 @@ _582 TILs and counting..._ ### React +- [Accessing Env Vars In create-react-app](react/accessing-env-vars-in-create-react-app.md) - [Force A Component To Only Have One Child](react/force-a-component-to-only-have-one-child.md) - [Inline Style Attributes Should Be Camel Cased](react/inline-style-attributes-should-be-camel-cased.md) - [Passing Props Down To React-Router Route](react/passing-props-down-to-react-router-route.md) diff --git a/react/accessing-env-vars-in-create-react-app.md b/react/accessing-env-vars-in-create-react-app.md new file mode 100644 index 0000000..0ed3ce7 --- /dev/null +++ b/react/accessing-env-vars-in-create-react-app.md @@ -0,0 +1,27 @@ +# Access Env Vars In create-react-app + +Environment-specific configurations are an important part of most +applications. You can access environment variables in your create-react-app +code using `process.env`. + +There are a couple built-in environment variables, such as `NODE_ENV`. +Anything custom that you want to provide must be prepended with +`REACT_APP_`. If it isn't, that environment variable will be ignored with no +warning. + +The following line of code + +```javascript +const base_api_url = process.env.REACT_APP_BASE_API_URL; +``` + +will have access to whatever that value is in the environment when the +server is started or the app is built. + +Set that value inline like so: + +``` +REACT_APP_BASE_API_URL="https://api.my_app.com" yarn start +``` + +[source](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables)