Config files for different production builds React

Question

I have a React App that will be deployed as several individual apps that differ very slightly. Some texts will be different in some places, API URL may be different, language etc.

How would i go about solving this problem? I basically want to be able to build once and the app to change its functionality from a config file that sits in the build folder... is that possible? Or is there any other way to solve this that i'm not thinking of?

Answer 1

You can use a config.json file and store all your changes there, you could probably have something like:

ENV

REACT_APP_ID=APP_1

config.json

APP_1: { name: 'app one', lang: '/path/to/lang', api_basepath: 'path/to/api' }

and then use that in your code with something like

import conf from './conf.json';

const useConfigData = key => conf[process.env.REACT_APP_ID][key]

const api = useConfigData('api_basepath');
const myFetch = () => {
  fetch(`${api}/some_endpoint`).then()
}