Serving single page React app from Google Cloud Storage

Question

I am trying to serve a React app from Google Cloud Storage. I built the React project and uploaded the contents of the build/ directory to Google Cloud Storage. I made sure every file inside is publicly accessible. However when I go to my Google Cloud bucket link http://storage.googleapis.com/BUCKET_NAME/, I get some XML about a permission error:

<Error>
<Code>AccessDenied</Code>
<Message>Access denied.</Message>
<Details>
Anonymous users does not have storage.objects.list access to bucket BUCKET_NAME.
</Details>
</Error>

Then, I tried to navigate to the URL http://storage.googleapis.com/BUCKET_NAME/index.html, which brings up a blank page. In the JS console, there are errors:

index.html:1 GET http://storage.googleapis.com/static/css/main.9a0fe4f1.css 
index.html:1 GET http://storage.googleapis.com/static/js/main.871fec8f.js 

These errors look like the BUCKET_NAME is not in the URL that was fetched. However, my built index.html is referencing them relatively, as so:

<script type="text/javascript" src="/static/js/main.871fec8f.js"></script>

I'm not sure what's going on, there are two issues. First is that index.html is not the default served page when going to the bucket URL. Second issue is that the relative paths don't seem to be resolving the right URL. Any help is appreciated.

Answer 1

This was a problem on my end. This method should work.