DEV Community

Cover image for Streamlining React Native Environment Configuration: Step-by-Step
Amit Kumar
Amit Kumar

Posted on

2 1 1 1 1

Streamlining React Native Environment Configuration: Step-by-Step

When building modern applications, especially in multi-environment setups like development, QA, and production, managing environment-specific configurations efficiently is crucial. Manually switching environment settings can be error-prone and time-consuming. This guide demonstrates how to automate the process using Node.js and a simple script.

Problem Statement

In a project with multiple environments, we often have separate configuration files for each environment. Instead of manually renaming or replacing these files when switching environments, we can automate this process with a script.

For example, if we have three environments: dev, qa, and prod, we can use a script to dynamically copy the corresponding configuration file to a unified env.json file.


Prerequisites

  • Node.js installed on your system.
  • Basic knowledge of Node.js file system (fs) and path modules.

Folder Structure

Ensure your environment configuration files are organized as follows:

project-root/
│
├── src/
│   ├── config/
│       └── scripts/
│           └── set-environment.js
│   └── envs/
│       ├── dev.json
│       ├── qa.json
│       ├── prod.json
│       └── env.json

Enter fullscreen mode Exit fullscreen mode

Image description

  • dev.json, qa.json, prod.json: Contain environment-specific configurations.
  • env.json: The active environment configuration file (automatically generated).
  • set-environment.js: The script to automate the environment setup.

Environment Configuration Files

env.json

This file will be dynamically generated by the script. Here's the format:

{
  "API_URL": "",
  "ENVIRONMENT": ""
}

Enter fullscreen mode Exit fullscreen mode

prod.json

For production:

{
  "API_URL": "https://prod.example.com",
  "ENVIRONMENT": "production"
}


Enter fullscreen mode Exit fullscreen mode

dev.json

For production:

{
  "API_URL": "https://dev.example.com",
  "ENVIRONMENT": "development"
}


Enter fullscreen mode Exit fullscreen mode

qa.json

For QA:

{
  "API_URL": "https://qa.example.com",
  "ENVIRONMENT": "qa"
}


Enter fullscreen mode Exit fullscreen mode

The Automation Script

Below is the set-environment.js script:

const fs = require('fs');
const path = require('path');

// Map environment names to JSON files
const envMapping = {
    dev: 'dev.json',
    qa: 'qa.json',
    prod: 'prod.json',
};

// Get the environment argument
const environment = process.argv[2];
console.log("🚀 ~ environment:", environment);

if (!environment || !envMapping[environment]) {
  console.error(`Invalid or missing environment argument. Use one of: ${Object.keys(envMapping).join(', ')}`);
  process.exit(1);
}

// Resolve paths for source and destination files
const sourceFile = path.resolve(__dirname, `../envs/${envMapping[environment]}`);
const destinationFile = path.resolve(__dirname, '../envs/env.json');

// Check if the source file exists
if (!fs.existsSync(sourceFile)) {
  console.error(`Environment file not found: ${sourceFile}`);
  process.exit(1);
}

// Copy the selected file to `env.json`
fs.copyFileSync(sourceFile, destinationFile);
console.log("🚀 ~ Environment set to:", environment);

Enter fullscreen mode Exit fullscreen mode

Adding NPM Scripts

To simplify the usage of the script, add the following commands to the scripts section of your package.json:

"scripts": {
    "env:dev": "node ./src/config/scripts/set-environment.js dev",
    "env:qa": "node ./src/config/scripts/set-environment.js qa",
    "env:prod": "node ./src/config/scripts/set-environment.js prod"
}

Enter fullscreen mode Exit fullscreen mode

How It Works

  1. Environment Mapping: The script uses an envMapping object to map environment names (dev, qa, prod) to their corresponding JSON files (dev.json, qa.json, prod.json).

  2. Command-Line Argument: The desired environment (e.g., dev) is passed as a command-line argument.

  3. File Path Resolution: Using the path module, the script dynamically identifies the source file (dev.json) and the destination file (env.json).

  4. File Existence Check: Before copying, the script ensures that the source file exists, avoiding runtime errors.

  5. File Copy Operation: The fs.copyFileSync method copies the selected configuration file to env.json.


Using the Script

Run the following commands to set the environment:

  • For Development:
npm run env:dev

Enter fullscreen mode Exit fullscreen mode
  • For QA:
npm run env:qa

Enter fullscreen mode Exit fullscreen mode
  • For Production:
npm run env:prod

Enter fullscreen mode Exit fullscreen mode

Benefits

  • Automation: Eliminates manual file management.
  • Error Prevention: Reduces the risk of incorrect configurations.
  • Flexibility: Easily extendable for additional environments.

Conclusion

Automating environment configuration is a simple yet powerful way to improve workflow efficiency in your project. With this setup, you can seamlessly switch between environments with just a single command.

Happy coding! 🚀

ACI image

ACI.dev: Best Open-Source Composio Alternative (AI Agent Tooling)

100% open-source tool-use platform (backend, dev portal, integration library, SDK/MCP) that connects your AI agents to 600+ tools with multi-tenant auth, granular permissions, and access through direct function calling or a unified MCP server.

Star our GitHub!

Top comments (0)

Postmark Image

"Please fix this..."

Focus on creating stellar experiences without email headaches. Postmark's reliable API and detailed analytics make your transactional emails as polished as your product.

Start free

Join the Runner H "AI Agent Prompting" Challenge: $10,000 in Prizes for 20 Winners!

Runner H is the AI agent you can delegate all your boring and repetitive tasks to - an autonomous agent that can use any tools you give it and complete full tasks from a single prompt.

Check out the challenge

DEV is bringing live events to the community. Dismiss if you're not interested. ❤️