Create A Reverse URL-Shortner

Ever wondered where that arbitrary link directs you to? I know I have, this is why I made a reverse URL-Shortener. Though, as I do not have the assets to keep another site up and running, I figured, that I might aswell, create a simple tutorial for others to use.

First of all, we need a blank slate. So start by creating a folder — easy stuff — name the folder whatever your heart desires.

Note: I’m going to use yarn to install my dependencies, but you can use npm or whatever else is out there, I really don’t care, it’s totally up to you!

As lots of developers would do, start thinking of which dependencies your app will need. You can skip this step if you just want to install as you go, but I’ve already figures some of the dependencies for you, read along to reveal them.

First of all, we are going to make use of a great framework for our server, I’m happily recommending express but it’d not important what you choose. But whatever you chose, install it using yarn add express and let it do it’s thing.

Now would be a good time to set-up server.js or index.js — whatever floats your boat. Don’t worry, it’s pretty easy stuff we’re doing here.

We start by including express and create a new app from it. Then we create a simple default route. And lastly listening on port 3000 on the app.

Wait, there’s something wrong, right? Well, we’ve told the app to render index.pug which is pretty much impossible at this time, as:

  • We haven’t created a index.pug
  • We need pug to render the view

So, let’s fix this in the opposite order, by install pug, so add it using yarn add pug. Now, that’s better, but we still do need to tell express that we are using pug to render our views. So let’s do exactly that.

Well, we did not only tell it to use pug, but also told our app that we’d like to use /views/ as our view folder. And now we can call node on our server.js, using node server.

Still nothing is going to work, as we actally haven’t created our view yet. So why not do it?

Notice how we’ve included two files, that doesn’t exist? We should really create these files, otherwise nothing is going to happen, and it’s not exactly pretty.

So, let’s flip a coin and create the stylesheet first.

I’m not going to explain the styles, so let’s move on to the next missing file. The main.js, this is probably the second most import file, as without it, we’d never be able to get any results from our reverse URL-shortener.

Firstly, let’s make a few constant-variables, for our elements, after the window has loaded.

This is all fine and such, but we still can’t do anything. So let’s create some functionallity.

Try starting the app now, and click the “Go Figure”-button.

Great, right? Nothing seemed to happen. So let’s open the dev-console. Nice, an error happened! Let’s fix this error.

Restart the app, press the button again and *bam*, an error occered. Know what’s wrong? You’re right, we’re calling a method that doesn’t exist. This is also the most important method of the app. So let’s create it. Or wait, let’s install a few dependencies first, bluebird and request-promise.

Now that we’ve inluded those dependencies. Let’s export a new method.

And now for the fun stuff! The cogs of our app.

This isn’t exactly complicated, but let me explain what happens. Firstly, we’re making a request to a url, of which we tell request to follow any redirects that it might meet on it’s way. Second we’re telling request-pomise that we’d like the response instead of the body and returning the uri after the last redirect.

Now, one final thing we need to do. And that is, of course, to include our newly create script.


Finally, restart the app, navigate to localhost:3000 and check out the magnificent thing we’ve just created!

A random link, redirecting to mcordes.me

Beautiful innit? Well, I know we should probably do a lot more, to make a service out of this, like some cors and security. But for now, you have a working reverse URL-shortener!

If you’d like, you can check out the complete app on github.

Thanks!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.