Build your very own URL shortener šŸ”—šŸš€
h
jajoosam (614)

Build a tiny URL shortener, using a remote database

Demo āÆļø Code šŸ‘Øā€šŸ’»

Setting up a URL shortener is a lot of work - either you have to pay, or spend hours setting up your own server.

This is a guide to making your own URL shortener with repl.it - using express, and a remote database - all on node.js

šŸ› ļø Getting our environment running

First up, fork the https://repl.it/@jajoosam/tyni-starter repl, so that you have a running project. Next, create a new file - .env

A .env file can store secrets for you, that no one else will be able to see. This is where we want to store our token for accessing the remote database.

šŸ“ Making our database

We're going to be using jsonstore.io for storing all our URLs.

Head over to jsonstore.io/get-token - and copy the token you see - this is the secret we want to store in our .env file.

Open up your .env file, and set KEY to your token, like this šŸ‘‡

KEY=yourTokenGoesHere

Remember to keep no whitespace, or your token might not be recognized right!

When you open index.js you'll see that I've already initialized the database, and a small web server for you. Now let's get to making our API so we can shorten them URLs šŸš€

šŸ‘Øā€šŸ’» The API

There are two parts to our URL shortener:

  1. Storing the short link, corresponding to the long URL - in our database.
  2. Redirecting visitors from the short link to the long link

Both of these are super simple to implement, thanks to the express server we're using - we'll just be collecting get requests for both of the tasks.

For adding links to our database, we have a special endpoint - requests to it have two parts: the long URL, and the short path.

app.get('/shorten', (req, res) => {
	db.write(req.query.key, {"url": req.query.url});
	res.status(200);
});

Adding this to our code lets us correspond the short path (key) to the long url, and then we finally send a successful response.

For the second task, we'll just be collecting the short path (key) from a request, finding the corresponding URL in our database, and then redirecting our visitor ā¬‡ļø

app.get('/:key', (req, res) => {
	db.read(req.params.key + "/url").then( (url) => {
		res.redirect(url);
	});
}); 

That's prety much it - we have a fully functional URL shortener šŸ¤Æ - check it out for yourself, open a new URL which looks like this šŸ”—

https://tyni.jajoosam.repl.co/shorten?key=yay&url=https://dsh.re/50854

Now, going to http://tyni.jajoosam.repl.co/yay will be nice to see šŸ‘‡

Of course, you'll be replacing tyni.jajoosam in those URLs with your own repl!

āœØ The Frontend

Our URL shortener does work, but it's tedious, having to type out a huge URL before shortening it - we can make the whole process much simpler with a simple frontend.

I've already created this - and gone for a neat and minimal look using wing.css

You just have to add code to send visitors to the hompage in the static folder šŸ 

app.get('/', (req, res) => {
	res.sendFile("static/index.html", {root: __dirname});;
});

If you browse through the static folder, you'll find a simple HTML file with a form, CSS to style our page, and most importantly, JS to send requests to our URL shortening API.

The HTML is quite straightforward, we're asking for the long URL, and optionally a short path.

Open up script.js and you'll see the shorten() function.

Here's what the JS file does (I've also annotated the code with comments) šŸ‘‡

šŸ” Getting the path(key) and the long url from the form.

šŸ“ Possibly generating a random 5 character hash as our path (in case there's no path entered)

šŸ”— Sending a get request to our API, with our key and url as parameters

šŸ–„ļø Displaying the shortened URL on our page

šŸŒ Getting our custom domain

Sure, our links are shorter - but we still don't have them on our own domain, and the repl.co links can be pretty long šŸ‘€

Luckily for us, the folks at repl.it recently allowed custom domains to be used! That means this project could be something you actually use all the time šŸ˜„

Check out dotcomboom's guide on using custom domains, it should only take a few minutes. It also teaches you about getting free domains šŸ’ø

Be sure to put down any questions or improvements down in the comments šŸ’¬ - and here's all the code for you to go over again šŸ¤–

https://repl.it/@jajoosam/tyni

You are viewing a single comment. View All
jajoosam (614)

@RossJames you can use store.delete(shortUrlPath) šŸ˜‰