Solved: Re: Issues serving static files from sub folders i...

Souradip22 · 09-08-2024 11:32 PM

I have a very simple React application which I built using the npm run build command. This generates a build folder containing an index.html file and a sub-folder called static with CSS, JS, and media files. Here’s the structure:

build/
│
├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
│
└── static/
├── css/
│ ├── main.fd921077.css
│ └── main.fd921077.css.map
│
├── js/
│ ├── 787.a1dc0f1b.chunk.js
│ ├── 787.a1dc0f1b.chunk.js.map
│ ├── main.7d56bfaa.js
│ ├── main.7d56bfaa.js.LICENSE.txt
│ └── main.7d56bfaa.js.map
│
└── media/
└── logo.8c7360d016c3baff0193f89f1077c721.svg

I uploaded the contents of the build folder to a Google Cloud Storage bucket and made the bucket public with Object Viewer access to allUsers. However, I encountered an issue:

The index.html file loads successfully from the URL: <URL removed by staff>.
Other static files like JS and CSS are not loading. For example:
- JS: https://storage.googleapis.com/static/js/main.4aebbb13.js
- CSS: https://storage.googleapis.com/static/css/main.fd921077.css

Here’s the content of index.html:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="/logo192.png"/>
<link rel="manifest" href="/manifest.json"/>
<title>Simple React App</title>
<script defer="defer" src="/static/js/main.4aebbb13.js"></script>
<link href="/static/css/main.fd921077.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

Problem:

The paths in index.html for static files (JS, CSS) do not include the bucket name, causing them to not load properly.

Workaround: As a temporary fix, I added "homepage": "https://storage.googleapis.com/myapp-bucket-202409081110" to my package.json, which resolved the issue and the app is working as expected. However, I’d prefer not to rely on this workaround and would like GCP to handle the path configuration automatically.

How can I resolve this issue without adding the homepage field to package.json?

Any guidance on how to handle this directly through Google Cloud Platform without modifying the package.json file would be greatly appreciated!

mcbsalceda

Hi @Souradip22,

Welcome to Google Cloud Community!

To resolve the issue of static files not loading properly from your Google Cloud Storage (GCS) bucket without modifying the homepage field in package.json, you may consider the following options:

Adjust Paths in index.html: When hosting static assets for a dynamic website, the paths for your static files need to include the bucket URL. Suppose you have the JavaScript file main.4aebbb13.js in the bucket myapp-bucket-202409081110 that is shared publicly, then you can access it as http://storage.googleapis.com/myapp-bucket-202409081110/static/js/main.4aebbb13.js
Use Google Cloud CDN: To streamline the process and potentially enhance performance, you can configure Google Cloud CDN with your GCS bucket by following the steps in this documentation.
Create an Express app: Set up a Node.js server using Express to handle serving your static assets. Express server can serve the HTML, CSS, and JavaScript files from your static directory to the browser and offer server-side APIs that your React app can call. This approach provides more flexibility and control. You may check this example of serving static files with your app or watch this video tutorial for a detailed walkthrough.

I hope the above information is helpful.

View solution in original post

mcbsalceda

Hi @Souradip22,

Welcome to Google Cloud Community!

To resolve the issue of static files not loading properly from your Google Cloud Storage (GCS) bucket without modifying the homepage field in package.json, you may consider the following options:

Adjust Paths in index.html: When hosting static assets for a dynamic website, the paths for your static files need to include the bucket URL. Suppose you have the JavaScript file main.4aebbb13.js in the bucket myapp-bucket-202409081110 that is shared publicly, then you can access it as http://storage.googleapis.com/myapp-bucket-202409081110/static/js/main.4aebbb13.js
Use Google Cloud CDN: To streamline the process and potentially enhance performance, you can configure Google Cloud CDN with your GCS bucket by following the steps in this documentation.
Create an Express app: Set up a Node.js server using Express to handle serving your static assets. Express server can serve the HTML, CSS, and JavaScript files from your static directory to the browser and offer server-side APIs that your React app can call. This approach provides more flexibility and control. You may check this example of serving static files with your app or watch this video tutorial for a detailed walkthrough.

I hope the above information is helpful.

Issues serving static files from sub folders in Google Cloud Storage Bucket