11

I want a Config File (JSON) in root folder after build to config my app.

like Translation and API Urls and ...

Can I do this with create react app?

Hamid Sarani
  • 605
  • 1
  • 4
  • 13

3 Answers3

13

Create config.js or json file outside src directory and include it in index.html like

<script src="%PUBLIC_URL%/config.js" type="text/javascript"></script>

configure parameters in config.js

config.js

var BASE_URL = "http://YOUR-URL";

you can get paramenters like

const BASE_URL = window.BASE_URL;
Midhun G S
  • 810
  • 9
  • 20
  • Is there a possibility that the `config.js` is not loaded fast enough? Especially in the built package (after running `npm run build)`. E.g. if you have a file with content: `export const config = { baseUrl: window.BASE_URL }` I think if you import that config afterwards (`import { config } from "..."`) then `config.baseUrl` could be `undefined`. – ysfaran Apr 09 '19 at 07:38
  • 2
    You have to import the `config.js` at the top of `index.html`. So the js files will load synchronously, it will load your bundle js only after `config.js`. – Midhun G S Apr 12 '19 at 07:50
  • how you define separate files to be loaded according to the environment ? – Avishay28 Oct 15 '20 at 10:23
  • Try some ways to generate the script `src` dynamically – Midhun G S Oct 15 '20 at 10:36
  • How you would manage the versioning for this? I mean how you would force the client to use the latest version, not the cached version? – Hamid Mayeli Dec 08 '20 at 18:59
  • Please check https://stackoverflow.com/questions/7413234/how-to-prevent-caching-of-my-javascript-file – Midhun G S Dec 08 '20 at 19:01
  • So, I should edit the index.html as well as the config file. That makes sense. Thanks. – Hamid Mayeli Dec 08 '20 at 19:24
  • Is this solution secure? – Iorweth333 Jan 27 '21 at 11:02
  • Depends on your requirements – Midhun G S Jan 27 '21 at 11:40
  • If I update the `config.js`, how can I make the webpage load it with the newest contents? The values do not update. I tried using query string as per link above but no luck. – not an alien Mar 18 '22 at 19:11
1

You can store you JSON file in the public/ folder and it'll automatically provide this file when you host your Create React App.

Something like: /public/my-configuration-file.json

then when you restart your application:

localhost:3000/my-configuration-file.json

will provide you this json file.

Tanato
  • 663
  • 8
  • 20
0

You could create a custom hook that reads a "public" config file using fetch.

// This path is relative to root, e.g. http://localhost/config.json
const configFile = './config.json'

export function useConfig() {
    const [config, setConfig] = useState(initialConfig);

    useEffect(() => {
        (async function fetchConfig() {
            try {
                const response = await (await fetch(configFile)).json();
                setConfig(response);
            } catch (e) {
                console.log(e);
            }
        }());
    }, []);

    return config;
}

Then use it anywhere in you app

function App() {

    const config = useConfig();

    return (
        <div>{config.foo}</div>
    );
}

You'll always have an up to date non-cached version of it's data.

sansSpoon
  • 1,911
  • 1
  • 21
  • 37