using react-environments npm package

this package really helps creating multiple environments in react js projects like we have in angular projects

Auther : Anuj Sharma
package link here

installing the project

npm install --save react-environments

setting up environment files under /src/environments/

naming convention is very strict to be like environment.prod.js, environment.dev.js , environment.qa.js, environment.pilot.js etc

content should be like this ->

-->src
 --> environments
    --> environment.js      ....this file is mandatory to be there and be like other files which can have all the possible properties 
    --> environment.dev.js
    --> environment.prod.js
    --> environment.qa.js

content of any environment file like below ..
environment.qa.js

    module.exports = {
     "baseUrl": "url qa",
     "systemName": "System QA",
     "settings": {
        "name": "test QA",
        "age": 14
     }
    } 
 

environment.js

    module.exports = {
     "baseUrl": "url dev",
     "systemName": "System dev",
     "settings": {
        "name": "test dev",
        "age": 11
     }
    } 
 

Settings up package.json

just add prestart and prebuild command as below

  "scripts": {
      "prestart": "node node_modules/react-environments --path=src/environments",
      "prebuild": "node node_modules/react-environments --path=src/environments",
      .......
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
   },

using in component

import environment from './environments/environment';

  render(){
    return(
        

          {JSON.stringify(environment)}  
        
    );
  }

running project inside of an environment

its mandatory to pass --env=qa | prod | dev etc whatever we need to use environment

like for qa environment -->
npm start --env=qa

for prod environment -->
npm start --env=prod

for dev environment -->

npm start --env=dev

creating build with an environment

its mandatory to pass --env=qa | prod | dev etc whatever we need to use environment

like for qa environment -->
npm run build --env=qa

for prod environment -->
npm run build --env=prod

for dev environment -->

npm run build --env=dev

---
Happy coding!!
Anuj Sharma