3 Free Ways of Shortening URLs with Firebase

Shortening URLs makes long and obscure URLs look better and allows for going back and quickly editing the URLs they replace. Tweets, emails and many other things can’t be edited. However, URLs don’t have to be set in stone. The following are three ways of shortening URLs with Firebase.

Prerequisites

• Sign in to Firebase and create a new project.

• Go to the Hosting tab from the sidebar and add a new site.

  (No need to setup CLI or install anything at this point.)

1. Dynamic Links

As the official successor to Google URL Shortener (migration guide), Dynamic Links provide a quick and easy, no code required, approach to setting up custom URLs.

Steps:

• Go to Dynamic Links in the Grow section of the Firebase Console’s sidebar and follow the Get Started instructions.
• Click the New Dynamic Link button.
• Choose a prefix for the new URL.
• Enter the original/long URL in the Deep link URL field.
• Enter a memorable name for the link in the Dynamic Link name field.
• Skip the rest and click Create.
• All done. The URL is now live.
• Note: Using hosting/multiple sites with Dynamic Links requires additional steps, so keeping a separate Firebase Project might be easier.

2. firebase.json

This approach takes advantage of the project configuration file and after a quick setup, allows for adding and modifying URLs by merely editing the firebase.json file.

• Follow the Hosting Quickstart steps to set up the CLI and create the project folder. The firebase.json file inside the project folder will contain something like:

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

• To add a link, let’s configure the redirects (more here):

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "redirects": [
      {
        "source": "/google",
        "destination": "https://google.com",
        "type": 302
      },
      {
        "source": "/",
        "destination": "https://firebase.google.com",
        "type": 302
      }
    ]
  }
}

• The above forwards example.com/google to google.com and example.com (the root URL) to firebase.google.com. (Assuming example.com is the domain set in the Hosting tab on Firebase Console).
• Run firebase deploy --only hosting in the console to deploy the new configuration. The links should now be live.

Multiple sites

When working with more than one site, the configuration will look a bit different. Example:

{
  "hosting": [
    {
      "target": "app",
      "public": "app",
    },
    {
      "target": "links",
      "public": "links",
      "redirects": [
        {
          "source": "/google",
          "destination": "https://google.com",
          "type": 302
        },
        {
          "source": "/",
          "destination": "https://firebase.google.com",
          "type": 302
        }
      ]
    }
  ]
}

Each site becomes a target, which needs reflecting in the firebase.json file. Instead of an object, hosting now contains an array of objects. Each target needs setting up in the CLI by associating its name with its “resource name” as defined on Firebase Console’s Hosting tab.

Setting up the targets in the CLI:

• Create a new target: firebase target:apply hosting links name-on-firebase
• Deploying a specific target: firebase deploy --only hosting:links

More info is available on the official docs.

3. Realtime Database + Javascript Redirect

This approach follows an excellent tutorial from Abe Haskins, which consists of setting up the Realtime Database as well as deploying a single page that immediately forwards to the corresponding long URL by using Javascript.

This allows for easy editing of the URLs directly from the Database tab on the Firebase Console. However, unlike the first two approaches, it relies on client-side redirects instead of server-side ones (more on the differences can be found here).

All Done! Time to make some URLs! 🌍