react-environments

node package used to have environments like in angular for react applications, create environment.env files under /environments/ folder and pass env name like 'module --env = qa'

Usage no npm install needed!

<script type="module">
  import reactEnvironments from 'https://cdn.skypack.dev/react-environments';
</script>

README

react-environments

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

Auther : Anuj Sharma
Code git repo https://github.com/anujsharma-bbd/react-environments
Implementation git repo https://github.com/anujsharma-bbd/using-react-environments-package

installing the package

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