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:
Storing the short link, corresponding to the long URL - in our database.
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.
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 ⬇️
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 🏠
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 🤖
Love the fork, it's super cool you added those error checking and status code features :)
re your points: 1. In the starter repl, I've used KEY itself - I hadn't in the demo instance, just changed that.
Yes, this is something I've seen other people struggle with too. It'd be dope if forks would also clone the env, except it'd be unpopulated - so the key names and comments will remain, just without the actual values. @amasad: Feature suggestion :)
The shortener should work fine even without the base URL, since it uses relative links.
Build your very own URL shortener 🔗🚀
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 onnode.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 setKEY
to your token, like this 👇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:
Both of these are super simple to implement, thanks to the
express
server we're using - we'll just be collectingget
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.
Adding this to our code lets us correspond the short path (
key
) to the longurl
, 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 ⬇️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 🔗
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 🏠If you browse through the
static
folder, you'll find a simpleHTML
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 theshorten()
function.Here's what the JS file does (I've also annotated the code with comments) 👇
🔍 Getting the path(
key
) and the longurl
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
andurl
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
@gabrielsroka
Love the fork, it's super cool you added those error checking and status code features :)
re your points:
1. In the starter repl, I've used
KEY
itself - I hadn't in the demo instance, just changed that.Yes, this is something I've seen other people struggle with too. It'd be dope if forks would also clone the env, except it'd be unpopulated - so the key names and comments will remain, just without the actual values.
@amasad: Feature suggestion :)
The shortener should work fine even without the base URL, since it uses relative links.
Thank you for typing out the feedback 😄