create-react-app "homepage": "." does not use correct relative path from index.html when using aws api gateway

Question

I have a static website hosted on s3.

static hosted link generated by aws (Not using this):

http://example-s3.s3-website.{region}.amazonaws.com

actual resource path:

https://example-s3.s3.{region}.amazonaws.com/index.html

And using api-gateway HTTP proxy integration, I've set the following integration:

www.example.com/test/{proxy+} -> https://example-s3.s3.{region}.amazonaws.com/{proxy}

So, www.example.com/test would point to index.html (default page)

From the CRA documentation section "Serving the Same Build from Different Paths":

I've set

"homepage": ".",

such that the website uses www.example.com/test, aka https://example-s3.s3.{region}.amazonaws.com/ as the root directory (relative to index.html as indicated by the document)

However, this fails to fetch any css, or js.

If i look at the console, it gets 404 because it is trying to get the resources from www.example.com/ not www.example.com/test.

So the above package.json configuration is not working for some reason.

I have changed the config to hard-code the url:

"homepage": "www.example.com/test",

Now it can fetch all the resources fine.

My question is though, why doesn't "homepage": ".", setting work?! This setting and "homepage": "www.example.com/test", should be identical as index.html is served at www.example.com/test (aka https://example-s3.s3.{region}.amazonaws.com/index.html)

But CRA for some reason thinks "homepage": ".", is infact "homepage": "www.example.com",

Answer 1

I think the issue lies in your trailing slash Relative URLs and trailing slashes

This should works fine, I create one configuration just the same with you. With trailing slash, it works. It won't work without

https://xswprgicvd.execute-api.ap-southeast-1.amazonaws.com/app/

Edit: Added images added by qkhanhpro in the comment section.