DEV Community

Cover image for Managing SECRETS in React-Native (2022)
Santhosh Umapathi
Santhosh Umapathi

Posted on

Managing SECRETS in React-Native (2022)

Introduction

Creating and maintaining SECRETS is one of the common practices to keep some of the data secure without exposing it in your source code or git. In the world of Web apps, it's pretty straightforward to create a .env file and create all your environment variables inside it, but in the world of React-Native, we need a follow few additional steps to get the desired results. In this post, let's explore those few additional steps and also manage different environments like Development, Staging, and Production.

Installation:

Set up your base project from React-Native with the help of official docs of React-Native.  

Then install the 'react-native-dotenv' library in your project with the below commands using NPM or Yarn.

Npm:

npm i react-native-dotenv

Yarn:

yarn add react-native-dotenv

Usage:

Open the file babel.config.js and add the below config as a sub-array inside the plugins array.

babel.config.js

plugins: [
[
'module:react-native-dotenv',
{
envName: 'APP_ENV',
moduleName: '@env',
path: '.env',
blocklist: null,
allowlist: null,
safe: false,
allowUndefined: false,
verbose: false,
},
]
]

To explain the above config, we simply define the path of our .env file which will be at the root of the project. 'envName' is used when we set the variables during runtime on the terminal, for more details about the other available options, look into the docs of this package.

.env

Create the .env file at the root of your project

## Development
DEV_BASE_URL=https://example-development.com/api/v1

## Staging
STAG_BASE_URL=https://example-staging.com/api/v1

## Production
PROD_BASE_URL=https://example-production.com/api/v1


Create the environment variables in the .env file for the desired environments based on your needs (Development, Staging, Production).

src/env

Create a folder named 'env' inside the 'src' folder, if you don't have a 'src' folder, create one at the root of the project.

Under the 'env' folder, create four different files - index.js, development.js, staging.js, production.js. Add the following code on each file as explained below.

development.js

import { DEV_BASE_URL } from '@env';

export default { BASE_URL: DEV_BASE_URL };

staging.js

import { STAG_BASE_URL } from '@env';

export default { BASE_URL: STAG_BASE_URL };

production.js

import { PROD_BASE_URL } from '@env';

export default { BASE_URL: PROD_BASE_URL };

index.js

import ENV from './development';

export default ENV;

src/api/index.js

Now to use this ENV variable inside your project, you can simply import those from the env folder like below:

import ENV from '../env';

const baseUrl = ENV.BASE_URL


Changing Environments

Now the important part is to change the environments, development to be the default, and switch to Staging or Production.

The easiest way is to change the import path in the index.js file of the env folder. Import either one of the three files and you will notice the changes in your application using the environment variables.

index.js

import ENV from './development';
// import ENV from './staging';
// import ENV from './production';


export default ENV;


The other way is to create a script to overwrite the index.js file when you want to switch the environments.

Create the scripts folder at the root of your project. Create the following files into it.

scripts/development.js

This file will overwrite the index.js file inside the env folder.

const fs = require('fs');
const path = './src/env/index.js';

const data = `import ENV from './development';
export default ENV;`;

fs.writeFile(path, data, 'utf8', function (err) {
if (err) return console.log('[ERROR]: Changing env to development', err);
else {
console.log('[Environment]: DEVELOPMENT\n');
}
});

Similarly, create other files like staging.js and production.js and just replace the 'development' with 'staging' or 'production'

development.sh

Create a script to execute and overwrite the index.js file inside the env folder.

#!/usr/bin/env bash
echo '-----Changing ENV to DEVELOPMENT-----'
node ./scripts/development.js

Similarly, create other scripts like staging.sh and production.sh and just replace the 'development' with 'staging' or 'production'

Finally, inside the package.json file, add the below scripts and execute them when you need to switch the environments. 

package.json

'scripts': {
'start': './scripts/development.sh && react-native start',
'staging': './scripts/staging.sh && react-native start',
'production': './scripts/production.sh && react-native start'
}

Note: These scripts might require permissions for the terminal to execute the commands.

With the above setup, you will now be able to switch between environments and store secrets on your next React-Native projects.

That's it for today folks ! Thank you for reading all the way through.

Let's catch up soon on the next one.

Originally published on: https://blogs.appymango.com/blogs/62a9672d6130cd41c4432da1

Discussion (0)