Is it possible to serve Static files with create-r

Question

Basically I made a (relatively) simple app for a client. The app works and all but they keep asking for changes to the data.

Given the originally anticipated simplicity of the app and the fact it held static data, i did not link it to any back end.ll the data lives in a local static file with an object holding the data.

The problem is that fle gets bundled into the buld, so if i want to just change some static data without having to rbuild, i can't!

I have assets that my data file can access inside the public folder, and those are working fine. I was trying to achieve the same idea with a js file.

I canot import from outside the /src folder.

Is there a way i can access static data from the static folder that gets added on build somehow?

Answer 1

Say you wanna read json file containing data, you could do it in the following way:

class App extends Component {
  async getData() {
    const res = await fetch("/json/sample.json");
    const data = await res.text();
    console.log(data);
    return this.setState({ data });
  }

  componentDidMount() {
    this.getData();
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <div>{this.state.data}</div>
        </header>
      </div>
    );
  }
}

Where the json folder is created inside public folder. Anything that you put within public folder is served automatically when using create-react-app. Hope this helps.

Answer 2

Yes, you can place assets in the static folder.

Docs: Using the Public Folder

• You can reference the path in index.html with %PUBLIC_URL%/path/resource.
• You can use process.env.PUBLIC_URL + '/path/resource' in javascript code.

Both of these approaches are replaced at build time for your final build.

If these are javascript assets, the build will not be aware of them. You need to structure it as an external javascript library and store them in a global variable that you can reference within your code. Then you can load that javascript library in your index.html