Build Your Own URL Shortener with Firebase Dynamic Links

Are you tired of using generic URL shorteners that don't reflect your brand or give you any customization options? It's time to build your own custom URL shortener using Firebase dynamic links. With this tool, you can easily create short, memorable links that represent your business or personal brand. Not only will these links be more visually appealing, but they will also help to simplify and organize your website or social media content. In this blog post, I will walk you through the process of building your own URL shortener with Firebase dynamic links. Follow along and start simplifying your links today!

Let's get started

Prerequisites

• Firebase account
• A custom domain (Good to have a separate domain for short URLs. For example, Microsoft has "aka.ms") Or use a domain provided by google (ends with .page.link).

What is a dynamic link?

A dynamic link, as the name suggests, is a type of link in which the destination link can be changed at any time. For example, our GDSC - LPU community discord server invite link can be accessed via the dynamic link "https://s.gdsclpu.live/discord" which we use wherever needed. This is not only short and easy to remember, but it is also dynamic, which means that if we want to change the invite link in the future, we only need to update the dynamic link instead of updating it everywhere.

Firebase dynamic links setup

Firebase dynamic links is a powerful tool. Some of its best features:

• When a user clicks a dynamic link on a mobile device, that link is opened in your native mobile app. If the app is not installed, the user is directed to the App Store or Play Store. If the link is opened in a desktop browser, the user is directed to your website.
• Change the destination link at any time.
• Link previews and social metadata.
• Analytics

Let's start setting it up:

Step 1: Project set up

Fire up the Firebase console (Create a Firebase account if you don't have one already). Create a project after signing in by clicking Add Project.

Then, proceed with the steps to create a project. To gain access to the listed features, enable Google Analytics. Give it some time, and your project will be created. Then, click Continue.

Step 2: Connect custom domain

The following step is to add a custom domain. If you prefer to use your own domain rather than the one generated by Firebase, you must connect a custom domain.

To do so, go to Build -> Hosting -> Get Started

You don't need to host anything. So simply click Next -> Next -> Continue to the console. It will navigate to the hosting dashboard. There, you can see that Firebase generated two URLs by default, which you can use or add your own custom domain to. We'll be using a custom domain, so click Add custom domain.

Just type in your domain name -> verify ownership -> go live ✅. That's it! Learn more on how to connect a custom domain.

Step 3: Dynamic links

Finally, set up dynamic links. Navigate through Engage -> Dynamic Links -> Get Started. Set up a URL prefix. If everything goes well, you will be given the green signal by Firebase to use that URL prefix. Click Finish. (A URL prefix is a base part for all your URLs. As an example, "s.gdsclpu.live" is the URL prefix in https://s.gdsclpu.live/discord)

Step 4: Start creating URLs

That's all about setup. Start creating URLs by clicking New dynamic link. Follow the 5-step process to create a URL.

• URL prefix - An unique identifier
• Deep link URL - Target URL
• Dynamic Link name - Name with which you want to identify the dynamic link

That's it! Our 'more than a simple URL shortener' is ready.

Since this is not an API tutorial, I'm not going to discuss the SDKs. Follow this to create these links programmatically with their REST API.

Hope you found this helpful. Follow for more Firebase stuff 🔥.