Use multiple web.config files for qa, dev and prod in a REACTJs project

Question

I need to set some headers to my application based on the environment (dev,qa and prod). Is there a way to have multiple web.config files? Or maybe can we access ENV variables within the web.config?

PD: My app is hosted in azure

Answer 1

There are multiple ways to do this

Option 1 :

make use of the Process Env :

in the package.json , update your script to have a script for each of the builds

like

  "build:dev": "cross-env ENVIRONMENT=development node parseEnv --exec:\"react-scripts build\"",
    "build:prod": "cross-env ENVIRONMENT=production node parseEnv --exec:\"react-scripts build\"",
    "build:qa": "cross-env ENVIRONMENT=qa node parseEnv --exec:\"react-scripts build\"",

you can see we are passing ENVIRONMENT= in the scripts

Now create a parseEnv.js file at the same level of the root

parseEnv.js:

const dotenv = require('dotenv');
const fs = require('fs'); // to check if the file exists
const path = require('path'); // to get the current path
const { execSync } = require("child_process");

const currentPath = path.join(__dirname);

// Create the fallback path (the production .env)
const basePath = currentPath + '/env/.env';

// We're concatenating the environment name to our filename to specify the correct env file!

envPath = basePath + '.' + process.env.ENVIRONMENT;
// console.log("the env path is", envPath);

// Check if the file exists, otherwise fall back to the production .env
const finalPath = fs.existsSync(envPath) ? envPath : basePath;
console.log("Selected env:", finalPath);

// Set the path parameter in the dotenv config
const fileEnv = dotenv.config({ path: finalPath }).parsed;

// reduce it to a nice object, the same as before (but with the variables from the file)
const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
    prev[`REACT_APP_${next}`] = JSON.stringify(fileEnv[next]);
    return prev;
}, {});

let envs = ``
for (const k in envKeys) {
    envs += `${k}=${envKeys[k]}\n`
}

fs.writeFileSync(`${currentPath}/.env`, envs)
console.log('Environment variables copied to .env file.')

if (execString.indexOf('--exec:') >= 0) {
    execString = execString.replace('--exec:', '')
    console.log('Exec:', execString)
    execSync(execString, { stdio: 'inherit' })
}

Lets build the env files

create a folder env at the same level of parseEnv.js and create your env files

.env  ---> production file 
.env.development --> development environment 
.env.qa  --> Qa environment

example :

.env.development

TITLE=This is development 
API_URL=https://dev.example.com/api/v1.6
SECRET_KEY=xxxxxxxxxxxxxxxxxxxxxxxxx

.env

TITLE=This is Production
API_URL=https://prod.example.com/api/v1.6
SECRET_KEY=xxxxxxxxxxxxxxxxxxxxxxxxx

in your index.js , now you can make use of these by calling

const TITLE = process.env.REACT_APP_TITLE;  
const URL = process.env.REACT_APP_API_URL;

Option2: make use of a config API .

You can have all your configurations in a JSON and put in a Database against the domain names . For example , consider your development will always happen from localhost:3000 , and qa will happen from https://qa.example.com and so on

you can construct a DB like this

domain | Configs

http://localhost:3000/ { "TITLE": " This is development"} http://qa.example.com/ { "TITLE": " This is QA" }

and upon init , call this API and connect to a config server which can then serve you back these configs depends on your domain . Advantage here is like you do not need to build seperate , you can still run your Qa at localhost:6000 if you want , you just need to add a db entry alone . NO need to keep env files in the source .