'/index.html' for home page route does not work in development or production

Description

I am creating my home page dynamically from a template in gatsby-node instead of in the pages directory. The path is /index.html, because I need the production url for the homepage to be website.com/index.html.

When I do this, I cannot access the homepage in both development and production. In development, I get the Gatsby 404 page. In production, in my network tab, the request for /page-data/index.html/page-data.json fails.

I have figured out a manual workaround at the moment.

1. I run a build.
2. I rename the index.html directory under public => page-data => index.html => page-data.json in my build files to index.
3. I rename <link as="fetch" rel="preload" href="/page-data/index.html/page-data.json" crossorigin="anonymous"/> in my index.html file in the build to <link as="fetch" rel="preload" href="/page-data/index/page-data.json" crossorigin="anonymous"/>.

I can then access that page via website.com/index.html in my production setup as intended.

Unfortunately, this breaks any automated build processes. I am using CircleCI to automate builds and deploys to AWS. I now have to run a build manually, go into the files and update them myself, and then manually deploy. This has severely hampered the workflow on our client project because we are quickly iterating and pushing code updates and relying on quick rebuilds to staging to show the client.

Another interesting thing to note is that this ONLY seems to happen for the home page (aka /index.html). Other page routes, such as /articles/article-title/index.html seem to work fine in development and production.

I do not have any experience working on the Gatbsy core library, so I do not know where or how to identify where this bug is coming from. Any ideas or help is greatly appreciated!

Please see https://github.com/gatsbyjs/gatsby/issues/20203 for more information and context.

Steps to reproduce

@pieh has created a minimal reproduction that can be tested here: https://github.com/pieh/dot-html-pages-are-broken.

1. npm install or yarn install
2. To test development: npm run develop. Try to visit localhost:8000 and localhost:8000/index.html.
3. To test production: npm run build. Then npm run serve. Then try to visit localhost:9000 or localhost:9000/index.html.

Expected result

Visiting /index.html in either development or production shows the page, and all of the various JS, CSS, and JSON files for that page successfully load.

Actual result

Development: You get the Gatsby 404 error page.

Production: The initial html is rendered, but React hydration fails. If you check the network tab, http://localhost:9000/page-data/index/page-data.json is 404.

Environment

This is from the repo @pieh set up that uses the default Gatsby starter. System: OS: macOS 10.14.2 CPU: (8) x64 Intel® Core™ i7-4870HQ CPU @ 2.50GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 12.2.0 - ~/.nvm/versions/node/v12.2.0/bin/node Yarn: 1.17.3 - /usr/local/bin/yarn npm: 6.9.0 - ~/.nvm/versions/node/v12.2.0/bin/npm Languages: Python: 2.7.15 - /usr/local/bin/python Browsers: Chrome: 79.0.3945.130 Firefox: 65.0.1 Safari: 12.0.2 npmPackages: gatsby: ^2.18.12 => 2.19.1 npmGlobalPackages: gatsby-cli: 2.8.1

Other Information

If a Gatsby core member would like to see the manual workaround I do in a production environment, I am happy to share our client project repo and a staging link privately.

[noam-worthy]

@LekoArts @jlkiri can this be re-opened? The implication of this bug is that a site cannot be deployed to a non root location even when using pathPrefix.

We’re doing just that to test branches in S3 based ‘folders’. the pathPrefix works well and we can load the site initially, but once we play around a bit and hit ‘back’ or any link that leads to ‘/’ - it breaks. (we can only set a default index.html in the root of the bucket).

I think this is a very valid use case and make this bug relevant to address.

[harryhaigh]

Why was this issue closed when it was never resolved?