title: Fetch local JSON file from public folder ReactJS
body: <p>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.</p>
  
  <p>This is my project structure:</p>
  
  <ul>
  <li><p>public   </p>
  
  <ul>
  <li><p>data </p>
  
  <ul>
  <li>mato.json (my .JSON file)</li>
  </ul></li>
  </ul></li>
  <li><p>src</p>
  
  <ul>
  <li><p>components</p>
  
  <ul>
  <li>App.js</li>
  </ul></li>
  </ul></li>
  </ul>
  
  <p>Why I put my file in <code>public</code> folder? If I build my project with file in <code>src</code> folder, my file will be include in the generated <code>main.js</code> by the command <code>yarn build</code>.</p>
  
  <p>I want modify my json file without always rebuild my app. </p>
  
  <p>So I can't use code like:</p>
  
  <pre><code>import Data from './mato.json'
  </code></pre>
  
  <p>…or: </p>
  
  <pre><code>export default { 'mydata' : 'content of mato.json'}
  import data from 'mydata';
  </code></pre>
  
  <p>I tried to fetch my .json file but "file scheme" isn't friend with <code>fetch()</code> &amp; chrome..</p>
  
  <p>(Chrome error: “index.js:6 Fetch API cannot load file:///D:/projects/data/mato.json. URL scheme "file" is not supported.”)</p>
  
  <p>This is my code for fetch:</p>
  
  <pre><code>fetch(`${process.env.PUBLIC_URL}/data/mato.json`)
  .then((r) =&gt; r.json())
  .then((data) =&gt;{
      ReactDOM.render(&lt;App appData={JSON.stringify(data)}/&gt;, document.getElementById('root'));
  })
  </code></pre>
  
  <p>It's only works with Firefox. I also tried <code>mode: 'cors'</code> does not better.</p>
  
  <p>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.</p>