Include JSON files into React build

Question

I know this question maybe exist in stack overflow but I didn't get any good answers, and I hope in 2020 there is better solution.

In my react app I have a config JSON file, it contains information like the title, languages to the website etc.. and this file is located in 'src' directory

 {
  "headers":{
    "title":"chat ",
    "keys":"chat,asd  ,
    "description":" website"
  },
  "languages":{
    "ru":"russian",
    "ar":"arabic",
    "en":"English"
  },
  "defaultLanguage":"ru",
  "colors":{
    "mainColor":"red",
    "primary":"green",
    "chatBackGround":"white"
  }
}

I want to make my website easy to edit after publishing it, but after I build my app, I can't find that settings.json file there in build directory.

I find out that files in public directory actually get included to build folder, I tried to put my settings.JSON in public, but react won't let me import anything outside of src directory

I found other solutions like this one but didn't work https://github.com/facebook/create-react-app/issues/5378

Also I tried to create in index.html a global var like (window.JSON_DATA={}), and attach a JS object to it and import it to App.js, but still didn't work.

How can I make a settings JSON file, and have the ability to edit it after publishing the app?

Answer 1

Add your settings.json to the public folder. React will copy the file to the root of build. Then load it with fetch where you need it to be used. For example if you need to load setting.json to the App.js then do the next:

function App() {

    const [state, setState] = useState({settings: null});

    useEffect(()=>{
        fetch('settings.json').then(response => {
            response.json().then(settings => {
                // instead of setting state you can use it any other way
                setState({settings: settings});
            })
        })
    })
}

If you use class-components then do the same in componentDidMount:

class CustomComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {settings: null};
    }

    componentDidMount() {
        fetch('settings.json').then(response => {
            response.json().then(settings => {
                this.setState({settings: settings});
            })
        })            
    }
}

Then you can use it in render (or any other places of your component):

function App() {

    ...

    return (
        {this.state.settings && this.state.settings.value}
    ) 
}

Answer 2

The easiest way would be to require() the file on the server during server side rendering of the html page and then inline the json in the html payload in a global var like you mentioned window.JSON_DATA={}. Then in your js code you can just reference that global var instead of trying to use import.

Of course this approach would require you to restart your server every time you make a change to the json file, so that it get's picked up. If that is not an option then you'll need to make an api call on the server instead of using require().

Answer 3

You may want to look at using npm react-scripts (https://www.npmjs.com/package/react-scripts) to produce your react application and build. This will package will create a template that you can put your existing code into and then give you a pre-configure build option that you can modify if you would like. The pre-configured build option will package your .json files as well. Check out their getting started section (https://create-react-app.dev/docs/getting-started/)

If you don't want to go that route, and are just looking for quick fix, then I would suggest change your json files to a JS file, export the JS object and import it in the files you need it since you seem to be able to do that.

//src/sampledata.js
module.exports = {
  sample: 'data'
}

//src/example.jsx (this can also be .js)
const sampledata = require('./sampledata');
console.log(sampledata.sample); // 'data'

Answer 4

you can use 'Fetch Data from a JSON File' according to link https://www.pluralsight.com/guides/fetch-data-from-a-json-file-in-a-react-app example