Hiding file extensions for your website when using Firebase hosting

Less is more, especially in (web)design. You don’t want to clutter your user with useless information, so you try to strip everything to the bare essentials. The URL’s of your websites are no different. Who wants extensions like .html, .aspx and .php (yuck! Just kidding) in their URL? It’s becoming a common practice to hide the extensions due to aesthetics, usability and technical reasons.

Why should I hide file extensions?

Hiding file extensions is a great way to make your URL’s simpler, cleaner and more user friendly. However, there are also technical advantages to hide the file extensions. For example, you can switch to another technology without breaking your URL’s. If you decide to switch from PHP to HTML and JavaScript, you don’t have to worry about all these previous URL’s you’ve shared and have .php in them.

Deciding to hide file extensions could also potentially boost your performance in search engines.

How can I hide file extensions?

So you’re convinced and want to hide file extensions for your website? Great! Normally you would to this by setting up URL rewriting in the .htaccess file, but since you came to this article I’m assuming that you’re using Firebase hosting.

Firebase doesn’t have a .htaccess file, but it can still be done. You’d just have to edit the firebase.json file.

I will show you two methods how you can hide file extensions in Firebase. The first method will hide the .html extension for all files. The second method really gives you complete control about the URL rewriting.

Method 1: quick and easy

If you just want to hide the .html extension for all files, this is the way to go. We’re going to use the Firebase cleanUrls setting. The Firebase documentation describes the functionality of the setting as follows:

Sounds good! After adding it to the firebase.json file, your file could look like this:

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

Method 2: for control freaks

So you don’t like the fact that method 1 hides the .html extension for every file and you want to be in the driver’s seat? You may have trust issues, but I totally get it. You can set up URL rewriting manually in the firebase.json file like this:

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

    ]
  }
}

Head over to the Firebase documentation for more info about glob patterns and advanced examples.

teebowblogs.com/the-end

There you go, minimal URL’s for your website hosted on Firebase. Less really is more!