create react app Configuration file after build app

Question

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?

Answer 1

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;

Answer 2

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.

Answer 3

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.