3 Free Ways of Shortening URLs with Firebase
Tags: firebase, urlshortener, url
Published: 2020-02-07 06:45:02

---
title: 3 Free Ways of Shortening URLs with Firebase
published: true
description: Shortened URLs look better and can always be edited.
tags: [firebase, urlshortener, url]
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/w5z5zaia6rmg1xadhe7t.png
canonical_url: https://medium.com/@vejmartin/3-free-ways-to-shorten-urls-with-firebase-c3e023b33083
---

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](https://console.firebase.google.com/) 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](https://firebase.google.com/support/guides/url-shortener)), **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](https://firebase.google.com/docs/dynamic-links/custom-domains#manual), 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](https://firebase.google.com/docs/hosting/quickstart) to set up the CLI and create the project folder.
The **firebase.json** file inside the project folder will contain something like:
```json
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
```

- To add a link, let’s configure the redirects (more [here](https://firebase.google.com/docs/hosting/full-config#redirects)):
```json
{
  "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:
```json
{
  "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](https://firebase.google.com/docs/hosting/multisites).

## 3. Realtime Database + Javascript Redirect

This approach follows an excellent [tutorial](https://abe.ghost.io/a-0-month-url-shortener-on-firebase-hosting/) from [Abe Haskins](https://abe.ghost.io/author/abe/), 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](https://stackoverflow.com/questions/2311448/best-practices-for-client-side-vs-server-side-redirects-when-to-use-what)).

## All Done! Time to make some URLs! 🌍