Loading a local json file on demand using React or JavaScript

You can import the json file and set it on state.

import envConfig from './envConfig.json'

state = { envConfig }

And the have a helper function to read the Environment value and then update the state to have those values.

This would be the envConfig.json:

[{
    "Environment": "local",
    "local": {
        "url-1": "https://www.google.com",
        "url-2": "https://www.msn.com"
    },
    "Development": {
       "url-1": "https://www.google.co.in",
       "url-2": "https://www.msn.co.in"
    },
    "Test": {
       "url-1": "https://www.somedifferenturl.co.in",
       "url-2": "https://www.somedifferenturl.co.in"
    },
    "Prod": {
       "url-1": "https://www.somedifferenturl2.co.in",
       "url-2": "https://www.somedifferenturl2.co.in"
    }
}]

If you are using webpack you can make use of the DefinePlugin.

https://webpack.js.org/plugins/define-plugin/#usage

In your webpack config, in the plugins section you can add the DefinePlugin.

plugins: [
    // Some other plugins already defined.
    new webpack.DefinePlugin({"process.env.MY_ENV": JSON.stringify(process.env.MY_ENV)})
         ]

This rewrites all the occurences of process.env.MY_ENV in your JS files with the actual environment variable MY_ENV when you run the code through webpack.

And given a config.json like below

{
    "local": {
        "url-1": "https://www.google.com",
        "url-2": "https://www.msn.com"
    },
    "Development": {
        "url-1": "https://www.google.co.in",
        "url-2": "https://www.msn.co.in"
    },
    "Test": {
        "url-1": "https://www.somedifferenturl.co.in",
        "url-2": "https://www.somedifferenturl.co.in"
    },
    "Prod": {
        "url-1": "https://www.somedifferenturl2.co.in",
        "url-2": "https://www.somedifferenturl2.co.in"
    }
}

It can be used in a React component like below.

import React from "react";
import config from "./config.json";

function App() {
  const environment = process.env.MY_ENV;
  const envConfig = config[environment];
  // Do anything with the envConfig
  console.log(envConfig);

  return <h1>Hello</h1>;
}

export default App;

Starting your server with command MY_ENV=VirtualEnv yarn start, webpack converts the code to

function App() {
  const environment = "VirtualEnv";
  const envConfig = _config_json__WEBPACK_IMPORTED_MODULE_1__[environment]; // Do anything with the envConfig

  console.log(envConfig);
  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h1", {
    __source: {
      fileName: _jsxFileName,
      lineNumber: 10
    },
    __self: this
  }, "Hello");
}

I would use the case method, combined with const localCall = require("http://localhost/pathtoyourscript.js or URL here") for a local call, const dev = require("URL") etc.

Example:

switch(envSet) {
  case 'local':  // if (envSet === 'local')
    const localCall = require("http://localhost/pathtoyourscript.js or URL here");
    [break]

  case 'dev':  // if (envSet === 'dev')
    ...
    [break]
//add as many cases as needed
  default:
    ...
    [break]
}

etc.