mirror of
https://github.com/jbranchaud/til
synced 2026-01-05 08:08:02 +00:00
Add Accessing Env Vars In create-react-app as a react til
This commit is contained in:
@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
|
|||||||
For a steady stream of TILs from a variety of rocketeers, checkout
|
For a steady stream of TILs from a variety of rocketeers, checkout
|
||||||
[til.hashrocket.com](https://til.hashrocket.com/).
|
[til.hashrocket.com](https://til.hashrocket.com/).
|
||||||
|
|
||||||
_582 TILs and counting..._
|
_583 TILs and counting..._
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -409,6 +409,7 @@ _582 TILs and counting..._
|
|||||||
|
|
||||||
### React
|
### 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)
|
- [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)
|
- [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)
|
- [Passing Props Down To React-Router Route](react/passing-props-down-to-react-router-route.md)
|
||||||
|
|||||||
27
react/accessing-env-vars-in-create-react-app.md
Normal file
27
react/accessing-env-vars-in-create-react-app.md
Normal file
@@ -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)
|
||||||
Reference in New Issue
Block a user