How I Build a Budget-friendly URL Shortener Easy to Deploy and Customized
Tags: azure, webdev, dotnet, showdev
Published: 2020-04-14 10:56:48

---
title: How I Build a Budget-friendly URL Shortener Easy to Deploy and Customized
published: true
date: 2020-04-14 08:30:00 UTC
tags: azure,webdev,dotnet,showdev
canonical_url: http://www.frankysnotes.com/2020/04/how-i-build-budget-friendly-url.html
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/bqy1vt1fi8otu079tozz.png
---

*[Available in French here](http://www.cloudenfrancais.com/posts/Azure-Url-Shortener.html)*
  
I don't know for you but I share links/ URLs very often. And a lot of time it's from videos, so it needs to be short and easy to remember. Something like [https://c5m.ca/project](https://c5m.ca/project) is better than a random string (aka. GUID). And this is how I started a project to build a URL Shortener. I wanted to be budget-friendly, easy to deploy and customizable.   
  
In this post, I will share how I build it, how you can use it, and how you can help!  
  
 ![Azure Url Shortener](https://github.com/FBoucher/AzUrlShortener/raw/master/medias/UrlShortener_600.png)  


### How I build it, with the community
  
This tool was build during live streams coding sessions on Twitch (all videos are in available in my [YouTube archive](https://www.youtube.com/watch?v=ovMUd0eX2Qw&list=PL4NfFPd0l1UZxW7R5yzzP4oTEOKuyC_j-)). It's composed of two parts: a Serverless backend leveraging the Azure Function & Azure Storage, and a frontend of your choice.  
  
The backend is composed of a few Azure Functions that act as an on-demand HTTP API. The only consume when they are called. They are in .Net Core, C# to be specific. When publishing this post, there are four functions:  
  

- UrlShortener: To create a short URL.
- UrlRedirect: That's the one called when the a short ling is use. An Azure Function Proxy is forwarding all call to the root.
- UrlClickStats: Return the statistic for a specific URL.
- UrlList: Return the list of all URLs created.
  
All the information like long url, short url, click count are save in an Azure Storage Table.  
And that's it. Super light, very cost-efficient. IF you are curious about the price I'll but references in the footnotes. 
  
The frontend could be anything that can make HTTP requests. Right now in the project, I explain how to use a tool call Postman, there is also a very simple interface done that you can easily deploy.  
  

[![](https://1.bp.blogspot.com/-bwTmDzKKHF4/Xo-YK8lOekI/AAAAAAABQPI/MauBsq_3ZJUz3D6az0x96E5xQAv24sWggCLcBGAsYHQ/s640/simpleInterface.png)](https://1.bp.blogspot.com/-bwTmDzKKHF4/Xo-YK8lOekI/AAAAAAABQPI/MauBsq_3ZJUz3D6az0x96E5xQAv24sWggCLcBGAsYHQ/s1600/simpleInterface.png)

  

  
This simple interface is of course protected and gives you the options to see all URLs and create new ones.  
  

### How YOU can use it
  
All the code is available into GitHub, and it's deployable with a one-click button!  
  
 [![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?WT.mc_id=urlshortener-github-frbouche#create/Microsoft.Template/uri/https%3A%2F%2Fraw.githubusercontent.com%2FFBoucher%2FAzUrlShortener%2Fmaster%2Fdeployment%2FazureDeploy.json)  
  
This will deploy the backend in your Azure subscription in a few minutes. If you don't own an Azure subscription already, you can [create your free Azure account today](https://azure.microsoft.com/en-us/free?WT.mc_id=azurlshortener-github-frbouche).  
  
Then you will probably want an interface to create your precious URLs. Once more in the GitHub repository, there is a [List of available Admin interfaces](https://github.com/FBoucher/AzUrlShortener/blob/master/src/adminTools/README.md#list-of-available-admin-interfaces) and ready to be used. The **Admin Blazor Website** is currently the most friendly and can also be deployed in one-click.  
  

### How You can help and participate
  
Right now, there is really only one interface (and some instructions on how to use Postman to do the HTTP calls). But [AzUrlShortener](https://c5m.ca/project) is an open-source project, meaning you can participate. Here some suggestions:  
  

- Build a new interface (in the language of your choice)
- Improve current interface(s) with  

  - logos
  - designs
  - Better UI 🙂
- Register bugs in GitHub
- Make feature request
- Help with documentation/ translation
  

### What's Next
  
Definitely come see the GitHub repo [https://github.com/FBoucher/AzUrlShortener](https://github.com/FBoucher/AzUrlShortener), click those deploy buttons. On my side, I will continue to add more features and make it better. See you there!  
  
  

### Video version
  

  {% youtube fzXy2D77WMM %}
  

#### References

- [Azure Function Pricing](https://azure.microsoft.com/en-us/pricing/details/functions/?WT.mc_id=devto-blog-frbouche)
- [Azure Table Storage pricing](https://azure.microsoft.com/en-us/pricing/details/storage/tables/?WT.mc_id=devto-blog-frbouche)
- [YouTube Playlist with all the videos building AzUrlShortener](https://draft.blogger.com/YouTube%20series%20about%20AzUrlShortener:%20https://www.youtube.com/playlist?list=PL4NfFPd0l1UZxW7R5yzzP4oTEOKuyC_j-)