I have a problem since two days; I want read a local JSON from my public folder on my React application created with react-app.

This is my project structure:

• public

  
  
  
  
  

  • data

    
    
    
    
    
    • mato.json (my .JSON file)
    
    
  
  



• src

  
  
  
  
  

  • components

    
    
    
    
    
    • App.js
    
    
  
  

Why I put my file in public folder? If I build my project with file in src folder, my file will be include in the generated main.js by the command yarn build.

I want modify my json file without always rebuild my app.

So I can't use code like:

import Data from './mato.json'

…or:

export default { 'mydata' : 'content of mato.json'}

import data from 'mydata';

I tried to fetch my .json file but file scheme isn't friend with fetch() & chrome..

(Chrome error: “index.js:6 Fetch API cannot load file:///D:/projects/data/mato.json. URL scheme file is not supported.”)

This is my code for fetch:

fetch(`${process.env.PUBLIC_URL}/data/mato.json`)

.then((r) => r.json())

.then((data) =>{

    ReactDOM.render(<App appData={JSON.stringify(data)}/>, document.getElementById('root'));

})

It's only works with Firefox. I also tried mode: 'cors' does not better.

And of course I don't have any server — it's a local project — so if someone knows how I can read my JSON file locally I will much appreciate.