16

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
  • 755
  • 1
  • 5
  • 15

4 Answers4

16

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
  • 906
  • 9
  • 22
  • 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
  • 895
  • 12
  • 23
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
  • 2,115
  • 2
  • 24
  • 43
0

As an alternative you can add your config parameters to the .env file with REACT_APP_ prefix, and then read them in your code via process.env:

.env file:

# Create React App config:
PORT=8000
BROWSER=none

# Custom application config:
REACT_APP_CONFIG_PARAM=some_value

App.tsx file:

export const App = () => {
  return <div>config value is: {process.env.REACT_APP_CONFIG_PARAM}</div>
}

And in your browser you'll see config value is: some_value

weeklyTea
  • 316
  • 2
  • 10
  • Thats a good idea for basic config, but i want a solution to config my app after build without rebuild. so the best way is using an json file in public folder – Hamid Sarani Aug 16 '23 at 09:01