react-native-envy v0.0.10

React Native Envy

If you like this project, please support it with a star 🌟

What is it for?

• For developers who need to build, test and deploy apps in a few different environments
• For developers who need to build, test and deploy a few different branded apps that are based on the single white labeled codebase

All of these environments and branded apps:

• Have different bundle ids
• Have different settings files: e.g sentry.settings for Sentry or branch.json for Branch.io
• Have different constants in the app: color themes, titles, etc...
• Can have different version numbers and code version numbers

With classic approach you need to create its own Android flavour and iOS target for each environment and somehow manage all the differences between environemnts and branded apps. With react-native-envy it's way much easier. Let's say we want to create staging and production apps.

First, we create variables config:

{
  "common": {
    "VERSION": "1.2.3"
  },
  "env": {
    "staging": {
      "API_URL": "https://staging.example.com",
      "BUNDLE_ID": "com.example.app.staging"
    },
    "production": {
      "API_URL": "https://production.example.com",
      "BUNDLE_ID": "com.example.app"
    }
  }
}

After it we create file templates:

api.js:

const baseURL = '@API_URL@'

export const get = url => fetch('GET', `${baseUrl}/${url}`)

build.gradle:

...
applicationId "@BUNDLE_ID@"
versionName "@VERSION@"
...

Then we add paths config:

[
  { "from": "api.js", "to": "./src/api.js" },
  { "from": "build.gradle", "to": "./android/app/build.gradle" }
]

Finally, we add file destination paths to .gitignore:

/android/app/build.gradle
/src/api.js

That's it! Now we can easily set environment using the command:

react-native-envy set staging

It will create two files.

android/app/build.gradle:

...
applicationId "com.example.app.staging"
versionName "1.2.3"
...

src/api.js:

const baseURL = 'https://staging.example.com'

export const get = url => fetch('GET', `${baseUrl}/${url}`)

Installation

# npm
npm install -g react-native-envy
# yarn
yarn global add react-native-envy

Initialization

To add react-native-envy into your React Native project run the following command in your project directory:

react-native-envy init

It does the following things:

• Adds envy directory that contains templates, configs and variables
• Adds envy files section into .gitignore

By default it creates two dummy templates: api.js and settings.json They are needed just to help you understand how to use react-native-envy

Adding file

To make a file depend on environment run the following command:

react-native-envy add ./path/to/file

It does the following things:

• Moves the file from original path to envy/templates
• Removes the original file from git (you need to commit this change)
• Adds path to the original file to .gitignore
• Adds original path and template path to envy/paths.json

Now you can open the template file and put into it variable keys from envy/variables.json

If there already exists a template with the same name you will be asked to choose a new name. Other way you need to provide name option to the command:

# long way
react-native-envy add ./path/to/file.txt --name myfile.txt
# short way
react-native-envy add ./path/to/file.txt -n myfile.txt

Setting environment

Setting the environment does the following things:

• Takes the files from envy/templates directory
• Fills the values from envy/variables.json to these files
• Copies the files to the project structure according to the paths defined in envy/paths.json

Select environment

To select environment from the list of all the available in variables.json environments run:

react-native-envy set

Set specific environment

To set the specific environment run:

react-native-envy set <environment_name>

Example:

react-native-envy set staging

Extending environment

Let's say we need to have production candidate environment that is the same as production one but it has a different bundle id. To do that we can inherit environment configurations in variables.json:

{
  "common": {
    "VERSION": "1.2.3"
  },
  "env": {
    "staging": {
      "API_URL": "https://staging.example.com",
      "BUNDLE_ID": "com.example.app.staging"
    },
    "production": {
      "API_URL": "https://production.example.com",
      "BUNDLE_ID": "com.example.app"
    },
    "production.candidate": {
      "BUNDLE_ID": "com.example.app.candidate"
    }
  }
}

When you set environment to production.candidate, it takes all the variables defined in the common section, takes all the variables defined in the production section and overrides/extends them with the variables defined in the production.candidate section. So the full list of environment variables filled into template is:

API_URL=https://production.example.com
BUNDLE_ID=com.example.app.candidate
VERSION=1.2.3