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
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
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
- We need
pugto 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
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,
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!
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.