https://github.com/calintamas/react-native-environments-guide
Set up environments in React Native using react-native-config, Xcode build schemes and Android product flavors
https://github.com/calintamas/react-native-environments-guide
config environment react-native
Last synced: about 1 year ago
JSON representation
Set up environments in React Native using react-native-config, Xcode build schemes and Android product flavors
- Host: GitHub
- URL: https://github.com/calintamas/react-native-environments-guide
- Owner: calintamas
- Created: 2019-02-17T09:51:21.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-12-05T14:15:56.000Z (over 1 year ago)
- Last Synced: 2025-03-26T10:05:25.840Z (over 1 year ago)
- Topics: config, environment, react-native
- Language: Kotlin
- Homepage:
- Size: 510 KB
- Stars: 35
- Watchers: 3
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# react-native-environments-guide
According to the [twelve-factor app guidelines](https://12factor.net/config):
> an app’s config is everything that is likely to vary between deploys (staging, production, dev).
Moreover, a twelve-factor app:
> requires strict separation of config from code. Config varies substantially across deploys, code does not.
In the context of a React Native app, this means having:
1. a bunch of `.env` files, one for each environment
1. a script to build the app for a specific environment (and platform).
In the end, I want to make a build with a command-line invocation, like this:
```sh
fastlane ios build --env production
```
where `env` can be `production`, `staging` or `dev`.
---
To achieve this, I'll use [react-native-config](https://github.com/lugg/react-native-config), [Xcode build schemes](https://developer.apple.com/documentation/xcode/customizing-the-build-schemes-for-a-project/) and [Android product flavors](https://developer.android.com/build/build-variants#product-flavors).
- [Start here](#start-here)
- [Setup iOS](#setup-ios)
- [Setup Android]()
- [Write the build scripts]()
- [(Bonus) Validate env variables]()
## Start here
First, let's make sure we are on the same page. For this particular guide, I'm using the following package versions:
```sh
react-native@0.74
react-native-config@1.5.1
```
I want to set up 3 environments: `dev`, `staging`
and `production`. The naming is completely arbitrary, it can be anything you prefer (like `local`, `alpha` and `release`, as another example).
I'm creating a new `env` directory, where I'll place these three `.env.*` files.
```sh
mkdir env
touch ./env/.env.dev ./env/.env.staging ./env/.env.production
```
And in the project's root, an empty `.env` file, which I'll add add to `.gitignore`:
```sh
touch .env
echo ".env" >> .gitignore
```
> [!IMPORTANT]
> -- Why do I add it to `.gitignore`? The main `.env` will be the _working_ file, changed before every build to contain the desired environment variables. Considering its _volatile_ nature, it's not something we want to track in source control.
Now the directory structure looks like this:
```sh
/example
/env
├── .env.dev
├── .env.production
└── .env.staging
.env
...
```
> [!TIP]
> -- using [tree](https://formulae.brew.sh/formula/tree) to pretty-print the directory content.
## Setup iOS
I'm relying on [Xcode build schemes](https://developer.apple.com/documentation/xcode/customizing-the-build-schemes-for-a-project/) to create one scheme per environment.
## Setup Android
TODO