Firebase Hosting has just been upgraded with new features and a new open source serving architecture!

Since Divshot joined Firebase, we’ve been hard at work integrating some of the best parts of Divshot’s technology into Firebase Hosting. Today we’re happy to roll out some results of that effort with support for clean URLs, capture redirects, and an open source foundation!

Note: To take advantage of these new features, you’ll need version 2.2.0 or greater of firebase-tools. Upgrade by running npm install -g firebase-tools.

Clean URLs

Everyone likes nice, easily memorable URLs, but when you’re deploying a static website that can be tough. Clean URLs allow you to optionally drop .html extensions from your files when serving them. For example an about.html file will be served from /about instead of /about.html.

To enable Clean URLs for your project, simply specify the option in your firebase.json:

{
  "cleanUrls": true
}

Capture Redirects

Redirects in Firebase Hosting just got a little smarter with capture groups! Now it’s possible to insert segments or entire portions of the source path into the destination. For example:

{
  "redirects": [
    {
      "source": "/blog/:post*",
      "destination": "https://blog.myapp.com/:post*",
      "type": 301
    },
    {
      "source": "/users/:id/profile",
      "destination": "/users/:id/newProfile",
      "type": 301
    }
  ]
}

You can visit the Firebase Hosting documentation for more information about the new configuration options.

Going Superstatic

All of these improvements were made possible by migrating our Hosting infrastructure onto Superstatic, the open source static web server originally developed at Divshot. Superstatic 4.0 is used by Firebase Hosting’s servers as well as the Firebase CLI: when you run firebase serve your site will run locally exactly as it will appear on Firebase Hosting after you deploy.

Going open source with Superstatic also means that Firebase Hosting features can easily be integrated into your existing local development workflow. For instance, here’s how you might use it in your Gulpfile with BrowserSync:

const gulp = require('gulp');
const superstatic = require('superstatic');
const browserSync = require('browser-sync').create();

gulp.task('serve', function() {
  browserSync.init({
    server: {
      middleware: [superstatic({stack: 'strict'})]
    }
  });
  gulp.watch('public/*.html').on('change', browserSync.reload);
});

The 'strict' stack option ensures that Superstatic will run with precisely the same set of features that are available in production on Firebase Hosting.

We hope you enjoy the new capabilities of Firebase Hosting and as always, happy hacking!