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",

That is strange. Can you go to /test/ with the trailing slash? — qkhanhpro
– qkhanhpro, Commented Jul 5, 2021 at 2:37

zcahfg2 · Accepted Answer · 2021-07-08 02:13:09Z

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.

edited Jul 8, 2021 at 2:13

zcahfg2

9512 gold badges15 silver badges30 bronze badges

answered Jul 5, 2021 at 3:54

qkhanhpro

5,3504 gold badges43 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

zcahfg2 Over a year ago

I am getting access denied error with the trailing slash and fine without the trailing slash. How are you loading css, image files on S3 with the trailing slash? for an instance: https://example.s3.ap-northeast-2.amazonaws.com/file.png loads fine https://example.s3.ap-northeast-2.amazonaws.com/file.png/ will always yield access error.

zcahfg2 Over a year ago

Note that AWS apig does not support trailing slash officially and proxy is just a workaournd: forums.aws.amazon.com/thread.jspa?threadID=242423. I'd expect the relative URL to work fine without the trailing slash - espeically if the documentation says it uses the path relative to index.html... Though workaround doesn't work for me neither due to the access error.

zcahfg2 Over a year ago

Confirmed that example.com/test/index.html works but not example.com/test. So I can't use default page if I use '"homepage": "."' ...

qkhanhpro Over a year ago

I updated the example with the image so that you can see how images react : ) <img src="asset/sample.jpg"></img>

qkhanhpro Over a year ago

I am not on the PC now. Can send you my config as image in 1 hour or so

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related