Why have I created a URL shortener with Netlify?

Why have I created a URL shortener with Netlify?

Ruben Conde's photo
Ruben Conde
·Nov 7, 2020·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

A few days from the date of this publication, I set out to create a URL shortener. The idea came to me mainly because, when I was documenting a work project, I had to add a huge link and that put me out of my mind.

I visited several services, such as Bitly, Cuttly, etc., but none of them convinced me. What I wanted was something more personal or that I just didn't have to pay for it. Not unless I really needed it, that is, if I knew that the link would be visited by thousands of people; of course I would take into account the resources I would need and their price. But the link resulting from the shortening I was looking for would be used by some developers.

I was looking for several personal alternatives. I was really attracted with a Node.js application that used MongoDB and Nginx for redirection. However, I didn't have time to create the whole project and implement it on a server (but it doesn't mean I'll not try later). I kept looking for other solutions to my problem and found a small golden chest.

Treasure Chest

I found a blog that explained how to take advantage of the Netlify (a continuous deployment platform) redirection system. To make it easy, when you create a project in Netlify based on a repository, you can add a specific file to perform redirects within a website.

The file in question is "_redirects". I used this system previously in projects that included Vue.js. This is because it is necessary to redirect all the URLs of the site to the same HTML file. However, it never occurred to me to use it that way.

The objective of using this system is to take advantage of the simple syntax of the file:

/5Pbg2   https://www.typescriptlang.org/
/eD3uA   https://docs.nestjs.com/
/3ut9f   https://pm2.keymetrics.io/docs/usage/quick-start/

Above is an example of the file's "configuration". Basically, when we visit the endpoint of the website given by Netlify, the redirect system will send us to the target page.

What did I do after discovering this? I went directly to Namecheap. This because the domain short-url.rubenconde.com (or the one given by Netlify by default) would not be short enough to take advantage of the service. To avoid lengthening this part, I got the domain rubn.xyz for less than 10 dollars for two years (not bad).

After that I created the project in GitHub, associated it to a project in Netlify and started modifying the "_redirects" file. And voilà. Everything working perfectly.

However, I was not completely happy with that result. To be able to update the redirects list of the Netlify site, the project build action has to be executed. This can be done in several ways, the easiest one in my opinion is with a push to the repository. But if we review the action flow, it would be a bit like this:

  1. Create endpoint of the URL (either by hand or by some library)
  2. Modify the "_redirects" file
  3. Push the repository.

Yes, there aren't many, but sometimes I'm very lazy. So I kept looking for a solution and found a NPM package, netlify-shortener. With a simple command this package allows you to do the 3 steps above.

For more information on the project concerning this post you can go to the GitHub repository:

RubenConde/url-shortener - GitHub

Go to repository