Is it possible to serve Static files with create-react-app from public folder?

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


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.