 Welcome to another video. My name is Roddy and you're watching my channel Roddy 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 to pull 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. Staying 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 it is to get started. Please note we won't be doing much CSS in this project as we're mainly focusing on building this 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. Welcome everybody. Let's get started. First of all I have already created a project folder called Node.js news website dash 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 you're Mac you're going to have to be using the terminal I assume and we have to do a CD to your project folder. Once you hear let's initialize a new project by doing npm in it 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 Node.js dash news. For the rest I'm just going to be pressing enter to save us some time and once we're done 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 editor 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 a 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, BodyPasser, 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 BodyPasser 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 it. To add Nodemon we need to add it as development dependency so to do this we can do npm install dash dash save dash def 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 Nodemon. To make sure that our project starts with Nodemon we actually first of all going to 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 read folder and let's make sure that this app.js file is run with Nodemon. To do this on the scripts in our package.json file we can do start, column and then we can do Nodemon, space app.js and 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 our express starts on a specific port number that we will add in a second. The first thing that we need to do here is set up our express. 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 const app equals express and we need to set a port number so we can do const port equals 5000 and to 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 here listen on port 5000 just like so and we can do app.listen and then pass the port number which is 5000 here we just pass the variable comma and we're going to 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.log and with the single slanted brackets we can do listening on port and we can pass the port number with dollar sign and curly brackets and then port the port 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 node app.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 gonna have to set up our project folders first set up our views routes power 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 app.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 our 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 um 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 than i will now for the css i'm definitely gonna have some css so let's create an scss file and i'm going to call mine styles.scss i like using scss just because of the nesting but of course you can just use normal css if you wish and in visual study code i'm using the extension called life size compiler which will compile the scss into normal css so let's do that let's watch with 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 gonna have any images or javascript but just for the example let's leave them in here and let's now create our 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 all routes 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.ejs where we'll be using ejs for our view engine let's now create a route file and i'm going to create the route file with exactly the same name as the news but let's do news.js and the reason for this is because 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 a title so for example note.js news and we can actually include our style sheet so we can do link.css and now inside here you might see that we're gonna 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 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 want it to i want to be able to do slash img and then the actual image so i don't know cut.jpeg and i want this to be going inside public images and then cut.jpeg 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 power shell and you're not seeing any errors we should be good to go minimize this and continue so let's set up all static files to set up the static files we can actually use express static so to do this let's do app.use express.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 slash css and then we need to actually tell express static where this css folder is so we can do express.static and now we can go to the root folder by using the dname functionality dname is basically a middleware function to serve files from within a given root directory so basically i want to go to the root directory of this project with dname 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 course 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 it 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 um but before i add ejs i want to make sure that our view engine view path is actually set to this views folder and to do this we can do app dot 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 bug handlebars or whatever you wish now that we are done with the templating engine we actually need to set our route 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 phrase 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 dot 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 news and our front 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 log 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 dot js and also let's use the express router so we can do const let's call this one news router equals require sorry this will be equals express dot router 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 news router just like so don't forget this line it's important for um 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 dot ejs to do this let's use the news router now news router dot get method i'm not gonna pass any parameters in here we're just gonna do comma this will be an asynchronous function so we can do async and we're gonna have the request and the response and this will be another function just like so so technically speaking now we should be able to render our news page to do this we can do rasp response dot render and then we want to render this news ejs page and to do this we can just do news and in fact yeah we're not gonna pass anything so hopefully this should actually work let's save this and finally we should be getting if we go back to the power shell let's press a button maybe see 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 locohost with the port 5000 and we press enter we should be able to render the the news dot ejs page which will output node dot js into an h1 and if we inspect the source of this control and you 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 to do 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 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 blocked it and you can do wp-json then wp-v2 and then for example you can do their different endpoint but for example you can do post slash and this should bring all the posts or at least a few posts 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 plain text to help us out i'm actually going to be using a tool called postman 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 no 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 slash 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 say it's a lot prettier a lot easier to read and we can do all sorts of stuff with this 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 routes that we'll be using these posts we have individual posts here with an id we have a search for example 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 are using mine now it's ever my crash you never know so yeah if you have your own world press website feel free to use yours or feel free to use this news api or you can use anything like twitter medium bank 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 blog 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 axios and then we can require by doing axios inside here like so now to use axios it's actually fairly simple and fairly powerful and axios help us with a bunch of stuff such as arrow handling it makes sure that the data is passed in the 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 want later 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 gonna be getting the data from so in this case i'm going to be passing uh write.co.uk wp.json wp.v2 posts so let's copy this and we can do a const and let's say news api is equals we can do await which will be asynchronous asynchronous and we can do axios.get and then we can pass the url just like so and the reason i'm putting it into the slug 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 url 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 are not gonna get any errors but if we go to a page and refresh you will see that we're 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 putting 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 auxius 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 dot ejs what we have to do is do the same thing that we did in here but past 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 gonna actually remove the console log because we won't need it anymore and we can do rest dot 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 an inside curly brackets we can pass it as articles for example so because we are pulling articles let's name it articles and then the data that we are getting from this so we can do news api 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 through this articles object let's tidy this up as well this and save let's go to the viewers 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 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 gonna have to render this render title so let's just remember this and let's go back and make sure that we loop through them we can actually write JavaScript in ejs and the way 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 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 loop through an item we can give it an index so zero one two three four five 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 brackets close curly brackets close 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 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 ejs 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 two three 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 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 our website and this header we will actually have a class of header and inside here I'm thinking of adding like a logo and maybe the search bar so for the logo we can do div with the class name of header underscore underscore logo and I'm not actually going to have a logo but let's just do node.js news and let's add our search bar I hope that you can hear the noise from the outside 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 going to 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 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 underscore 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 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 h2 tag let's say h2 let's render some text so can we do loram ipsum yes okay so we can do loram ipsum in here and toggle world wrap just for example of course we're gonna get the original text from the api later and maybe we'll 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 gonna be pretty but okay we have all the titles and so on let's 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 sands probe 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 gonna do very basic styling for this and I will be super quick so let's get going so for the body we're gonna reset the margin with pressing margin zero let's do the font family to the font that I just included which is source sands pro let's do sands serif then let's make sure that the background color is not white because I want to make the cuts to white so let's do something grayish like f6 f6 f6 probably f6 f6 I don't know 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 width let's do 100% photo 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 rem so then we're not gonna have a button because the articles will be kind of like cards 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 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 gonna 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 gonna 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 0 1 rem which means that we're gonna have padding 0 top and bottom and 1 rem left and right and that's pretty much it so now for the news for this for the news part can indent as well if you like uh let's do dot news and we can display this as great to save a little bit of time so let's do display grid and I can do grid template columns and I can use the repeater and then let's say autofill to make it kind of responsive and then min 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 grid dash gap and that could be to rem 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 the inside here we can do text decoration and then because I actually wrapped the cards are actually links so they are gonna be in the line 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 wanted I don't want it to be too black let's something like this this this will do RGB 8 hit 8 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 a large but not least I've prepared some drop shadow on hover for the cards so let's do hand 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 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 we 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 title of rendered and this was taken from this main object so we have title rendered okay so we've rendered the title but instead of rendering the whole content here of the article all 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 and this is again rendered so let's save this go back to 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 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 article dot thumbnail underscore URL and let's close ejs and let's close the image as well but we're probably going to need an old tag 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 the render is a little bit slower but as you can see we're now getting the images which is pretty awesome 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 spelling mistakes spelling mistakes so I'm going to put two let's refresh the page let's see what happens as you might notice now we're probably going to get an error as you can see we're getting an error here and 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 pasted in here so we still want to render the page but maybe we want to say articles this time we don't have anything in articles so we can say articles equals no and if article is equals new we can check with ejs so we're going to have to do an if statement inside here let's start ejs so sorry it's going to 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 going to have to do somewhere around here we're going to have to do all error statement else did I close this sorry I need to close this with a curly bracket as well don't forget and we can do else close let's open ejs 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 it would right now but hopefully speaking if we save this and if we go back and refresh I think it's spinning but let's I think we've broken it let's have a look maybe we need to cut it that's good hopefully let's start this again hopefully if I now the problem here is that if I go and refresh now I don't know what the error is the error could be inside here or the error could be inside here that the what was there the error was that write it okay wasn't found so the error could technically be inside here so what I could do is technically copy this and we still want to render the or message so let's copy this three times save it and let's go back to a browser and refresh so as you can see now because we're getting this error here we are actually checking with ejs if article is new and then we are rendering no posts 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 but 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 no js purpose here so let me find the correct one and so for example inside here we have posts and then we're passing an id so if I've passed the id digest 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 no js property so this is how we can actually use this id parameter for the link and get the correct date 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 ejs close ejs and we can do article dot id as you saw article dot id in 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 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 id's 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 five three seven two 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 routes into routes 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 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 just get nothing I want to add I want to get this id from here to do this we can use the body passer 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 passer to include the body passer we can do this under here under the express so let's do const body passer and this will be equals require and we need to require the body passer body body dash passer just like so and we need to add one more line to use the body passer euro encoded so we can do this somewhere here below our engine and if you want to have a look at the body pass 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.use body passer.url encoded and then we need to do 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 pass let's close app.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 a little bit more clear we can do article id id equals request dot params dot id and technically speaking technically speaking if I cancel like 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 for 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 stuff 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 gonna have one article I think it makes more sense and you'll see why in a second and if we go back now to news single instead of looping because we don't have an object instead of looping through an object we can actually do something else maybe let's remove pretty much yeah let's remove everything let's remove everything and 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 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 fff max width let's say one three zero pixels it doesn't matter too much margin we can set to zero auto and let's just add some padding everywhere and I will 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 inside 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 refresh and if we click on one of the links you will see that we are getting no js express js layout and we are getting some of the content 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 content rendered 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 potentially have a link back to the home page and I'm just going to be a little bit lazy with this so I'm just going to create a link here href with just a slash and then we can just say and l r r r which is like a narrow in html and just do dash back okay let's save this let's have a look how this looks okay as you can see we have the link back I'm not going to style this it's no point 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 ejs 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 a 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 with 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 routers 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 post the 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 news let's do in news and let's do in here and then I'll move it 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 of 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 in 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 did 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 brackets 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 for each object in here and we just need to make sure that we have instead of article we have articles articles articles articles articles now that we've created the news search page the last thing that I spotted 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 actual article so if I look on this one this will lead me to the article and so on so let's search for note 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 there into particles paste there into partial sorry new file .ejs paste it inside here and we can actually include this file everywhere now by doing by opening ejs include .partials slash search .ejs and then make sure you close the ejs and hopefully that should bring the same stuff to the homepage 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 it where is it here and let's do that for the search page which is for the single page as well so I can just paste it in here and 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 watching