Name: How To Build A URL Shortener With Node.js, Express, and MongoDB
Uploaded: 2020-03-28T16:49:12.000Z
Duration: 25 min 38 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Past continuous

After a long, long wait, were finally gonna be building another back and project.

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.

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.

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.

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.

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.

All of those were installed, and the last thing we need is our dead dependencies.

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.

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 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.

So once we had that created, let's just put some placeholder text in here that says hello world.

And on our server, we actually to set up our views to use the E.

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.

So we're now rendering everything in our index that E.

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.

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.

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.

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.

You're Oh, this is just our label is links to our input.

Now, lastly, we're gonna create a button.

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.

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.