How use a config.json in root directory with React?

Question

I want to use a config.json file located in root directory in React. The reason of this is because i will need update this file json whitout rebuild project.

Project estructure:

> /build
> /node_modules
> /public
> /src
> config.json
> package.json
...ect.

What i try?

[Try 1] Import from root directory..

import { configUrl } from "./../../config.json";

[Try 2] Add into dependencies

"@project-name": "file:./config.json"

And import into react component

import { configUrl } from "@project-name";

To finally use fetch:

return fetch(configUrl, requestOptions)
    .then((response) => response.json())
    .then((result) => {
      console.log(result);
      return result;
    })
    .catch((error) => console.log("error", error));

But noone work, what more can i do?

Anurag Parmar · Accepted Answer · 2022-05-03 12:21:57Z

1

One thing you can do is to put your config.json file in public folder in the root dir of your React app and then fetch it in the top most component of your app.

async function getConfig {

const res = await fetch('/config.json');
const config = res.json();

}

'/config.json' This url will work because all unidentified endpoints are redirected to public folder.

CAUTION: If your react app is hosted it will let anyone access your config file with above url.

answered May 3, 2022 at 12:21

Anurag Parmar

2933 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Antonio Ruiz Over a year ago

But if i put in public, i will need rebuild project if i need change something, true? i dont want rebuild.

Anurag Parmar Over a year ago

No you can just replace or edit config.json file and restart your app

Anurag Parmar Over a year ago

@AntonioRuiz There should be public folder in build output of react app change your config.json there.

Collectives™ on Stack Overflow

How use a config.json in root directory with React?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related