Js Mobile Dev About Courses Articles Youtube Services Contact

Issue with Firebase Hosting URL

Libraries and Versions

Backend: Firebase all

Do you configure your Firebase Hosting besides the default configuration?

I didn't.

Not checking resulted in 4 issues (that I know of!) for me:

  • It impacted my site's performance.
  • LightHouse accessibility score went down to 30%
  • My social media cards weren't displaying correctly.
  • It was affecting my SEO.

The worst part is that I didn't even know what was going on or how to fix it, luckily, I turned to twitter were my friend David Dal Busco noted that my site was creating a redirection with a trailing slash.

For example:

I navigated to https:jsmobiledev.com/article/something then my site would redirect to https:jsmobiledev.com/article/something/ and back to https:jsmobiledev.com/article/something.

The redirect would add a trailing slash to my URL and then navigate back to the no slash version.

It was impacting the performance because it was creating 2 redirects before letting the user get to the page.

Social media cards weren't displaying the images.

And it was affecting SEO because Google HATES duplicated content, so Google would try to index both /something and /something/ for the same content.

Understandin the issue led me to go through the Firebase Hosting documentation and find one option, trailingSlash which I hadn't set, so Firebase was using the default.

All I needed to do was add it to my firebase.json file in the hosting configuration:

"hosting": {
  "public": "dist/static",
  "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
  "trailingSlash": false
},

After that, my LightHouse score immediately went up ๐Ÿ˜ƒ

LightHouse Score

I truly hope this helps you, and if you're not experiencing this issue, that it makes you look into your configuration and make sure that you're not hurt by the defaults!


Become a Mobile Developer using JavaScript

Leave your email below and you'll get one or two emails a month sharing articles, videos, or courses that will help you jump-start your development with Ionic, Firebase, and Angular ๐Ÿš€.

    I don't do the spam thing, you can one-click unsubscribe at any time