Build News Website With Node.js, Express & EJS - WP Rest API

welcome to another video my name is radi and you're watching my channel riley the brand today we're going to do a slightly bigger project using node.js express and ejs we're going to be building a simple news website where the data comes from an external api the main features of this project will include displaying the main features of this project will include listing the articles having a full view of a specific article and also we will add a search functionality i tried using the news api.org website support the news data for the articles but the information wasn't good enough so i decided to use my blog which is building wordpress and it has rest api built in by default saying this feel free to use whatever api you like the only difference is going to be the urls the parameters and the object names i think i can't express how easy is to get started please we won't be doing much css in this project as we are mainly focusing on building the functionality as always the code will be available on my website please smash the like button consider subscribing to my channel and let's go [Music] welcome everybody let's get started first of all i have already created a project folder called node.js news website recording and this is where i will be initializing the project so if you're in windows you can do left shift right click open powershell window here and if your mac you're gonna have to be using the terminal i assume and we have to do a cd to your project folder once you're here let's initialize a new project by doing npm init and this will ask us a couple of questions the only question that i'm going to answer is the package name this is basically the name of our project so i'm just going to call mine nodejs news for the rest i'm just going to be pressing enter to save us some time and once we're done this is this will ask us is this okay and i'll just press enter again and this should create the package.json file for us in our project folder as you can see in here for this project i will be using visual studio code but of course feel free to use whatever code you prefer with visual studio code you can usually do code space column and press enter and this will open the project for you which will save us a little bit of time but if you're not using visual studio code just go to your code editor file open uh project and continue from there now that we are here let's open the package.json file and quickly have a look at it as you can see we have a few things here like the name the version the things that we just created but before we start programming we need to add a few dependencies the dependencies that we need to add are axios body parser ejs and express let's have a look at how we can do that in powershell for me here i can just clear everything for a second and let's start installing all the packages now we can do npm install and we can start listing the packages that we need the first one is axios the second one that we need is the body parser then we need the ejs templating engine and last but not least we need express press enter once you're done and this should install all the dependencies for us and if you go back to visual studio code you will see the dependencies being added here in our package.json file now the last thing that i want to do in this file is to add nodemon nodemon will basically restart the server for us every time we make a change in our project so that's quite useful and let's have a look at how we can add to add nodemon we need to add it as development dependency so to do this we can do npm install dash dash save dev and then we can do nodemon this should take a couple of seconds as well and once this is done we can go back to package.json and as you can see in here we have def dependencies node 1. make sure that our project starts with no mon we actually first of all gonna have to create our main file of our application and i usually call this app.js so let's create a new file called app.js in our root folder and let's make sure that this app.js file is run with nodemon to do this under scripts in our package.json file we can do start column and then we can do norman space app.js then we need to finish this with a comma save this and we can close the package.json file now and start writing our application to get started the first few things that we need to do is include express and make sure that all express starts on a specific port number that we will want in a second the first thing that we need to do here is setup or expresser to do this let's include express by doing const express equals require and this will require and we need to require express inside here just like so then we need to make sure that we run express so we can do comms up equals express and we need to set a port number so we can do const port equals 5000 and last but not least we need to make sure that our app is listening on this port to do this we can do let's comment it here listen on port 5000 just like so and we can do app.listen and then pass the ports number which is 5000 here we just pass the variable comma and we're gonna have an arrow function in here so we can do it like this and for the arrow function all i want to do is i want to console.log listening on port number so to do this let's do console dot and with the single slanted brackets we can do listening on port and we can pass the port number with the dollar sign and curly brackets and then port the pause variable from here save this and technically speaking if we run the project now from powershell we can do npm start and if everything is working we should be getting this green line here saying starting nodeup.js listening on port 5000. this is a good so far but of course if we go to the browser right now and we try to visit localhost on port 5000 you will see that we're getting this cannot get and we will get to all of this in a second but we're going to have to set up our project folders first setup or views routes shows css and so on before we do that so no so let's not rush anything let's set up a project and do everything one by one before we do any more code in our lab.js file let's actually start looking at the project folder and then we will be doing things one by one so it all makes sense so first of all let's start by creating a public folder and this is where we can store things such as css images any other external javascript that you might use hopefully we won't have to but just for example i'm going to create three folders so let's say we have a css folder we have images folder we have a javascript folder of course i probably won't be using the javascript and the images but it's just good to have just in case you want to add your logo or some or you want to make your website look a lot better then i will now for the css i'm definitely going to have some css so let's create an scss file and i'm going to call mine styles dot scss i like using stss just because of the nesting but of course you can just use normal css if you wish to and in visual studio code i am using the extension called live size compiler which will compile the scss into a normal css so let's do that let's watch for scss changes and as you can see this compiled my styles.scss into a css file let's close the css because we're done with this as i said we're not going to have any images or javascript but just for the example let's leave them in here and let's now create a source folder which will be structured in here in the root so we can do source and inside the source folder we'll have things such as the routes views partials and so on so let's create the first folder which will be all views and let's create another folder which will be our route and inside the views let's create another folder which will be partials now everything will make sense once we start creating the code for this so don't worry the first thing that we might want to do is to create a view and because we are kind of like creating a news app let's create a file called news dot ejs we will be using ejs for or view engine let's now create a route file and i'm going to create the raw file with exactly the same name as the news but let's do news.js and the reason for this is because i think the views as kind of like or html and think the routes the news.js file as the functionality of the news ejs file if that makes sense so inside here we can actually start writing or html just like so and let's add titles so for example node.js news and we can actually include a stylesheet so we can do link dot css and now inside here you might see that we're going to have a little problem in order for me to go to the public folder css and then add my styles.css file it's gonna take a little bit of work so we're gonna have to go backwards then we're gonna have to go inside the public css and this could be a little bit of a pain and this is where we're going to be using the static files which i will show you in a second so what i want to actually achieve is i want to make sure that every time we put something like slash css i want this to correspond to this folder and if for example we added an image with the source i wanted to i want to be able to do slash img and then the actual image so i don't know cat dot jpeg and i want this to be going inside public images and then cut.jpg to be able to do this we're gonna have to do this inside the app.js and in a moment we'll have a look at the routes as well so let's go back and let's set all static files let's comment here everything will make sense as we are going through so don't worry i know at the moment we haven't seen anything working yet but as long as you go into your powershell and you're not seeing any errors we should be good to go minimize this and continue so let's set up our static files to set up the static files we can actually use express static so to do this let's do app.use express dot static and then we need to pass the public folder this folder here so in order to be able to use the slash css slash images or slash js we need to do the following we need to do app.use and we need to then pass the folder that we want to the path that we want to use so for example css and then we need to actually tell express static where this css folder is so we can do express dot static and now we can go to the root folder by using the do name functionality the name is basically a middleware function to save files from within a given root directory so basically i want to go to the root directory of this project with their name and then i want to add public which is the public folder here and then slash css just like so and hopefully this will now allow us to write if we go back here hopefully this will allow us to write slash css and then my file is actually called styles with an s at the end dot css and hopefully this should now work but also i want to add images and js just so you have it as an example to do this i'm going to use alt shift and down arrow to copy this line twice and i'm going to change this to images like so and i'm going to change this to js javascript the next important bit that we need to do is make sure that we have all templating engine set to ejs as you can see here ejs earlier when we started this project we did add ejs if you remember so we can start using this straight away by doing the following commands so inside here let's do templating engine and to include the templating engine and the views we can first of all but before i add ejs i want to make sure that our view engine view path is actually set to this vs folder and to do this we can do app.set views and then i can do comma and inside single quotes i can do dot slash source which is the source folder here and then slash views and then we can set the view engine to be ejs by doing app dot set view engine and then comma ejs if you wish to use something else all you have to do is change the view engine name from here so you can use something like perk handlebars or whatever you wish now that we are done with the templating engine we actually need to set or out and the route that we want to use now let's do this inside here and i know that we still haven't seen anything working on the page but bear with me we need to set up all of this and we are getting close we are getting very very close so let's set up the route for the routes first of all i want to create a variable which will go to the routes folder and select this news router for it to do this let's do a const and i'm going to call my router news router and this will be equals required and then we need to pass the folder which will be dot source slash routes slash news and we don't actually have to specify.js express is clever enough to do this for us now we need to make sure that our front page is using this router to do this we can do app dot use and or from page will be basically just slash so if you go back to the url you will see that we just have the domain name which is the moment like host with the port number and we just have basically slash and this will be your home page and we want our home page to be using this news router to do this we can do comma and then pass the news router which we just created here and later on by the way i will show you how to create more routes so you can create more pages and so on in fact we probably need to create one more anyway but we will do that when we need it so you don't get confused so far so good we can actually close pretty much everything now um maybe go to news ejs inside the views and let's just output something like h1 new node dot js news just like this and now we can start writing all router for the router there is a few things that we need to do and let's first of all include express again express equals require express just like we did in our app.js and also let's um use the express router so we can do cons let's call this one news router equals require sorry this will be equals express dot writer just like this and a very important thing that we need to do is export this module we need to do module dot exports and we need to export the newswriter just like so don't forget this line is important for uh for this to work technically speaking we should be able to now use this router and let's see if we can actually render the news.ejs to do this let's use the news router now newswriter dot get method i'm not going to pass any parameters in here we're just going to do comma this will be an asynchronous function so we can do async and we're going to have the request and the response and this will be a narrow function just like so so technically speaking now we should be able to render our news page to do this we can do resp response dot render and then we want to render this news uh ejs page and to do this we can just do news and in fact yeah we're not gonna pass anything so hopefully this actually works let's save this and finally we should be getting if we go back to the powershell uh let's press a button maybe c everything seems to be working um let's make sure everything is saved uh yeah everything the nodemon just restarted i believe so hopefully speaking if you go back to the browser and go to localhost with the port 5000 and we press enter we should be able to render the the news dot ejs page which will output node.js into an h1 and if we inspect the source of this control and u you will see that we have the html page which we added in here so that's pretty awesome we have all routes working we can create more and so on okay we've actually managed this so much so quickly and now is the interesting part for the next part you can use any api that you wish originally i wanted to use this news api which is kind of like one of the popular news apis or you could use bing as well but the reason that i didn't end up using it is because it doesn't provide very much information it's a little bit um most of the images are broken and it just doesn't look pretty and also the i think that the only way you could really use this information is that if you just list news and directly link those news to the real articles as you can see the content is very short it's nice and fast for for learning purposes but i don't know if i would use this in a normal project maybe the paid version has more content i don't know but feel free to use this it would be feel free to use this it would be very similar to what i would be doing anyway i decided to actually use my my wordpress website which i know that is not going to be like a news website but it's the same principle we have headlines we have content we have images and so on and the reason i wanted to use this is because the wordpress has built rest api which provides so much information and it's a lot more fun to work with the wordpress rest api you can simply go to a wordpress website unless they've blocked it and you can do wp json then wp slash v2 and then for example you can do the different eight point end point but for example you can do post slash and this should bring all the posts or at least a few posts uh from my website as you can see we have so much more information that we can work with i know that some of the articles like the information is actually rendered with like html but this could be actually a good thing in a way just because all articles will look a little bit better than they would if it was just a plain text to help us out i'm actually going to be using a tool called postman uh which you can install on mac linux and windows and postman is basically really handy if you want to like organize a collections of api calls i have my node.js news here organized and for example just the thing that i just showed you i have for example let's remove this i have the my website wp json wp v2 post and i can use anything like the get method the post method and so on to test stuff and if i send this you will see the output it's a lot like i'll taste a lot prettier a lot easier to read and we can do all sorts of stuff with this um and we'll probably you can do this in the browser as well or you can use it in here i just like saving some of the routes it makes it a little bit easier and some of the rights that we'll be using is posts we have individual posts here with an id we have a search regardless of search photoshop and so on so let's send this and see the information that we get by the way this is my website this link will be available in the description below but if you have your own api if you wish to use the news api feel free to do that this will be much faster than mine because my hosting is a little bit slow and to be fair if too many of you using mine my server my crash you never know so yeah if you have your own wordpress website feel free to use yours or feel free to use this news api or you can use anything like twitter medium bing news or whatever enough talking let's continue by pulling up some data now if you remember if you open package.json we install this dependency called axios and this is basically going to help us to fetch the data from my block to use this we can simply go to the news router open this and we can include it in here so let's do const axus and then we can require by doing axiorys inside here like so now to use accuracy it's actually fairly simple and fairly powerful and axios help us with a bunch of stuff such as error handling it makes sure that the data is passed in a json file and so on but let's have a look at how we can use it so we're actually going to comment this out for now because we won't need it and let's start first of all i want to wrap everything into a try and catch just in case we have any errors this will be very handy so let's do try catch inside try let's pass or url that we're going to be getting the data from so in this case i'm going to be passing uh write the code okay wp json wp v2 posts so let's copy this and we can do the cons and let's say muse api is equals we can do a weight which will be asynchronous asynchronous and we can do ax use dot get and then we can pass the url just like so and the reason i'm putting it into the slack slanted single quotes is just in case we need to pass any data later on inside here with the dollar sign and the curly brackets so for now we won't be doing this now that we get the data from this euro it's actually super easy to do we can literally access this data by doing news news api and then dot data and this will grab this object for us here to prove to show you that this is working what we can do is we could potentially console.log this so let's do console the log and inside the console.log let's do news api dot data and let's save this hopefully we're not going to get any errors now but if we go to a page and refresh you will see that we are getting this massive array which is pretty much this everything that came up from postman and this is awesome it means that we can access this object now and start pulling some of the data before we do that though we need to make sure that we have something in place for the errors so for the errors let's do error to be shorter and inside here we can do if response if error dot response then we can handle this in a couple of ways we can do console.log error dot response dot data we can also do response status we can also do response headers and so on and also we can have else if we can have error dot request and this will basically handle requests that were made by the server and return no response so we can maybe do console.log.log and we can have error dot requests copy this like so and then we're gonna have else if something is wrong with the request then we can do console dot error and we can pass error slash error dot message more information on axios just go to the npm package and they have a bunch of other examples that you can do but this is fairly solid example and we should be good to go in here to start using it we do have to do a couple of more things but we will get to that in a second if you want to render this data on or news.ejs what we have to do is do the same thing that we didn't hear but passed some data so let's copy this in fact let's remove it and we can render it in here so try to get the data and then render the data in here so i'm going to actually remove the console log because we won't need it anymore and we can do rest.render news news is the ejs page that we want to render and we want to pass the object that we want to render and we need to pass this data here to do this we can do comma and then inside curly brackets we can pass it as articles for example so because we are pulling articles let's name it articles then the data that we are getting from uh this so we can do a news api like so dot data so hopefully these articles will be holding all the data and now we have to loop through this using ejs and output some of the articles on our page let's have a look at how we can do this and by the way i could have created a variable for this but i didn't think that it's necessary the code is fairly simple here so let's just use it as it is so let's save this and have a look at how we can actually loop through this for this article's object let's tidy this up as well like this and type let's go to the views news dot ejs and let's have a look at how we can loop through the articles so what i want to render for example this is a one object one big object so i can go inside here and i can start rendering some of those details for example i want to render the title and inside the title we're going to have to render this rendered title so let's just remember this and let's go back and make sure that we leave for them we can actually write javascript in ejs and the way it works is we can open ejs by doing arrow and percentage and we can close ejs by doing another percentage and the closing error so inside here we're gonna have to do a for each so we can loop through these article objects so let's copy this paste the articles dot for each and then this will be a function which will take two parameters first one will be article um and this will be basically the key for looping through each object and then we can actually also have index as well if you wish to so we know every time we leave for an item we can give it an index so 0 1 2 3 4 5 but i probably won't be using this in this example and then we need to actually cut this bracket open curly brackets and let's make sure that we close everything before we do anything else so open ejs close ejs curly bracket close curly bracket is curly bracket and close normal bracket we should be good to go and now i want to loop through the articles and inside articles i want to render for example the title and inside the title we have rendered so remember this some of them we can just render straight away but this one the title has a rendered object inside it so what we have to do is we can do the article dot title dot rendered and save actually this needs to be inside ejs as well so let's open djs like so and put dash on this one because we'll be rendering text and let's close ejs save this and let's have a look at what we get if we refresh the page you should be able to see a lot of titles obviously at the moment we don't have any styles but as long as you're getting the data this is really good what i want to do next is spend 2-3 minutes doing the css the video will be sectioned so you can actually skip this section if you're not interested at doing the css so let's quickly super quickly style uh something so let's make our website look a little bit better now this section is all about the css first of all let's create a header for a website and this header will actually have a class of header and inside here i'm thinking of adding a like a logo and maybe the search bar so for the logo we can do diff with the class name of header and just go underscore later and i'm not actually going to have a logo but let's just do node.js news and let's add or search that i hope that you can hear the noise from the outside uh for the search bar let's do a form for the search bar let's do another div with the class name of header underscore underscore search and this is where at the end we'll be creating our search bar but for now let's just put search like so and save okay now that we have the header let's save and see what we get we have the node.js header we have the search let's add a few more elements to style or wrapper and then we'll jump to the css for the wrapper i'm just going to keep this super simple so let's do a class name of wrapper and i'm going to wrap all my articles inside this wrapper just like so and then for the news what i'm thinking of doing is i'm just gonna have another class name of news just to make it look a little bit different and i'm going to wrap i'm going to wrap this inside news just like so so the wrapper will be global but this news will be maybe just specific to this page we'll see and then for each article i actually want to make sure that each article is kind of like a card so what i can do is let's do another class name of news and just go underscore card and do that and let's wrap the content inside it just like so it will make sense in a minute and actually i want all the cards to be links so instead of a div let's do this as a link and i'm gonna have to do href now and maybe for now let's leave this with a hashtag just so we don't have broken links and we can style it and then we'll come back to all of it i think this is looking good so we only have the title let's render this into maybe like an h3 tag let's say let's do let's render some text so can we do lorem ipsum yes okay so we can do a lot of mipsum in here and toggle will wrap just for example of course we're gonna get the original text from the api later and maybe you will have a thumbnail as well but we'll do that a little bit later so let's save this and let's see how this looks like it's probably not going to be pretty but okay we have all the titles and so on let's uh make sure that we style them super quickly and i'm actually going to do all the styling right now all together so let's get on that i'm going to also i'm going to keep this super basic and before we start doing anything else i'm going to include a font from google and this font is called the source sans pro so we can find you can find this on google fonts and let's include that and continue save this and let's jump to styles.scss i'm just going to do very basic styling for this and i will be super quick so let's get going so for the body we're going to reset the margin we're pressing my g0 let's do the font family to the font that i just included which is source suns pro let's do sans serif then let's make sure that our background color is not white because i want to make the cut to white so let's do something greyish like f6 f6 f6 i probably have six f6 would i this will do let's save this let's go back have a look okay so for the images i'm just gonna make them kind of responsive so we can do max with let's do a hundred percent for the headings let's make sure that the font size is like slightly smaller than the default one so font size this will be 1.6 ram so then we're not gonna have a button because the articles will be kind of like cards uh so let's not do that let's start the header now so we have a class of header and inside the header let's because we have two divs if you remember we have the div with the logo and the search what we can do is display this as flex justify the content so they are spaced between so they're like to the left and the right then align the items to center then we can do padding of 10 pixels then we can do the color to be kind of like white and then let's add the background color to make it more interesting to a nice green color that i've been using lately and let's add a little bit of margin for the so the header pushes the content below so margin bottom 10 pixels and save okay for the logo i'm actually not going to do anything for this so let's just start the search for now and i've already prepared the search so i'm going to copy and paste it to save us some time so basically i'm going to have two inputs one for the text and one for the submit button and they just have some padding and i've removed the border that's pretty much it so i don't want to waste any time on this for the actual wrapper of the page which is this one i actually just want to push the content from the sides here so we have a little bit of padding let's do that now we can do this by just doing wrapper i'm just going to do padding of zero one rem which means that we're gonna have padding zero top and bottom and one ram left and right and that's pretty much it so now all the news for this for the news part you can indent as well if you like uh let's do dot news um we can display this as grid to save a little bit of time so let's do display grid and i can do great template columns and i can use the repeater and then let's say autofill to make it kind of responsive in a min sorry min max will be 360 pixels minimum for each card and one fraction of the screen maximum for each card that's good also let's give it a little bit of gap between each card so we can do great dash gap and that could be to ram it doesn't matter then for the cards let's just make them look slightly better than they are now so we can do cards on inside here we can do text decoration and then because i actually wrapped the cards actually links so they are going to be underlined so let's do text decoration and then we can set up some sort of a color i don't know um let's do kind of i kind of want a black color but i want it i don't want it to be too black let's do something like this this this will do rgb88 that would be fine and then the background color i want to set as white and i want to have each card to have a little bit of padding so they have some space breathing space and last but not least i've prepared some drop shadow on hover for the cards so let's do and hover and add the box shadow in here and that's pretty much done for this page so we can close this refresh and let's have a look yet okay this is much much better of course we don't have any of the images and we don't have any of the real text so let's have a look at how we can bring the images and how we can bring the text as you can also see we have the title here looking nice and the search will handle the search a little bit later on in this tutorial let's bring the data to bring the data if you remember we done article titled the rendut and this was taken from this main object so we have titled rendered okay so we've rendered the title but uh instead of rendering the whole content here of the article who i want to render is the excerpt and then render it so let's do that we can do this by copying this line here in fact and pasting it inside the p tag let's have a look let's remove everything and and paste it inside here so instead of article title we're gonna have to do article excerpt this is again rendered so let's save this go back to the browser refresh and as you can see all the text is now rendered this is exactly the same text as if you were to go to my website in this quick tutorial in this quick tutorial and this is awesome let's have a look at how we can render the picture now of the article and for the picture for the image actually done a little bit of modification to my wordpress so we can output it in here so if i scroll down we can find the thumbnail url in here so let's use that as well and i will show you another trick in a second so for the image i am actually thinking of just adding it in here so img source and we need to pass the source just with ejs like this dash article dot thumbnail underscore url and let's close ejs and let's close the image as well um but we are probably going to need a north attack as well i don't know what to use for the old tag maybe we can just use the title rendered like so and save let's go back refresh and as you can see some of the images are probably too big that's why they it a little bit slower but as you can see we're now getting the images which is pretty awesome uh title and everything is looking good now if something happened to this api and it didn't work let's say we made inside routes let's say we made the spelling mistakes spelling mistakes so i'm gonna put two uh let's refresh the page let's see what happens as you might notice now we're probably gonna get an error as you can see we're getting an error here and uh our website is just spinning and nothing is happening so let me show you how we can actually handle this so what we could do potentially if we get an error we could copy this paste it in here so we still want to render the page but maybe we want to say articles this time we don't have anything articles so we can say articles equals no and if articles is equals new we can check with ejs so we're going to have to do an if statement inside here so let's start djs just like so um sorry it's gonna be if articles is not equals no just like so then then we want to proceed and display all the data but if article is equals no then we're gonna have to do somewhere around here we're gonna have to do all if statement else did i close this so i need to close this with a curly bracket as well don't forget and we can do else close let's open egs and close the curly bracket just like normal javascript and inside here we can put some message saying no posts found or something like that of course you can style this to look a lot better than you would right now but hopefully speaking if we save this and if we go back and refresh thing is spinning but let's i think we've broken here let's have a look maybe we need to cut it they're not found that's good uh hopefully let's start this again hopefully if i now the problem here is that uh if i go and refresh now i don't know what the error is the error could be inside here or the arrow could be inside here that the what was there the error was that uh right okay okay wasn't found so the error could technically be inside here so what i could do is technically copy this um we still want to render the or message so let's copy this three times save it and let's go back to the browser and refresh so as you can see now because we're getting this error here uh we are actually checking with ejs if article is new and then we are rendering no post found so instead of so instead of all page spinning we actually have something in place for the error the next thing that we want to do obviously let's first of all fix the api call here so i'm going to remove the two and save let's go back and have a look where everything is working and that's fine now the next thing we can do is create a new router so when we click on one of those articles we can actually view the full information of the article to do this first of all let's have a look at how the wordpress json api works if we go back the way it works is every articles has a unique id and we can actually query each article with this unique id so if we copy this id this has a title of node.js puppeteer so let me find the correct one and so for example inside here we have posts and then we're passing an id so for pass the id dodge is copied and get the request you will see that we only get in one object and this object is the one that we need which is the node.js puppeteer so this is how we can actually use this id parameter for the link and get the correct data let's have a look at how we can do this first of all let's make sure that our link has this id so what we can do is inside here we can open ejs open egs close ejs and we can do article dot id as you saw article.id here we want to grab that but also i want to create we could potentially render the full article in here but i want to show you how we can do another route so what we can do is let's call this route article for example so we can do slash article so this will be the full article and if we save go back to the page and if you hover over here at the bottom we're not getting the id so oh okay we're not getting the id because i forgot the dash in here so let's save this and now if we refresh again and hover over one of them if you see here at the bottom we're getting different ids for each article which is brilliant and so if i was to click in this you will see that we are getting article with this 5372 and now we just need to create this number with the wordpress api which i will show you in a second by doing this basically and get the information all right let's have a look at how we can use this id now to actually query the data and display the full article now we could potentially create a different route for a single page but i was thinking that it might be best just to keep all the news functionalities inside this route so it's up to you whether you want to split them maybe if it becomes maybe if your project becomes too big you could split the rouse into route single and route search and so on but for now i'm just going to use one and show you how we can do this so luckily for us there is not much uh that we have to do we can literally copy this we can paste it in here and all we have to do is this time instead of uh just get nothing i want to add i want to get this id from here to do this we can use the body parser to pass data from one page to another just like we're doing so right now so let's go back to app.js and let's include the body parser to include the body parcel we can do this under here under the express so let's do cons body parser and this will be equals require and we need to require the body parser body body dash parser just like so and we need to add one more line to use the body parser euro encoded so we can do this somewhere here below our engine and if you want to have a look at the body parts in more details there's so many options but for this example the euro encoded is probably the best one to use i guess so let's use that app dot use body passer dot url encoded and then we need to do extend it extend it and this is equals to true just like so and we should be good to go technically speaking we should be able to get the data now by using the body path let's close up dot js and go back and now to get the id from this all we have to do is slash column id and now we can actually get the id by doing for example let let's make it a little bit more clear we can do article id id equals request dot params dot id and technically speaking technically speaking if i console log this this should give us the id that we're passing but there is no point so what we have to do now is get this number inside get this number that we've passed and just include it inside here with the dollar sign curly brackets and pass article id so technically speaking that's all good but i actually want to make and i could render this in the news page but let me actually show you how we can render this in another page maybe you want the page to look slightly different yeah let me show you how we can render this in another page that can be totally different let's create a new page let's create a new page called news single dot ejs and put the new single we can actually copy all of this and paste it in here we'll do some modifications in a second and let's finish the rest of the steps so so we need to change this to be news single and let's just quickly copy and paste and instead of articles let's make sure that this is now this object is called article just because we're only going to have one article i think it makes more sense and you'll see why in a second and if we go back now to new single instead of looping because we don't have an object instead of looping through uh object we can actually do something else maybe let's remove pretty much yeah let's remove everything let's remove everything instead of and just make sure that let's remove the image as well and just make sure that this is actually still says article just because this is basically equals uh this here so let's save this and also i'm going to change this to news single and let's add a little bit of css to make it a little bit better news single we can do background color ffff max width let's say one three zero pixels it doesn't matter too much uh margin we can set to zero auto and let's just add some padding everywhere and i would do let's close this and the last thing that we need to do is set kind of like a url for this page and to do this we can go back to app.js and install here when we have this is the front page technically speaking so we can copy this and we want to have an article one now and we can still use the same news router as we used above here just because they are all in the same page and technically speaking if we save everything go back uh refresh and if we click on one of the links you will see that we are getting node.js express cgs layout and we are getting some of the content um let me click on another one and now let's start populating this with a little bit more data so instead of let's have a look at what we have instead of the excerpt we probably want to use the contents rendit let's copy this and change the article excerpt to content rendered and i'm actually going to skip the image i don't really want the image and one thing that i notice is that we could we could potentially have a link back to the homepage and i'm just going to be a little bit lazy with this so i'm just going to create a link here href uh with just slash and then we can just say and lr which is like an arrow in html and just do dash back okay let's save this let's have a look at how this looks okay as you can see we have the link back i'm not going to style this it's no point uh we have the title we have the content which is actually rendered with all the html that comes from wordpress it's looking nice of course we can do it a bit more styling like some of the buttons and something like that and stuff like that but for this tutorial doesn't matter too much because we're mainly focusing on how we can do this so let's click back and have a look at another article so maybe we want this express egs layout article as you can see this is all rendering nicely and so on okay the last thing that we need to do is the search as you might have guessed the search is going to be very similar but instead of getting data like here and here we need to post data and the posting data we can do very similar to this but first of all let's explore how we can do that with the wordpress api now to search with data let's have a look at which one it was to search for data with wordpress you can actually do post question mark search equals and then the thing that you need to search for so let's make a note of this first of all and paste it inside here and i'm going to keep everything to do with news in the same router of course as i said you can split it into different writers if you wish to so for the news is going to be very very similar let's copy this and paste it and now there are a few things that we need to do first of all we need to change the url so we need to change this let's remove that we need to pass the parameter inside here but before we do that we need to post that parameter so instead of get let's do post now let's make sure that this is now empty and to pose a parameter first of all we need to actually create the form give or input a name so let's first of all do that and i can actually do that in new so let's do a news and let's do it here and then i'll move later on so for the form i'm going to actually just copy and paste the form to save us some time but the most important bit here is that you have a form with an action or slash and then the method must be post and also inside here the important bit is that for the input we have the name of search which we're going to use right now and the input submit just has a value of search that doesn't really matter too much so the most important bit here is the action method of post and the name for the input of search so let's save this and have a look at how it looks like if you can see here we have the search bar and we have the search button it doesn't look too pretty but it will do the job to get the search parameter we can now use the name to let's actually close everything that we don't use and now we need to get the search parameter and we can do the same thing as we then in here we got the id from here but instead of id let's do body and let's do search and instead of article id let's change this to something like search and let's pass the search variable inside here parameter so we can do dollar sign curly bracket and inside here we pass search to render the results let's do another page so let's actually copy the news ejs everything from here let's do news search dot ejs and let's paste everything inside here and because we'll be looping through multiple because we'll be looping through object with a lot of data we can leave the forage object in here and we just need to make sure that we have instead of article we have articles articles articles and articles now that we've created the new search page the last thing that i supported is that we didn't change the render to news search so let's do that quickly and save hopefully if you go back refresh and if we search for something that i might have on my blog for example photoshop let's click search you will see that i'm getting two articles for photoshop because we copied the stuff from the news page we actually still have the links in here as you can see and i should be able to click on them and this should lead me to the arc the actual article so if i look on this one this will lead me to the article and so on so let's search for node this comes up with more articles i can click on them and they pop up and so on the last thing that i wanted to show you is that we could potentially use the partials for the search so instead of duplicating the search a few times in here so where is it so in this page we have this header search what i can do is cut this paste it into particles paste it into partial sorry new file dot ejs paste it inside here and we can actually include this file everywhere now by doing by opening ejs include dot partials search dot ejs and then make sure you close djs and hopefully that should bring the same stuff to the home page so the search should be still there if i click on another one obviously we don't get the search there so let's include it quickly i'll copy this paste it on this page here where is it where is where is it here and let's do that for the search page which is on for the single page as well so i can just paste it in here technically speaking now on all pages we should have the search let's search for javascript and this should bring all the posts that i have with javascript that's pretty much everything from this tutorial i hope that you found it useful please consider subscribing to my channel it will help me a lot smash the like button if you like the tutorial and if you find it useful and let me know in the comments below what you will be building next with node.js and also if you have any questions please let me know i will see you in the next one thank you very much for [Music] watching

Channel: RaddyTheBrand

Views: 37,362

Keywords: node js, node js tutorial, node.js crash course, node.js web application, node.js projects, axios, nodemon, news website, wp rest api, rest api, Newsapi, javascript, ejs, express, nodejs express, raddy, raddy the brand, raddythebrand, wordpress rest api, node js for beginners, nodejs get, nodejs post, nodejs pass id, express view engine, express ejs, axios fetch data, axios fetch api, nodejs nodemon, express router, express static files, nodejs project

Id: EkQc-8uzxIA

Length: 65min 21sec (3921 seconds)

Published: Fri Sep 18 2020