Name: How To Build A Markdown Blog Using Node.js, Express, And MongoDB
Uploaded: 2020-03-28T16:36:20.000Z
Duration: 1 h 2 min 28 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...

Transition words & phrases

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.

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

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.

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.

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.

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.

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

And then our view engine is gonna convert that E.

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

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.

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.

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

Subtitles ListPlay Video

How To Build A Markdown Blog Using Node.js, Express, And MongoDB

essentially

access

properly

description