An own URL shrinker, why?

Which benefits do you get with it? A complete guide to write/fork it yourself.

Subscribe to my newsletter and never miss my upcoming articles

I always asked myself 'Why would I ever need an own URL shrinker?' and I think you did so.

Why do you need a URL shrinker?

First things first, the most obvious reason is that you are able to shrink URLs, and you have no limitations. If you used a commercial URL shrinker like bitly or something else you have such limits. Another key factor is that you can use your own URL and that's awesome. It also looks cool.

How to write your own URL shrinker?

Basics

I used node.js as runtime. This simply because it can handle backend and frontend for me - this mean that I have not that much work to pass data to my backend. For frontend, I used express wit ejs. Simply because I have the most experience with that booth. For data storage I use MongoDB and for settings a .env file. So all dependencies are mention below. Depencencies.png The package shortId is used for the generated URLs.

server handling

First you have to implement and require the packages you use. They are shown in the following picture. Server-require.png

After that you should connect to your database. In my case it's MongoDB.

Server-database.png

After that I set some basic express settings for example view engine and stuff like that.

Server-set.png

After that I specified some routes. First the '/' route which shows all shorted URLs and allows shrinking new ones. Then the post '/shortUrls' which generates new shortUrls.

server-methods.png

The last one is '/:shortUrl' which handles every incoming request and count up for URL statistic.

server-handleIncomming.png

The last thing to do in that file was the 'app.listen' command which starts the server on a specific port.

server-listen.png

Index ejs view

First things in an ejs file which works for me like a HTML file is the head section.

index-head.png After that the body is starting with a form to shrink new URLs.

index-body-start.png

The last selection in that file is, the table for already generated URLs.

inedx-table.png

shrunk model

Then I created a model for the database. It looks like that

shorturl-model.png There is also they are where I generate the shrunk URL.

Don't forget

I also have a public folder for the favicon. It looks like that:

favicon-big.png

I have this project public to use at wlinc.de and open-source at GitHub. I'm looking forward to your feedback and pull-requests/issues.

Catalin Pit's photo

This is really interesting & good!

I never thought of implementing my own shortening URL service. I might do that for my blog.

Thank you!

Johannes Losch's photo

Yeah I really like my own too, also a file sharing platform (article coming soon)

Ashish Khare's photo

Interesting! Great article and fun fact is that I got to know about your article when I was looking for URL shorteners example. This, it really cut short my search. Thank you for writing this post!