Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zetachang/react-native-dotenv
A Babel preset let you import application configs from .env file (zero runtime dependency)
https://github.com/zetachang/react-native-dotenv
babel dotenv react-native
Last synced: 3 months ago
JSON representation
A Babel preset let you import application configs from .env file (zero runtime dependency)
- Host: GitHub
- URL: https://github.com/zetachang/react-native-dotenv
- Owner: zetachang
- License: mit
- Archived: true
- Created: 2016-09-05T17:20:11.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-05-27T18:01:02.000Z (over 4 years ago)
- Last Synced: 2024-09-25T07:33:38.680Z (3 months ago)
- Topics: babel, dotenv, react-native
- Language: JavaScript
- Homepage:
- Size: 63.5 KB
- Stars: 915
- Watchers: 12
- Forks: 68
- Open Issues: 46
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-dotenv ★450 - A Babel preset let you import application configs from .env file (zero runtime dependency) (Components / System)
- awesome-react-native - react-native-dotenv ★450 - A Babel preset let you import application configs from .env file (zero runtime dependency) (Components / System)
- awesome-react-native - react-native-dotenv ★450 - A Babel preset let you import application configs from .env file (zero runtime dependency) (Components / System)
- awesome-react-native - react-native-dotenv ★450 - A Babel preset let you import application configs from .env file (zero runtime dependency) (Components / System)
README
# react-native-dotenv
Let you `import` environment variables from a **.env** file in React Native, **don't** need any native code integration.
[](https://circleci.com/gh/zetachang/react-native-dotenv)
[](https://www.npmjs.com/package/react-native-dotenv)
[](https://www.npmjs.com/package/react-native-dotenv)
## Install
```sh
$ npm install react-native-dotenv --save-dev
```
Add the `react-native-dotenv` preset to your **.babelrc** file at the project root.
```json
{
"presets": ["module:metro-react-native-babel-preset", "module:react-native-dotenv"]
}
```
If you haven't got **.babelrc** set up for React Native, remember to install `metro-react-native-babel-preset` first.
```sh
$ npm install metro-react-native-babel-preset --save-dev
```
## Usage
Add your app configuration in an **.env** file.
```
API_KEY=lorem
ANOTHER_CONFIG=foobar
```
Now you can import it in your **.js** file.
```js
import { API_KEY, ANOTHER_CONFIG } from 'react-native-dotenv'
ApiClient.init(API_KEY, ANOTHER_CONFIG)
```
## How does it work?
As you can see, it's implemented as a babel plugin. All referenced imported members are replaced as the values specified in the **.env** file.
The example above will get compiled as below.
```js
ApiClient.init('lorem', 'foobar')
```
## FAQ
### Changes to .env file is not updated
Manually edit the file importing `react-native-dotenv` by either adding an empty line or whitespace will work.
### Can I use different **.env** settings for production ?
Yes, simply create a separate **.env.production** file and the default release process of react-native will pickup the right config.
#### iOS
You can use the **Release** configuration to launch the Simulator. (Only supported in RN v0.39+)
```
react-native run-ios --configuration Release
```
#### Android
1. `Command⌘` + `M` to launch the developer menu in Android emulator.
2. Tap **DevSettings**.
3. Toggle **JS Dev Mode**.
### Can I have more than `production` & `development` environment configs?
Sadly, it's not available so far. One of the workaround is generating **.env** file before triggering RN's bundle script automatically using either shell script or your own custom build pipeline.
## Contact
[David Chang](http://github.com/zetachang)
[@zetachang](https://twitter.com/zetachang)
## LICENSE
MIT License, see LICENSE file for detail.