CODEWITHSUNDEEP
jsonreactjscreate-react-app
reubenb87
reubenb87

Reputation: 303

Create-React-App Public Folder JSON

Can't find this exact question answered. I want to have a data.JSON file in my /public folder which contains a static file which once site is built I can quickly modify without having to rebuild the site. However I'm struggling on how to get this into react. I've tried following instructions from the README, but it's a bit unclear.

If I try:

    class Home extends Component {
      render() {
        const data = require(`${process.env.PUBLIC_URL}/data.json`);

I get the message on compile:

./src/Home.js
    Module not found: You attempted to import /data.json which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

What's the proper way to include it? I also tried a hacky way by trying to write it to window.DATA in public/index.html but because I believe it has to call Asynchronous (otherwise chrome gives me an error) sometimes the data will be there, sometimes not, and React doesn't seem to like it. Code I tried:

var request = new XMLHttpRequest();
request.open("GET", "%PUBLIC_URL%/data.json", true);
request.send(null);
request.onreadystatechange = function() {
  if ( request.readyState === 4 && request.status === 200 ) {
    window.DATA = JSON.parse(request.responseText);
  }
}

Any help would be appreciated!

Upvotes: 3

Views: 8476

Answers (3)

z_chocobo
z_chocobo

Reputation: 31

Borrow the "window" variable.

For example, in file "/public/config.js":

window.samleAppConfig = {
  entryUrl: "service.com/api"
}

Then in file "/src/App.js":

constructor(props) {
  super(props);
  console.log('entryUrl', window.samleAppConfig. entryUrl);
}

And in "/public/index.html":

<div id="root"></div>
<script type="text/javascript" src="config.js"></script>

Upvotes: 3

Vivian
Vivian

Reputation: 138

Your first solution will not work if you want to put file in public folder as React should not give access to something outside the source folder. Otherwise you can imagine a bad code could allow people access folder c:\windows

Your second solution could be the way to go, but just need a little bit work on the callback. If you start your project with create-react-app, you can put index.js as 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

var xhttp = new XMLHttpRequest();
var data = {};
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Typical action to be performed when the document is ready:
       data = JSON.parse(xhttp.responseText);
       ReactDOM.render(<App appData={JSON.stringify(data)}/>, document.getElementById('root'));
    }
};

xhttp.open("GET", `${process.env.PUBLIC_URL}/data.json`, true);
xhttp.send();

And then your App.js as 

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
          <h2>{JSON.parse(this.props.appData).Name}</h2>
      </div>
    );
  }
}

export default App;

I put data.json in the public folder, and I have the object like this:

{
  "Name": "My App"
}

I tried it just now and it can show My App in the page all the time

Upvotes: 2

Mikkel
Mikkel

Reputation: 7777

You can simply do it like this:

mydata.js

export default {
  myStuff: [ "one","two","three"]
}

In your code

import myData from './mydata.js'

You now have your data in a variable called myData

Upvotes: -2

Related Questions