Because in this video we're gonna tackle how to build a blawg using mongo, D B express and node.

And by the end of this video, the skills that you learn are gonna be applicable.

Toe.

Absolutely any application that you want to build with these technologies.

So let's get started now.

Welcome back to Web Death 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.

Not to get started.

I have a blank folder open and visual studio code, and then the final version of our project open on the right hand side of our screen so we can see what we're going to build.

And as you can see, we have our different articles showing up on our main page.

If we click read more, we can actually view our article.

And the great thing about these articles is if we click edit, you can see they're actually written using marked down so we can change this mark down to have anything we want.

Let's just say we wanted to add a smaller title in here.

We could just say pound, pound, small title and click safe.

And you can see we have our smaller title after a bigger title, so were marked down is automatically being converted to HTML.

We also have the ability to create a new article typing some stuff here.

You say it shows up, and even the path to our article takes into account the title of the article instead of having some ugly I d in the route.

So we have all of this interesting stuff baked into our system, even including delete buttons.

So absolutely everything is here, and I'm gonna show you how to build this from beginning to end.

But the first thing we need to do is actually set up our server.

If we type n p m on it, Dash, why in our council hit Enter, this is going to give us a boilerplate basic package dot Jason.

And now if we type n p.

M i and all of our different dependencies, we can install our dependencies.

So we're gonna have express we're gonna have mongoose, and we're gonna have E J s Express allows us to create our server mongooses for a database and e j s is for our different views.

Next thing we can do is install our dead dependencies.

So we'll say N p m I Dash, Dash save Dev.

And in here we want to install Node Mon Now no one is going to allow us to automatically refresh our web page every single time we make a change to our actual files here.

And in order to run node Mon which is going to create a simple script, we just call it Death Start.

And inside here we're just gonna put node mon server dot Js!

And now if we created that server dot Js file and we run NPM Run Dev start, What's going to happen is this file server dot Js is going to be ran and every single time we make a change and click save, you see it's gonna refresh We're getting an air, obviously, because this is not real code.

But as you can see, everything is hooked up correctly.

Now the next thing to do is to create our server.

So we're gonna get expressed from that library that we just installed.

So we're gonna require express and we're also going to get our ADT variable and that just comes from calling express.

So what you gonna say express and call it as a function like that.

Now, if we do ap dot listen and pass in a port, we can start up her application and it's gonna be in port 5000.

So now if we go to our browser and type in lips local host Port 5000 you can see we get her application loading up and it says cannot get slash.

And that's essentially saying we don't have a route set up at the index.

So let's create that route we're gonna use apt to do that.

We just say app that get and we passed in slash here, which is just her index route, our main round, and this is going to take our request as well as a response.

And for now, let's just send to the user with a response dot Send the text.

Hello world.

And if we save refresh, you can see we get the text.

Hello world being printed out to our screen so we know that everything is working properly.

We have our view hooked up, but now it's time to actually make it so it prints out HTML to the screen because just printing out text is not very useful.

Except to do that, we first need to set our view.

Engine will say ap dot set passing here view engine and we want this to be set to E.

J s.

And that's because we're gonna be writing all of our views using E.

J s.

And then our view engine is gonna convert that E.

J s code to HTML.

So once that's done, we can create a new folder.

We're gonna call this views and in this views folder we want to just create an index dot e j s for now and inside here.

If we click exclamation point hit, enter or tab, this should bring up this bullet plate code for you.

We'll make our title blawg and then inside here will just say this is html.

So now in our server, instead of sending, we want to call render This is going to access our views folder and we just pass it the path to the view we want which in our case, is just called Index.

Now, if we save refresh over here, we get our HTML and it says this is HTML.

We can put this inside of an H one to really prove that this is HTML.

Now, if we save and refresh over here, you can see it says this is HTML So we have everything working exactly as we wanted to.

So now, with these basics set up, we have a bunch of different routes we need to create.

We need a new route.

We need to be able to view an actual article, delete an article edited save it all of that different stuff.

And instead of putting all of those in this server dot Js file because it would become quite large, we're actually gonna create a new folder which is called Routes.

And this is where all of our different routes are going to get stored too.

And for now, we're just gonna create a route called articles dot Js.

Just like this.

And in here is where we're gonna put all of the routes directly related to our article.

So, for example, our shore out here are edit route all of that is going to be inside of this article's got J s.

And in order to use routes in here, we first need to set up express.

So we're gonna install that express variable again by just requiring express.

And then what we want to do is get our router, and this is just equal to express dot router.

So you could say dot router and call this as a function, this is going to give us a router that we can use to create views.

And just like this, where we say dot get and then render something.

It's gonna give us that exact same capability, but it's gonna be through this router instead.

So we could say router dot Get and passing a slash like this.

And now we're going to get a route at the Slash.

But the main thing about this router is that we actually have to tell her application to use this router.

So in order to do that, we need to export this router from our articles.

Daja.

Yes.

So we can say module that exports equal to our router.

And now whatever we require this file, we can actually read in this router.

So if we go into our server weaken, just require our router by coming up here and saying const.

Article router is equal to require and we just want to put in here dot slash That's going to be a relative path.

So we're gonna go inside of our roots folder and then we're gonna get articles dot Js out of there.

So now we have our article router, which we created in this file, and now we have access to it in our server dot Js and what we can do is we can tell our app to use that router so we can say ap dot use, and we want to pass in our article router.

But we also need to tell our article router where it's going to be based on, because if we look over here, we click.

Read more, you'll notice in the Your Ellis says slash articles.

When we click edit, it says slash articles, everything has slash articles in front of it.

So we need to say is we want our article router to be at slash articles like this, and now what's going to happen is every single route we create in this article.

Router is going to be added to the end of slash articles.

So if we come in here and we say router dot get and which is just gonna be at a slash and we want to pass it in our request hoops request and a response And for now, we'll just say rez dot send in particles.

You may think if we just go to our slash route, it's going to render in articles.

But if we go over here and do our slash route, it's still rendering.

This is the HTML from here, and that's because everything is added to the end of slash articles.

So we need to go to slash articles.

And then if we get the route at slash articles, just the index route, it's going to render out in articles.

So everything in here is going to be relative to that path.

If we say test here, for example, we wanted to do slash articles, slash test and if we say this refresh over here, you can see that that now was showing up properly.

So just remember everything in this is gonna be based on this slash articles route so we just need to know that we don't need to include that here.

Now, before we start diving into a bunch of really complex routes for article, I first want to get our main index route finished out this route right here.

So in order to do that inside of our server were already rendering our index.

We want to build a pass all of our articles to this index.

Because if we come over here and we look, we have all over different articles on this main index page.

So in order to do that, we can just pass an object to our render and we'll say articles and we're gonna pass it articles.

And what we do here is we just pass any object we want with any keys, any values, and this is going to be available in our index, not E J s.

So we can actually render out that article so I could actually change this here instead of rendering article, we're just gonna render something called text.

So you just need to use the less than symbol and then a percent symbol and then the equal sign, and this allows us to output a variable.

So this is going to be a JavaScript variable from know Js that we output and we're just gonna call it text now in our server, let's just put text is equal to Hello.

Now, if we refresh, you can see the text.

Hello?

Is being printed our screen because we're passing it from our server into this E.

J s.

And this nice little brackets in text allows us to actually output that to our screen.

So now, instead of passing just simple text what's actually passed our articles and for now, we don't have any articles.

So let's just create a variable called articles and we're gonna set this to an array with one object in it, and we're gonna create our own article to start with.

So now let's go look at our block and see what we need.

We need to have a title, a date.

So the date that we created this at as well with some form of description for eat one of our different articles.

So we know that we want to have our title.

We're gonna call this test article.

We're gonna have a date that we created this article ad.

So we're gonna say, created it and we just set that to date dot Now that's the current date, and then we're also going to need to have a description.

He's gonna set this to test description.

So now we can pass these articles to our view.

And now, instead of our index that E.

J s, we're gonna have access to a variable which is called articles just like this, so we can actually generate over these articles and do whatever we want with them.

So now the next step is going to be to create our index page.

So it looks just like the index page that we have over here.

And in order to get all of these nice styles that we have, we're gonna import a library called Bootstrap.

If you just type in, get to bootstrap dot com.

You're gonna be able to find this link that just have it on their website.

You can copy this over and it's gonna give us access to bootstrap, which allows us to style everything really nice and really easy.

The next thing that we're gonna want to do is create a div.

And inside this day if we're just gonna have a class which is gonna be called container.

This is a bootstrap class which will allow us to have this nice little padding around everything in our application.

Next, we're gonna have an H one.

This is just gonna say blawg articles just like that.

And in order to give it space between this text and our button down here, we could just give this a class, which is margin bottom of four.

This is just gonna give us a little space on the bottom.

Next, we're gonna have that link which goes to new article.

For now, we don't actually have a new article page, but that will be at articles.

Slash Knew when we do created.

So we could just type in that a treff.

And we also need to give this a class of button and buttons success that will give us that green color button.

And we could just type the text new article just like that.

Now, if we save refresh over here, you can see we get our blogger articles as well as our new article button.

When we click it, it obviously doesn't work because we don't have that route created yet, but we will get to that later.

Now, the next thing to work on is each one of these cards for article.

So in order to go through each one of our articles, we can actually use this same less than 10% symbol.