Firebase storage downloadURL file structure

Question

So I'm using firebase storage to upload my website files. Here is an example of the directory structure:

Project
├── index.html
├── css
│   └── style.css
└── js
    └── mainScript.js

So I'm uploading these files to firebase in this structure, but I notice that the downloadURL that's returned is not very friendly in preserving this structure..

For example, when I set the src of an iframe to the downloadURL for the index.html.. the iframe page is missing the style and mainScript files.

This is how the downloadURL looks for index.html:

https://firebasestorage.googleapis.com/v0/b/App_ID.appspot.com/o/index.html?alt=media&token=some_uid

This is how the downloadURL looks for style.css:

https://firebasestorage.googleapis.com/v0/b/App_ID.appspot.com/o/css%2Fstyle.css?alt=media&token=some_uid etc..

Of course the index.html file is looking for the style.css file at:

https://firebasestorage.googleapis.com/v0/b/App_ID.appspot.com/o/css/style.css

but results in 404.

Is there a way around this problem?

PS, Of course I don't want to force the user to change the urls in their files...

Answer 1

Don't use the storage to save your website files! Use Firebase hosting instead ... Firebase storage is designed for storing upload/download files (image, audio, etc.)

https://firebase.google.com/docs/hosting/