Create a URL shortner with Clojure and MySQL

hey what's up guys it's been a while since i made a video and that's because i'm a daddy now but i think the one i have today is going to be super cool so let's get started cool so in today's video basically what i want to create is a url shortener so you put in a url and then you get a slide back which is like four characters long and then when you hit our endpoint with the short like the short slug you get redirected to a longer url simple enough let's get started so the first thing i want to do is create a directory and i'm going to call it short url and then i'm going to cd into short url and open it in vs code then i'm going to create a devs.edn file and just put in a blank map save this this will get culver going and create some files then i'm going to create a new file i'm going to create it in a directory called source and inside of that i'm going to create a directory called short url and then i'm going to add call dot clj cool and i'm going to go back to devs.edn and i'm going to add a path and that path is gonna be source awesome so the first thing you need to do is actually add closure as a dependency to this project so i'm gonna go to depth and add a map here and then we can go org dark closure forward slash closure and then we need the maven version so that's nbn forward slash version and that will be 1.10.0 rad so the first aspect of this project that i'd like to work on is getting a database up and running and then connecting to that database and then querying the database as well as inserting data into that database so let's do that i'm going to create a new file here inside of short url i'm going to call it db.c and save this and i'm going to use planet scale to spin up a free database which you can do so i'm going to go to my planet scale account i think it's open here cool and let's go down the road here and create a database i'm going to call it short url and i'm going to create it in bank fit create database this is super quick cool then i'm going to wait for that to initialize and click connect then i'm going to grab the connection data and just add that as a comment here so now we need to actually connect to this so what i want to do is use the jdbc library as well as a mysql connector go to the github repo and then we can copy the dependency here where is it here we go just copy this and let's paste it in our devs.edn file and then if we go down here a little bit we can see we need to connect to my sql so i'm going to get that link and here we can get the drivers so let's click on this i'll click on this group id and click on the connector okay we're just going to loop here got to this page um where is it okay we can copy this line again dependency and it's just converted to a depth.edn dependency so to do that we just get rid of the vector then we wrap this in a map and we give it the key a maven version so that's all we actually need to connect to our database so let's go back to our db.clj file and let's connect to it so if we go back to that jdbc git repo i think there's some example code yeah exactly cool so let's copy this def definition mysqldb db type mysql yup db name that's gonna be short url so i'm going to copy this user that's this password that's this and then we need a host so i'm going to copy this host and i'm going to add a new key here i'm just going to call it host and pass that through cool so now we have our credentials we can actually get rid of this and let's see how we connect so if we go down here cool to query we can just copy this and let's try execute well actually let's create a table that we can query from so i want to go back to planet scale close this click on branches click on main then i'm going to click on console and inside console we can actually execute queries so here i'll just create a table so to do that i'm going to run create table and i'm going to call this table redirects and open some brackets and inside here we'll have a slug and the slide will be our primary key and it can't be mel all right and it also has to be a varchar and let's just make it let's make it 10 characters long even though we won't use the full 10 characters and let's create a url that will also be a varchar and it'll be say a thousand characters long and it'll it can't be now so not now execute this cool now we should be able to select all from redirects and it should be empty need a semicolon awesome cool so now we have a table let's go back to vs code and from here we can select all from redirects we don't need this save this this needs to close this off and let's actually run a ripple so trevor start a project repel connect to devs.edn cool our ripple started now i can load this namespace load this database definition and let's see if we can query this okay we're not importing j let's go back to the library github page and see what j refers to and it's just jdbc so let's just copy this and we'll require it at the top here so i require pass through this and let's evaluate this again now we should be able to query some data execution error create sql exception and that's because we need a from here cool we should get nothing back awesome okay so this actually is another library called handysql and that will allow us to create sql care sql queries using clojure in a really cool way if we go here go to this github page and let's look for the dependency let's copy this copy this go to our devs.edn file and let's paste that in here save it and let's go back and require it so yeah i think we need to require i'm just going to require all the helpers and that has like these select statements and that kind of thing so let's go helpers refer and that's all so we'll get all of the functions in that namespace and i think we also need this sql import so let's add that and we probably have to just restart our apple to get those libraries in the project close this close this re-evaluate this and now instead of going select all from redirects we should be able to go how's this look actually yeah select okay let's just copy this here so let's just execute this to see what we get so i think this creates the select map and then to actually convert it to a query you go sql forward slash format yeah and it creates the select there so we'll have select all from redirects where we won't have a where cool select all from redirects and that's what we'll put inside of our query and just see if this works it doesn't oh and that's because we restarted our apple so we need to reevaluate this we evaluate this and we should get nothing back awesome so let's create a query function so i want to define a function here called query and it takes in a query and basically it will run this so i'm just going to cut this and instead of executing this it'll execute this with the query and let's just need this up evaluate this and let's create a comment and basically these comment functions don't get evaluated when the file loads so you can just create little tests for your functions so let's test query here and with query we want to test the select again and if we evaluate this we should get nothing again cool so that's nice now let's look at a way that we can create an insert so i'm going to find a new function here and i'm going to call it insert and it's also going to take a query and how this can run is let's go j i think it'll have yeah db do prepared and we'll need to pass through our mysqldb and execute q evaluate this and let's create an insert query to insert and yeah let's actually look here at how to do an insert statement so i'm just going to search for insert inserts i'm just going to copy this cool so we want to insert into redirects columns will be slug and url and we don't need age values let's for now we'll have like abc and let's get a url let's point it to this url and get rid of these and we don't need to make it pretty let's test the insert so let's evaluate this cool we get a one back which i assume means everything went cool and let's query and double check that everything did go out yeah and we have our first row so i also wanted now let's create like normally i have like a model file or something but i want to do it all in here because it's a pretty simple project i'm just going to define a function to basically insert a redirect and then to query redirect by slug so let's define a function called insert redirect and i'm just adding these exclamation marks because these functions have side effects so this will take a slug and a url and we'll basically run this so i'm going to copy this and it'll instead of having this it'll have a slug and here will be our url cool and if we evaluate this we can now do another function check here insert redirect and the slide will be let's say xyz and let's get another we'll use this url has this url here and let's see if this works evaluate this cool looks like it worked and let's check if we have two rows here so that's the first one i think it might be there we're just not seeing it let's open our output yeah so it's here okay cool so now we've connected to our database we can insert redirects and we can query redirects but we can't query a specific slug so let's create a function for that so def n let's see get url and this will take a slug and we'll query so let's query go so let's copy this cool so we'll query from redirects but we need a where clause so i'm going to go where and to do that we can go it's equal to my video recorder is making this highlight when i press equals oh my goodness okay let's just go copy an equals statement from here so let's copy this equal sign okay so where slug is equal to our slug so let's evaluate this function and let's just check it out here i'm to go get url and it'll pass through our slide which would be let's say xyz and now we should okay we get the whole row so we just want to get the url out of this row and i can see that this row is returned inside of a list so here what we can do is we can wrap this with a thread macro and then we can get the first one out of this list first and that will just return this without the list because we're getting basically the first element and i think this is in the wrong place yep now it's in the right place re-evaluate this function we evaluate this cool so now it's out of a list and we just have our one record and let's just grab from that the url so let's reevaluate this and run this again cool and now we're just getting the url so basically the threading macro is getting information like this so we have a vector with a map and there's a url and this could be let's say our url then what it's doing is it's getting the first element from that url which would be the first map so if we run this it'll just return this so we could have like you know multiple maps in here we could say a b let's just and if we write we run this we'll still just get this first map then we're basically using the keyword as a function here so like if we grab this map and we just ran url on here we'd get our url because uh keyword function is basically the same as like get from our map the url key it's just a shorthand this vector gets passed through to the first function which returns us this map and then url executes on that map and returns us the value for url from that map so let's just test this out we have a database working awesome so now what we need to do is create a server with some endpoints to well one insert a record and two actually do the redirect so let's do that so what i'm gonna do here is actually go to my youtube channel two thousand subs not so bad videos cool i made a video with alan about creating an api so let's just go to that repo i think i'm just going to copy the libraries that we used there so let's just copy all of this and go to our devs.ddn file and just paste it in and okay so this obviously won't work like this there's actually another cool tool that we can use to fix this up it's called dipsy and it's a cool project where you can just like paste project.clj dependencies wrap this in a vector and it'll return you then as the depth version so let's copy this out and paste it in here and just get rid of the steps key and this map and let's format it so it doesn't look gross [Applause] and now it should fall back nicely cool and for ring we just need a ring forward slash ring and those are the dependencies that we need and let's start our ring server so i'm going to go back to our core.clj file and this is going to be basically where we start the server and where we have our roots and our handlers so the first thing i want to do is let's figure out how we create a server so i'm going to go back to this repo i'm actually going to paste this repo here to make it easy and we can go to source call and let's just copy the server part and this app part well let's require ring so we go require and let's just see where this require is let's copy all these require statements and evaluate this and it doesn't work because we need to restart our repo so restart the repo started and now we can evaluate this and we'll have all of these dependencies in this file cool so i don't want any of these handlers cool i'm just going to create a handler here and this handler will basically give us a function the function takes in a request and we need to return a response so the body will be hello and the status will be 200. cool so now that will go to forward slash blank and let's evaluate this app cool and running run jd app actually returns us a server and i'm going to define that server in our project server will be the evaluation of start and the reason i'm doing this is so that we can stop the server if we want to and if you make this a symbol like this then we don't have to keep on restarting our ripple so let's evaluate this if we evaluate this now okay we have a problem bind exception okay it's because i'm already using port 3000 so let's stop server does that work i'm going to make this run at port 3001 evaluate this start our server and now if we go to you know we can actually test this all inside of vs code i'm going to use an extension here called rapid api let's download it now we should have a thing here rapid api and now what we can do is create a new request so it's plus here and if we go to localhost 3001 let's just i think we might need the http here and cool we get our string of hello returned awesome first things first maybe let's start with the redirection because that's going to be a simple get request so let's create a handle here called redirect and that's going to take in the request and from that request we basically want the slug so we're going to have a path here of a slug so to make that dynamic we just use a colon and you can call it slug and it will end with a trailing slash and this will run this redirect handler so let's run redirect and for now let's let's just copy this here and let's see if it works evaluate this evaluate this well let's make this say something else it'll say hello to and then we don't need to restart the server i don't think let's create a new request and here we go http we'll go to localhost 3001 and we'll go to abc forward slash you get 200 back hmm it doesn't look like it worked let's go back to core let's stop the server start it again let's do the request check the response let's just check the other request works hello let's change this to like hello 2. we run this okay that worked why is this not working let's check ah okay so i can see why it's because we just need to return this body not the whole thing so let's evaluate this evaluate this go back to request two put in abc as the slug run this and we should get hello to go back here and now what we want to do is actually get this like from that request so to do that we'll create a left binding and these path params are actually available inside of the request so we can bind the slug variable to if we get in our request i think it's going to be inside path params like this and then we'll get the slug out and let's just actually return that so instead of doing these responses ourselves there's actually a utility we can use and we can import from ring dot util dot response and import this as r evaluate this now we can return this so response response and we'll just add the select here so if we evaluate this go back to request 2 this hello 2 should now be abc and it's not so let's see why let's evaluate this again so here cool okay that's abc awesome so now we have our slug we just need to perform the redirect so let's go back to call and we can easily do that redirect by um getting the url and we just need to import our db namespace so we can go from short url db import this as db and here we can execute db get url and we pass through our slug and then here we can run redirect with the slug but let's actually just we can check if there is a url then we can run the redirect if there isn't we can return not found and we'll just say not found let's evaluate this and there's a problem oh i think the problem is we didn't evaluate this namespace so let's do that now we should be able to evaluate this with this redirect we can actually also pass through a status i'm going to pass through 307 as a temporary redirect just so we don't cache anything we're redirecting to the slug obviously that's not going to work so we need to redirect to the url let's evaluate this i think we also need to reevaluate this app now it should work awesome cool so let's look at creating a post request to insert a redirect record so i'm just going to get rid of well instead of this saying hello to you i'm just going to say let's create vrx screen here let's create an api endpoint so i'm going to create api route and here i'm going to create a new route called redirect and it will accept a post request and for now let's just copy paste this and we'll say the body will return post so that we know that this handler is at least working and let's just add a trailing slash evaluate this go to rapid api we'll create a new request http localhost 2001 and forward slash api forward slash redirect forward slash they'll do a post request let's add some data here so in the body let's add some json and basically all we need to add is oh my god i'm just going to zoom out so that i can at least see what i'm doing add url and the url let's grab a url we'll use this devc github repo as our url and let's send us through to our api cool so the post request is working well at least our endpoint is like working let's now create a handler that will create a new redirect in our table so i want to define create redirect handler and this is going to take in our request and the first thing we need to do is get that url out so let's create a let binding and the url will map to we can go get in our request so the path params i added in this path params key inside the request map the post params are added to a body things called what is it called maybe the autocomplete body params body params and we want to get the url out and then what we want to do is we actually want to create that slug so let's go slug here let's create a new namespace to create the slug so i'm going to create a new file here i'm going to call it slug.clj this lag is just going to consist of well let's make it like uppercase characters so let's define the alphabet so char set i'm gonna a b c d e f g h i j k l m n o p q r s t v x y z cool so essentially what i want to do is just pick four random characters from this character set and that's our slug so i'm going to create a function here called generate slug what i want to do is let's create a comment here i want to get a random character so to do that we can go rand nth on the triset and that will i have to evaluate this namespace maybe yeah this will always return us a random character but now i want four random characters so what we could do is we could take four from repeatedly running rand and chassette i think this will work oh this has to be inside of a function and i think this this work cool now we get four characters so basically what's happening here is this repeatedly is just generating i think i can run that by itself just grab it out and run it you can use cover to just run this independently but i want to just make it a thing here and if we go check our output yeah it's just going to repeatedly make a long list of characters let's go back there and it's a lazy sequence so we don't have to worry about how much memory it takes up now we're getting them as characters we want them as like a joined string so so this is a list of characters so we need to run this on apply string cool and what apply stream does is basically it takes a list of characters and it makes them arguments to string so that they're individual arguments instead of a list of characters let's write that a bit nicer so we can actually thread that so we can run this repeatedly repeatedly create the list of random characters and then from this we want to take four so we'll take four of those then we want to run apply string to convert them into a string so if we evaluate this here and then run generate slug cool we get our slug easy peasy let's go back to call and let's run that here we need to first import it so short url that slug let's refer to the generate slug function and then we can run generate slug and then we have those dbs we have those functions that we created in the db name space to insert it so db insert redirect and that takes a slug and a url and then we can return response so we'll just say created slug well let's make this a string created slug and that will be our slug evaluate this and there's a problem and that's because sdr should be lower case and there's more problems and i don't know why let's see i'll put unable to resolve symbol generate slug and that's because we need to evaluate this and then we can evaluate this and then here instead of this handler we can just use our create redirect handler evaluate this and let's go back to our post request and let's make this smaller run send cool so now we have a slide generated z2cv paste that slug in here and it should redirect us to depth c cool and that's it actually there is one other thing that i'm going to add in now before we end the video and that's going to be using let's go back here i want to use environment variables to store our database credentials not just hard code them like this so let's do that i'm not going to use a library i want to show that you can actually do this yourself so i'm going to go into our folder until source directory and create a new file here i'm going to call it env.clj and yeah let's look at how we can actually do this ourselves to get environment variables enclosure you can use system forward slash get env and pass through an environment variable name so like home this is one that i just have on my system basically i want to create new ones so the first one i'm going to create is well all of these host i'm going to just copy this map here and create a new file and i'm going to put this in an edn file called let's say env.edn paste this and let's make these uppercase let's go back to our env file let's load that map into a variable so i'm going to define a variable here i'm going to call it let's call it in vars and to load a needle in the file it's actually really easy we can just slurp env dot edn and then to pass this file we can go closure dot edn forward slash read string and now if we evaluate this and let's just print out what e and vars contains it's the map of those environment variables so let's make a env function i'm just going to create a comment block here let's create a function here called env and it takes a key and let's say it first tries our env if it's there then cool it returns that one if it's not there then it tries to get it from our system get the key so it expects to take a key like this so we expect something like env sorry what's let's say host post so we can get the key from our emv vars if we evaluate this now we'll get host but if we run this it's going to return nil but i want it to actually return this home directory so what we can do is we can wrap this in an or so first try is to get this otherwise i'll return it so if we just returned let's say k here now we're going to get hey because this is nil so it returns this but we can actually run get env key but now this key is going to be shaped as a keyword so it's going to look like this and that's also that's not going to work we need it to be a string so we can easily get around that by wrapping this in name because if we run name on a keyword let's say home it's just going to return the string value of it so if we evaluate this and then run env home we'll get our home directory and that's how we can create emv bars so let's go back to db and replace these with our environment variables so let's import from short url.env and let's refer to the env function evaluate this and let's get env host oh this we can actually keep hardcoded as mysql let's go env db name in the user and env password cool let's evaluate this and let's check are my sequel credentials which are very secret and it still works cool so now we're using env variables cool so now i'm actually done with this video i hope you guys enjoyed it in the next one i want to create a front end for this application so you can just paste in the url you want to create a short url for and then ever return that short url on the front end see you in the next one bye guys

Create a url shortner in Clojure. In this project we create a server which allows you to use a slug to redirect to a longer url. pretty cool. github link: https://github.com/danownsthisspace/shorturl 00:00 Intro 00:01:36 Connect to a MySQL database 00:16:42 Create a server 00:20:55 Create a redirect endpoint handler 00:25:42 Create post endpoint to add a redirect 00:27:44 Creating a four character slug 00:32:30 Using environment variables in Clojure