Unexpected trailing slash behaviour with Firebase hosting - firebase

Question

I'm seeing unexpected behaviour (at least as per me) with trailing slashes on Firebase Hosting. I expect Firebase to serve URLs with a trailing slash (except for actual files present in the hosting directory). For this I set trailingSlash to true in firebase.json.
This resulted in:
example.com redirect to example.com/index.html/
example.com/js/script.js redirect to example.com/js/script.js/
example.com/images/image.png redirect to example.com/images/image.png/
The expected behaviour would be:
example.com redirect to example.com/
example.com/js/script.js served as it is without any redirect
example.com/images/image.png served as it is without any redirect
The addition of trailing slash to actual file URLs makes the browser/server think script.js is a directory instead of file and results in a 404. The addition of index.html to the root simply isn't elegant.
Expecting cleanUrls to do the trick I set cleanUrls to true along with trailingSlash and immediately the site goes into an endless redirect loop and fails to load. How can I stop Firebase from adding "index.html" at the root and the trailing slash for the actual js or image assets?
Edit:
As requested by Frank here's the firebase.json I'm using:
{
"firebase" : "example",
"public" : "public",
"cleanUrls" : false,
"trailingSlash" : true,
"ignore" : [ "firebase.json", "**/.*", "**/node_modules/**" ],
"rewrites": [{
"source" : "**",
"destination" : "/index.html"
}],
"headers": [{
"source" : "**/*.#(eot|otf|ttf|ttc|woff|font.css)",
"headers" : [{
"key" : "Access-Control-Allow-Origin",
"value" : "*"
}]
}, {
"source" : "**/*.#(jpg|jpeg|gif|png)",
"headers" : [{
"key" : "Cache-Control",
"value" : "max-age=600"
}]
}, {
"source" : "**/*.#(html|js)",
"headers" : [{
"key" : "Cache-Control",
"value" : "max-age=300"
}]
}]
}
P.S.: I have tried setting both trailingSlash and cleanUrls to true and also tried setting these true/false individually.

Answer 1

https://firebase.google.com/docs/hosting/full-config#trailingslash
When true, it will redirect URLs to add a trailing slash. When false
it will redirect URLs to remove a trailing slash. When unspecified,
trailing slashes are used only for directory index files (e.g.
about/index.html).
Just do not add that option and it will only affect urls

Answer 2

As for your question, If you want to invoke the command "rewrites", Server can execute "rewirtes" command when he cannot find any index.html in your root directory.
The solution one:
you just put index.html in your root directory under your "public" folder. I switch to your public folder and deploy your server.
The solution two:
you put index.html under some folder which you can named whatever. Then use JSON format: "rewrites": [{ "source" : "**", "destination" : "/folderName/index.html" }], but you cannot put any index.html under your root folder.
The solution three:
you create root folder, put your JS/CSS/IMG/ folders and index.html under the root folder. Then you deploy server JSON file like this.
{
"firebase": "you app name",
"public": ".",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],

Answer 3

I'm sure this is too late for Vinny, but I just ran into this same issue. Adding <base href='/'>to my html files prevented the extra unexpected trailing slash behavior for me.

Answer 4

"hosting": {
"public": "...",
"ignore": [...],
"trailingSlash": false
}
Simply add trailingSlash property and set it to false will remove the trailing slash when firebase redirects. Check out their details documentation here