0

I'm developing a web app with React and want to distribute the client builded with the Electron framework. The user will have the possibility to change his server URL so I'd like give the possibility to modify a config file where to set the backend url to allow the client to listen to it.

Initially before using Electron I created a config.js file in my public folder like that:

config = {
    "BACKEND_URL": "http://localhost:3000"
}

And then added a tag in my index.html to point to this script. In my React components I was using window.config.BACKEND_URL to get the server URL.

Is there any practical solution to do something similar with a bundled Electron app? Thanks in advance

Flavio Del Grosso
  • 490
  • 2
  • 7
  • 21

3 Answers3

1

Might I suggest secure-electron-template to use for your application? It has an existing store that manages variables in a key/value pair file in a secure way.

Using the library can be done in this way, this can be done in any react component. Otherwise, the template has built-in examples of reading/writing to the store in an electron component:

reading values

import { readConfigRequest, readConfigResponse } from "secure-electron-store";

// ...

window.api.store.onReceive(readConfigResponse, function(args){
    if (args.success){
         console.log(`Received '${args.key}:${args.value}' from file.`);
    }    
});
window.api.store.send(readConfigRequest, "myvalue");

writing values

import { writeConfigRequest } from "secure-electron-store";

// ...

window.api.store.send(writeConfigRequest, "myvalue", "14");

I'm the author of the library

reZach
  • 8,945
  • 12
  • 51
  • 97
0

Store these config variables in the application data directory as all applications do.

const getAppDataPath = () => {
    switch (process.platform) {
        case 'darwin': {
          return path.join(process.env.HOME, 'Library', 'Application Support', 'xxx.json')
        }
        case 'win32': {
          return path.join(process.env.APPDATA, 'xxx.json')
        }
        case 'linux': {
          return path.join(process.env.HOME, 'xxx.json')
        }
        default: {
          console.log('Unsupported platform')
          process.exit(1)
        }
      }
}

const appDataPath = getAppDataPath();
if (!fs.existsSync(appDataPath)) {
  fs.writeFileSync(appDataPath, JSON.stringify({config: "....."}))
}

// read
const {config} = JSON.parse(fs.readFileSync(appDataPath).toString());
Yanikus
  • 131
  • 8
  • Hi @Yanikus, thanks for your answer. Supposing I'm creating this config in my APPDATA folder and write the server URL in it, how can I read this file and get the string from my react component instead of using this `process.env.REACT_APP_BACKEND_URL + '/api/ecc/ecc'` in http requests? – Flavio Del Grosso Aug 26 '20 at 22:23
  • Updated answer. – Yanikus Aug 27 '20 at 00:45
-1

Save all your config inside a file.

1 : check if your file already exist, if not create it with default data

2 : read it

3: need some panel for update it

Saving files locally with electron

Or, something like this : electron-json-config

Aurelio LIMA FERREIRA
  • 87
  • 5