Firebase: Hide File Extensions in URLs

Let’s Code (image by Bing AI)

In the realm of web design, simplicity reigns supreme. Just as you aim to declutter your user interface, optimizing URL structures by concealing file extensions like .html is increasingly favored. It’s not just about aesthetics; there are practical benefits too. By streamlining URLs, you enhance user experience and pave the way for seamless technology transitions without sacrificing existing links. So, why should you consider hiding file extensions, particularly when hosting on Firebase?

Benefits of Concealing File Extensions:

1. Enhanced Aesthetics and User Experience: Simplified URLs contribute to a cleaner, more user-friendly browsing experience, aligning with modern design principles.
2. Seamless Technology Transitions: Concealing file extensions future-proofs your URLs. Whether you switch from PHP to HTML or adopt JavaScript frameworks, your URLs remain consistent, eliminating the need to update or redirect links.
3. Potential SEO Advantage: Streamlined URLs may improve search engine performance by presenting clear, concise paths for indexing and ranking.

Firebase-Specific Approach:

While traditional web hosting often uses .htaccess for URL rewrites, Firebase doesn't offer this option. But fear not, developers! Here are two methods to achieve clean URLs in your Firebase-hosted project:

Methods to Hide File Extensions on Firebase:

Method 1: Quick and Effortless Clean-Up:

Utilize Firebase’s built-in functionality by setting the “cleanUrls” parameter to true in the firebase.json file. This automatically removes the .html extension from all file URLs, ensuring a swift and hassle-free transition.

Example firebase.json Configuration:

{
  "hosting": {
    "public": "build",
    "cleanUrls": true
  }
}

Method 2: Fine-Tuned Control:

For those who prefer meticulous control over URL structures, manual URL rewriting offers a tailored approach. Define rewrite rules in the firebase.json file to customize URL mappings according to your preferences.

Example Configuration for Manual URL Rewriting:

{
  "hosting": {
    "public": "build",
    "rewrites": [
      {
        "source": "/",
        "destination": "/index.html"
      },
      {
        "source": "/services",
        "destination": "/services.html"
      },
    ]
  }
}

Explore Further:

Refer to the Firebase documentation for comprehensive insights into URL rewriting techniques, including glob patterns and advanced usage scenarios.

By implementing these methods, you can streamline URL structures for your Firebase-hosted website, promoting simplicity and elegance in navigation.