How To Build A URL Shortener With Node.js, Express, and MongoDB - VoiceTube: Learn English through videos!

Subtitles section Play video

that's right.
After a long, long wait, were finally gonna be building another back and project.
And this one is a ton of fun.
We're gonna build a girl short inner, which is going to have all the works.
We're gonna have a u ie a back end, a database, absolutely everything you need to get this project 100% done.
So let's get started.
Now, After you're done building this project, you're going to need some place to host it and atlantic dot net, today's video sponsor is giving you an entire free year of hosting on their servers.
And these air some powerful servers that can definitely handle this application and even much more complex applications.
All you need to do is use the link in the description below and use the code.
Kyle, when you sign up and you're getting an additional $50 on top of the year of free server usage, so make sure you check out that link down to the description of Low to not miss out on this entire year of free hosting.
Welcome back Toe Web.
Dev simplified My name's Kyle and my job is to simplify the web for you so you can start building your dream project sooner.
So if that sounds interesting, make sure you subscribe to the channel for more videos just like this one.
And now to get started, I'm in a completely blank project so I can show you exactly what you need to do Step by step.
And the first thing we need to do to get started is open up the terminal and actually initialize this folder as an N.
P M.
Project.
So let's just drag this up.
So it's easy to see and we'll type n p m on it.
And this is going to initialize the folder for us.
We're gonna do all the default values hit, enter a bunch of times.
And if this goes you and error, make sure you have knowed installed.
I have a video on that all link in the cards and description down below.
And now our next step is to install the packages we're going to need for this project.
I'm just gonna get started with the very basic packages.
And as we run into needs for other packages, I'll introduce them then.
So since we're gonna be running an express server, which is going to have Ah mongo D B database.
We're gonna need to install packages related to express and mongo d be.
So if we just type in N p m I this will allow us to install any packages we list afterwards, and we're gonna need express.
We're also gonna need monkeys, which is for our database mongo D B.
And then we're gonna need E.
J s.
This essentially allows us to create our views are template ing language so we can make our HTML and are back and work together to send useful data down to the browser.
And there we go.
All of those were installed, and the last thing we need is our dead dependencies.
So which type in N.
P.
M I Dash, dash, save Dash, Dev and we want to install node mon, And what no demon is going to allow us to do is to make our server automatically refresh every single time we make changes.
Because otherwise you have to manually shut the server down and restart it yourself.
So with all of that done, we can open up our package.
Da Jason, You can see all of our dependencies here and let's just create a simple start script.
So we're gonna call this Dev Start and this is going to run node mon server dot Js And this is going to start up a file called server dot Js using node mon, which means it'll auto refresh forest.
So let's save that and create our server dot Js file And in here we can actually put all of the code for application.
So to get our server set up, let's just make the most basic server possible.
The first thing we're gonna need is that express library which we installed just a little bit ago.
So let's make sure that we require that library and if we run the express function, we're gonna get out of variable, which we can use to set up our entire application.
So we're gonna put that inside of app.
Then with that variable, we can call app dot Listen, we just need to pass in the port number we want to listen to.
So we're gonna use process dot e n v dot port This way, when you deploy your site, you can set the port environment variable and use that, but in development we're not gonna have that variable set.
So it's just default to Port 5000 instead.
And now we can say that.
And if we run NPM Iran Debs start, you can see that our server is going to start up and it's gonna open up on Port 5000.
Let me just drag in a browser that has poured 5000 up in.
And as you can see, we have our application open and it's saying it cannot get slash.
Essentially, we have no route defined for our index, so it's just to find a simple route.
We'll call it ap dot get this is going to be for Index.
This is going to take a function here with request and responsive variables that are being passed into it.
And in here we want to actually return some index file that we're going to create inside of a folder called Views.
Now in that folder will just create index dot e gs.
And the reason we're using dot e J s is because that's the template ing language we're gonna use.
And we downloaded that package for handling E.
J s.
So once we had that created, let's just put some placeholder text in here that says hello world.
So we can see if this works.
And on our server, we actually to set up our views to use the E.
J s view engine.
So what we can do is say act out set and we want to pass in here review engine because we're gonna be setting our view engine and we need to set this t j s.
That's the view engine that we imported and the one that we're gonna use.
And then in our app, we can just say here rez, which is our response we want to render are index file.
So we can just say index like this and if we save and refresh over here, you can see we're getting that text.
Hello world being printed out.
So we're now rendering everything in our index that E.
J s out to our browser here.
Now, the next thing to do is actually to create what we're going to use instead of our index dot t Js file.
And this index file is going to contain both a form for creating new short euros.
And it's also going to create a list of all of our current short euros that we have.
So let's get started by creating boilerplate html with this exclamation point and we hit enter.
And in order to get proper syntax highlighting in this e Js file, when we start going forward and using actual E.
J s syntax, you're gonna want to download an extension here, which is called E.
J s language Support.
As you can see at the top, make sure you have this installed and that will you properly get the syntax highlighting inside of your e Js file.
Let's just shrink that back down.
So inside of our e Js file, what we can do is actually put all of the code inside here for rendering out first that form as well as the table, which is going to contain all of our different results for the short Urals we've already generated.
So first I want to just have a title for a page.
We're gonna use an H one.
I'm just gonna call this Euro shrinker.
Then we're gonna have our form which is going to have an action which we're going to handle later and a method Bush in our case is going to be a post method.
And inside this form, we need to have an input which is going to handle our full euro and then a submit button.
So it's create a label which is going to be for our full girl and was getting some here say, full girl.
And then we're also actually just make that euro instead, and then we're going to have an input, and this is going to be a type of euro.
We're gonna give it a name here of full euro, and we're also going to give it an I D.
Which is full.
You're Oh, this is just our label is links to our input.
Now, lastly, we're gonna create a button.
We're gonna make this a submit button.
Whoops, submit.
And this button is just going to have the text of shrink.
Now, if we save, refresh our page over here, you can see we have the title label input and then our button for shrink.
And right now our form doesn't work.
But that's because we haven't set up the back and forth Now before we get onto the back end, let's actually create this show for a table, which is going to contain all of our different euros when we create them.
So it's created table, and inside here, we wanna have a header, and inside of that head of we're gonna have a row, which is just going to have three different th is for tea headings inside of it.
And the 1st 1 is gonna be far full, Uriel.
And then we're gonna have another one which is going to be for a short euro that we generate.
And lastly, we're gonna actually track how many times everything was clicked.
So we're gonna have another column which is going to be far clicks.
Then we're gonna have a body.
And inside that body, we're just gonna put a placeholder row for now.
So let's just have a single value here, which is just going to be, for example, my own website soldiers put an anchor tag here, which it has an H ref to https colon, backslash, backslash courses dot web death, simplified dot com.
And then we're also just gonna put that exact same euro as the text for anchor tag.
And if we saved that, refresh our page over here, you can see that showing up inside of our column as our full euro.
Now let's do it some more thing, which is going to be another T D.
Which is going to be for a short euro.
And we want an anchor tagging here, and this one instead is going to have in a trough, which is our shortened version.
So it's going to just say, for example, slash 123456 Whatever the short Dorial is, it doesn't really matter right now.
We're gonna use that same exact text inside of the Anchor Tech.
And if we refresh, we now have that euro, and then we're gonna have a final row in our TV, which is just going to be the number of clicks will say This one has 10 clicks.
And as you can see, this is what our table is going to look like.
Let's assume that a little bit, so it's not quite so scrunched up in that regard.
It looks a little bit better.
And now, in order to style everything inside of this of you instead of writing our own CSS, I'm actually just going to use bootstrap for this, so make sure you go to boot straps website, get bootstrap dot com, go to the download page and we're just gonna use the CD en for importing this into our app instead of downloading it locally.
So just copy this first value here for this link tag.
That's all we need.
And we're gonna paste that into the head save.
And now we have access to all of the bootstrap information which we can use to style.
Are Paige over here?
You can see it's already applied some basic styling.
So the first thing I want to do is work on styling out our form.
But actually, before we could get to styling the form, let's wrap everything inside of a class called container.
And in this container is just a bootstrap class, which allows us to have nice padding and margins and everything between the edge of our page.
So we have that container, put everything inside of it, and if we save refresh, you see that just gives us a little bit of margin and patting, which looks pretty good.
Now we can move on to style in our form.
So it's at a class here.
We're gonna use n y dash forthis is gonna add margin on top and the bottom.
So if we save refresh, you can see it just spaced our form out from our title and our table, and we're also gonna use a form in line so we can have our form in line like this when we start applying all of the rest of our bootstrap classes.
Now, the very first thing we're gonna do, which seems a little weird, is we're actually gonna hide this label and only allow it to be read by screenwriters.
So if we apply a class here which is equal, that s our only this means this will be screen reader only.
And if we refresh, you can see it's disappeared from our page.
So it'll only be read by people using screen readers and people that aren't using screenwriters just will not see it.
And that means that for input, we want to make sure we have a placeholder here which says you are Oh, and if we refresh that way, people know that this text boxes for entering in a euro also, we're gonna make this required, since we always want to make sure that they enter you, Earl.
And now we can apply some classes to this input here.
And let's just shrink down our side page.
So we have more room to work with HTML and the classes.
I want to apply our form control, and I want to apply a little bit of margin on the right of to what saved that and refresh.
Now, the last thing to do is to style this button.
We're gonna put button and button success That'll give us a green colored button.
We refresh.
You can see we have that green button there.
And if our screen size becomes large enough, then we're gonna have our form side by side like this.
It's actually just zoom out so we can see that when we have more room of our HTML and in order to make it.
So are you, Earl, text box.
Those the entire with.
We just want to apply a class of column to it.
So I'm just gonna say call here.
And if we refresh that now, force.
Is this your role to take up the full with no matter what.
Now, with that out of the way, our form is taken care of, and we don't have to worry about a rapping on to a new line.
It'll always be on the same line, and now we can work on styling at our table, which in bootstrap is very straightforward.
We just want to apply a class of table and table striped, and if we save refresh over here, you can see we have a nice looking table.
We can even apply the class of table responsive, and if we refresh, that's just going to allow us to scroll across our table on small screen sizes like this.
As you can see, that's working pretty well.
And we can expand this if we want to make it easier to read everything inside of our each team.
Oh, and that's all the styling we're gonna do for this.
It's just really basic styling.
I just wanted to throw it in here so it didn't book completely ugly.
Now the next thing to work on is actually going to be our post request for a form which is going to allow us to actually create new short your ills.
So the action we're gonna use for that is just slash short your l's so we're gonna post to this, short your oils and point, and then let's actually create that endpoint here.
We could just do an app dot post, And if you remember it, that is short your oils.
Make sure we start that with a slash like that, this is again going to take a request and a response.
And in here, we actually want to connect to our database and save a new short your Oh, so we need to set up our database connection.
And if you remember, we used a library, which we imported earlier, which is called Mono Goose.
So we're just gonna make sure we require that library Now, we can just do that by requiring Mongoose and in here we can actually connect to our database.
So to do that, we need to call the function, which is called mongoose dot connect.
We need to pass it in the U R l for this database.
So for our local database, we can use mongo, D B colon, local host slash and then we just put whatever we want to call this database.
I'm just gonna call it euro short inner lips, short, inner, just like that and then we can pass.
It's, um, set up options by default.
We're gonna want to pass it the options of youse knew your real Parsa.
Set that to true and also use unified topology.
And we're gonna set that to true as well.
This just allows us to not have to worry about any deprecation warnings, because, as you'll see, if I remove this and I save, you can see that I get these deprecation warnings down here.
And that's because we are using a certain version of Mongo, Devi and Mongoose.
So it expects us to have this use unified topology.
True.
And if I save you see those warnings are still appearing.
So let's see what they say is wrong.
We scroll all the way up, you can see it, says Mongo, parse area invalid connection string.
And it looks like I forgot to add the slashes here for a Mongo Devi connection.
Now, if I save, you can see we no longer have errors.
We refresh our page.
Everything is working fine.
No errors.
So we know that this connection is working as we wanted to.
So now we need to create a model that is going to store all of our short euro information.
So it's just create a folder called Models.
And inside this folder, we're gonna create a file called Short Your O.
J s Hoops.
Make sure I spell that quickly.
J s g o.
And in here we want to again require Mongoose.
So we're gonna do manga Sequels, require Mongoose just like that.
And then what we can do is actually create a schema so we can set a variable, which is called our short girl Hope Schema.
We're gonna set that equal to mongoose dot schema.
We want to create a new one of these, so we'll say new manga schema.
And this actually takes just a object which is going to be all over different columns for our database.
And inside it here, we're gonna have a full euro, a short euro, and then the number of times we've clicked.
So our first property is going to be full, and then we're gonna set some options for this.
For example, this is going to be a type of strength so we can use type equal to string, and it's going to be required True, actually say required true and essentially this full is the name of the column in our database.
And then this is just the type of that column, and whether or not that column is required, let's do the same thing for the short version of our euro.
The type is going to be string, and the required is going to be true.
But we need some way to generate a short version of the Earl because our form only has one your royal to enter.
But we need to actually generate a short euro to use.
So to do that, we're gonna use the library called Short I D.
So let's close out of here.
It was gonna end, p m.
I short I d.
And this is a library that is very simple.
All it does is to create a unique short identifier.
So let's import that we say short, I d is equal to require of a short I d.
And this has a single function inside of it that we're worried about, which is short I d John generate.
And this function just generates a short i d for us.
So in order to use that with our short column here we can actually specify default and we pass it a function and dysfunction is going to run as the default value for our short column, and we can just say short, I d dot generate.
And since this dot generate is a function, this is essentially the same thing as passing it a value like this.
It's just going to automatically run our generate function for us, so we don't need to worry about wrapping it in its own function.
So now every time we create a new short euro, it'll generate this short I d.
Here and save it in our short column.
The last thing we need to do is our cliques.
So what we can do is just our type here, set to number.
We obviously want to make sure that this is required so we'll say required true.
And our default for this one is just going to be a value of zero.
Always.
We want to start with zero clicks on our short euro.
That just obviously makes sense, and lastly, we actually need to export.
This will say module that exports is equal to mongoose dot model, which is a function that takes the name of our model, which in our case is short euro and it takes the schema, which is our short euros schema.
So this is actually what kind of hooks up our database and our actual model that you can see that we created here.
So now we can affect our database from within our model.
Let's just save that And now go into our server.
We can get our short euro hopes short girl, and we can just require that file.
If we start with that slash, that's going to be all of our local files.
We can go models and short your Oh, so now we have our short you are being imported and in our post we can actually create a new one.
So what we can say is short your l dot crete and all we want to do is pass in that full value, which is full, and we know we can get our body values by same request that body and this is going to give us access to our form.
And if we check in our e Js file, we have a name set on this of full your oh, so we want to just access the full your l property of our body.
And in order to get this to properly work with Express, we actually need to tell our app that we're using euro parameters.
So we're gonna say app that use express dot euro and coated.
And this takes a single object.
And all we want to do is set the extended property that false.
It's required that we pass in either true or false here.
Either one.
It doesn't matter for our use case.
And now, if we save, were able to actually create a new short, you're all here.
One thing to note, though, is this is a synchronous action.
It actually happens in the background.
And we want to make sure we wait until this is finished executing so we could just create a sink function will make this a synchronous, and then we'll just use the Oh, wait, he weren't here to say, we wanna wait for this to finish creating before we move on.
And if you're not familiar with a sink Oh, wait.
I have an entire video covering it in the cards and the description.
Now the last thing we want to do is just redirect our user backed to our home page this index page here.
So what we're doing, essentially is we're just creating a new short.
You're all ended a redirecting us back to the home page.
So now let's try that out.
Let's just refresh our page to make sure everything works And you can see we're getting an error, which can to make sure we rerun our sights.
So n p n run dead start.
Once that gets started up, we can now refresh as you can see.
And let's try a New York.
Also http s colon backslash backslash courses dot web dev simplified dot com And if we typed in shrink, you can see everything executed.
But are you girls aren't showing up yet, So inside of our get here, we actually want to make our Urals show up so we can call short URL dot find.
And this is going to get all of the girls instead of our short your old table so we can just say short girls is going to be equal to a waiting that function motors.
Make sure that this is an a sink function so that we can use a wait and then we can pass those short your rolls down into our view by just passing like this, an object with short your rolls like this.
And then in our index file, we can actually loop through every single short girl.
So we're gonna do is take our short girls we want to live through each one of them.
So for each short girl groups euro, we wanna run this function here.
And let's just make sure we end off these brackets and create brackets around these clothes, closing one's as well.
And then we're just gonna copy this code because we're gonna essentially use this exact Rose Syntex.
But we're gonna replace the's a trips that we manually set by using the waitress from our short girl So we can say short.
You are l dot full because this first column is for our full information and we're also going to set the text of our anchor same exact thing.
And then this one is going to be for our in here short euro dot short.
Let's make sure you close that off and again, we're gonna copy this and paste this into this section here and then lastly, for our clicks, we're gonna do the same exact thing.
Short girl dot clicks and we're gonna close that off.
And let's just make sure all of our syntax looks correct.
We have opening and closing brackets for all of these.
This one's opening, closing, opening, closing, opening, closing, opening This'll closing one is backwards, though, so let's make sure we have here.
And now all of our Syntex should be good.
It's now if we save and refresh, you can see that this is actually updated toe have our normal courses euro.
And this has the auto generated short your that we created and then our clicks.
But obviously when we click are short, you're Oh, this isn't gonna work.
It says cannot get this weird short you, Earl.
So in order to fix this issue, we need to create yet another route, and the important thing to do is make sure this route comes at the very bottom of all of our other routes.
So we're gonna say ap dot get and we're going to do is get anything that has a value here.
So we're gonna call this short you are l so essentially what this is saying is give me any route that has information directly after the first slash.
So here, directly after the first slash, we have this text and this is going to be saved in a parameter called short girl.
And then we could do the same thing.
Request response.
And while we're at it, we're just gonna make this in a sink function as well.
And inside here, we can use request that program dot a short euro and this is actually going to be whatever we pass here, this short euro inside of our girl up here so we can just actually use short URL our model.
We can call the dot find one, and all we want to do is we want to find one based on that short property.
So whenever the short property equals short euro, we want to actually find that model so we can say our short girl is going to be equal to a waiting this function.
And if we take a quick look at this, what's happening is we're just calling to find one method on our database, passing it in our search query, which is just saying we want to find which everyone has this short I d, which is passed in from our euro.
And then we're going to save it to this variable.
Now, sometimes people are gonna pass a euro that doesn't exist.
So we want to check for that.
We could just say if short euro is equal to books.
No.
Then we just want to return.
Return rez dot Send status of 404 essentially saying we cannot find what you're looking for.
Otherwise, if we do have what they're looking for, we have a short you're all here and we can take the clicks on it and add one.
Essentially, they've clicked on this, so we want to update that quick counter by adding one.
And then we want to make sure we call this a function toe update our short euro with this new clicks value, then lastly, we can call rez dot redirect, and we're actually gonna pass it in.
Our short euro got full.
So essentially we passed in the short your oh, we appended one to the clicks.
And then what we're doing is getting the full euro and redirecting our user tow wherever that happens to be so now it's safe.
And if we refresh our browser on this, we should get redirected to my course page.
And of course, that didn't quite work as intended.
So let's take another look over here.
And I noticed immediately that I spelled this Perrin wrong.
It should be request dot programs instead because we want to search through all of our programs.
And now, if I save and I refresh this, we should get redirected my course page.
And as you can see, it redirected us to my course page.
Now let's go back here.
Obviously, we want to be on our local host 5000 just like this and let's create another one will go to my block, for example, say https blogger dot Web.
Have simplified dot com, and if we click shrink, you can see that shows up down here.
We have our short euro, and you even notice our clicks on this short.
You're up.
That we've already used has been implemented by one.
And now let's just open this in a new tab and you can see it's redirected me to my block by using that short euro instead of having to use the entire long girl.
Now, the very last thing to do is we want to create a file over here called dot Get ignored hopes, Ignore just like that.
And we want to make sure we ignore our node modules.
And the reason we're doing this is if you ever deployed the site using git or get hover something like that, you don't want to send all of these node modules up to your server.
Forget and get hub.
You just want to send up this package.
Da Jason, which handles downloading all of those files for you.
So what this?
Get ignore.
We're just ignoring that folder so we don't have to worry about saving it to our get hugged depository or whatever repositories you use.
And that's all there is to creating this amazing Euros short ner.
If you enjoy this video, you can check out some of my other project based videos linked over here and subscribe to the channel for more videos just like this one.