0

Hi I just started creating project in react js can we create property file outside of the react app and call those values in react app. If yes than where I need to create it and what should be the extension of the file.

Ritu
  • 11
  • 3
  • What kind of properties? You can create a `json` file and read them in javascript, yes. – cSharp Apr 21 '22 at 08:40
  • Please check here https://stackoverflow.com/q/58016062/4554623 and confirm if your question related to it – sodhankit Apr 21 '22 at 08:42
  • @cSharp can't we create config.properties file and should be placed anywhere so that we don't need to depend on react app to do the changes we can directly open the config.properties files and make the changes at runtime is it possible to do if i don't want to use json the config.properties file should be like this application.name= umr application.search.fieldCount=3 searchform.required.field.group.name=test – Ritu Apr 21 '22 at 08:46
  • @sodhankit nope i want property file to be like below and that file should be placed outside the react app application.name= umr application.search.fieldCount=3 searchform.required.field.group.name= search.field.name.1=loginid search.field.loginId.label=Login Id search.field.loginId.dbColumnMapping=actorId search.field.loginId.inputType=textbox search.field.loginId.requried=group search.field.loginId.required.group=1 – Ritu Apr 21 '22 at 08:56
  • @RituRajput Do you know about .env file? It might solve your problem – sodhankit Apr 21 '22 at 09:19
  • @RituRajput:I think you should create .env file in main project folder of react app and from there you can call properties in your react app –  Apr 21 '22 at 09:23

1 Answers1

0

Solution 1 :

Here I would suggest you to create .env file with following steps

  1. create a file called .env in the root of your project
  2. REACT_APP_NOT_SECRET_CODE=abcdef
  3. To access environment variables you can write process.env.REACT_APP_NOT_SECRET_CODE in react code

You must create custom environment variables beginning with REACT_APP_

Here is the link you can read more

Solution 2

.env file will not allow to change value at run time. To change value at run time you try following solution

Config.js

    /**
     * Init GLOBAL_VARIABLES to store global config
     */
    if (typeof window.global === 'undefined') {
        window.global = {config: {}};
    }
    const GLOBAL_VARIABLES = window.global.config;

    export default GLOBAL_VARIABLES;

Then when you want to store value from anywhere your React component you can import GLOBAL_VARIABLES and assign the value

    import GLOBAL_VARIABLES from "./Config";
    .....
    GLOBAL_VARIABLES.session = session;
    GLOBAL_VARIABLES.countries = countries;
    ...

Similarly you can also fetch the value where ever you want back

    console.log(GLOBAL_VARIABLES.countries)
sodhankit
  • 1,138
  • 1
  • 14
  • 26
  • thanks i can create but the thing is i can change the values at compile time in .env file but not at runtime right? – Ritu Apr 21 '22 at 09:29
  • yes you can not change value from .env file at runtime. Let me know what exactly you are looking for ? – sodhankit Apr 21 '22 at 09:31
  • actually i want, i can change the values at runtime and not at compile time please help on this thanks in advance – Ritu Apr 21 '22 at 09:39
  • I edited my answer please check and confirm it help you – sodhankit Apr 21 '22 at 10:02
  • let me try your solution hope it will work for me – Ritu Apr 21 '22 at 10:09
  • Sure and if it work then don't forget to accept the answer – sodhankit Apr 21 '22 at 10:11
  • what i am doing is i have put config.txt file outside my react app then i copied your config.js file i don't understand how am i using that txt file using the below code can you please help on this import GLOBAL_VARIABLES from "./Config"; ..... GLOBAL_VARIABLES.session = session; GLOBAL_VARIABLES.countries = countries; ... – Ritu Apr 21 '22 at 10:39
  • Read txt file https://stackoverflow.com/a/56377153/4554623 then write those data to GLOBAL_VARIABLE – sodhankit Apr 21 '22 at 10:47