How to make a static file available on Github Pages build folder

Question

In my PokeList class, I have the following code

componentDidMount() {
  fetch('./pokedex.json')
    .then( response => {
      if (response.ok) {
        return response.json()
      }
      throw response
    }).then (data => {
      console.log(data)
      // this.setState({pokeDex: data})
    }).catch (error => {
      console.error("An error occurred: ", error)
    }).finally(() => {
      this.setState({loading: false})
    })
}

When I run npm run deploy which is the command to deploy my app to a GitHub static page on https://blenderous.github.io/pokedex/, the page shows a couple of errors:

1. 404 Error that pokedex.json is not found
2. "An error occurred: " and the Response object with it's status being 404

When I run npm run deploy, the application runs gh-pages -d build.

How do I make pokedex.json file available in the build folder of GitHub Pages. Manually copying the file doesn't work.

Answer 1

The pokedex.json file could be added to the blog-assets folder that belongs to the blenderous.github.io blog (since it's a GitHub pages blog, one has to add the file in the blog-assets folder of local version of the blog repository, git add -A and git push origin master. This file can then be accessed in the PokeList class by using the URL https://blenderous.github.io/blog-assets/pokedex.json

For convenience, I have added a json folder in the blog-assets folder, so the URL would be: https://blenderous.github.io/blog-assets/json/pokedex.json