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

[@vandanauniyal2114]

Thankyou for such amazing projects. Have learned so many things from you.

[@surajshivan7758]

i tried with the news api. its working..............really awesome man......hats off to ur explaination

[@RaddyDev]

Glad to hear that! Thank you for letting me know 😋

[@puranjayyadav8061]

Woww dude. Really appreciate the work . Gonna add this to my project list

[@RaddyDev]

I appreciate the comment! Thank you

[@fluffymaverick]

The real OG of NodeJS RaddyTheBrand 🔥🔥🔥. Thanks for this.

[@RaddyDev]

Haha, thank you! Happy Halloween, Alvin!

[@InnovatePersonality]

It is interesting from start to end. Thumbs up

[@RaddyDev]

Thank you!

[@ntigirishari]

Woow!! Buddy, thank you :-) I am gonna add some bootstrap, use another API, and add some more styling and make it a project for my portfolio. Thanks again!

[@RaddyDev]

Sounds great! Feel free to share the link, it would be awesome to see what you come up with

[@ntigirishari]

@@RaddyDev of course!!😀

[@lazartutulic7577]

@@ntigirishari And wheres the link? ;P

[@twn_serenity]

Thank you so much for this exceptional video!! Subscribed and will be waiting for some good content in the future!

[@RaddyDev]

Thanks for watching and the sub, Wei-Ning!

[@konscomputertutorials7473]

Thanks for the quality tutorial it really healped

[@RaddyDev]

Glad to hear that!

[@NikhilDongre-lb5wu]

How can we deploy this on netlify or maybe on vercel ?

[@azsumusic]

I am happy to have found a well-explained and above all well-ordered tutorial in the routing and inclusion of js code in html phase. A big thanks!

[@RaddyDev]

Great to hear!

[@UsmanAhmed714]

Love...! specially for choosing this topic

[@girlingame518]

happy to learn from you , very thanks for this great tutorial

[@RaddyDev]

Thank you and I am glad that you found it useful 👊🦍

[@Gui.castro]

AWESOME! Thanks for this tutorial and all explanation!

[@RaddyDev]

Thank you, Guiherme!

[@TheMicpen]

Thank you very much for sharing !

[@RaddyDev]

No problem, I hope that you enjoyed it

[@coincoinfpv9503]

Super! That was a great tutorial! Thanks a lot :)

[@RaddyDev]

Thank you!

[@claarkkkm]

Well said tutorial, thank you! I hope you'll be big soon :)

[@RaddyDev]

Thank you! 🦍

[@enginb3818]

Appreciated, very brilliant project. I really love it thank you.

[@RaddyDev]

Glad that you liked it, Engin! Thank you!

[@TheNamesJT]

Can you make a 1 to 2 hour video on ejs, node, express and use local storage while also use api data? also would be really awesome if at the end of the video you would show how to deploy the site.

[@RaddyDev]

I will try to think of something. I need to see what free API's are out there available for everyone

[@emanueltejadacoste2250]

Amazing, this channel is going to bring a lot of content i know , i will share with mu friends !

[@RaddyDev]

That would be awesome! Thank you very much for watching and the comment!

[@tyrone12q]

I want instead of from website api, i want to get the data from a file in public folder or somewhere else.

[@RaddyDev]

The process would be the same. Just grab the file from your server instead. If it's a json file you could do something like mywebsite dot com/myfile.json

[@webtutorials4279]

Great Video Raddy! A small issue is that my view did not load until I changed './src/views' to './src/views/partials' at 17:40 on Line No.13. Can you let us know why yours loads up ?

[@RaddyDev]

On that screen the "news.ejs" file appears to look like it's inside the "partials" folder, but it's actually not. It's inside the "views" folder. I wounder if that could be it?

[@HomeEntertainment-f4y]

Thank you For posting such an informative video. i was able to create my own Web App with bare minimum knowledge of Node. the step by step instructions were very Helpful

[@prateekgowda7653]

Brilliant. Keep up the good work.

[@RaddyDev]

Thank you!

[@RaminS-v5w]

Awesome thank you

[@kunal7929]

Thank you buddy

[@hardikmistry1661]

great video sir nice content nicely explained every thing, that's it all I want

[@RaddyDev]

Glad that you found it helpful, Hardik. Thank you for watching!

[@GreenOnion854]

Can you implement a login/register/password reset features from there ? so you can add a fav section for articles. It will be huge !

[@RaddyDev]

The Login/Register and password reset is definitely something that I will be doing. I am just trying to do everything step by step and we'll get there soon. Fav section is a good idea actually. Thank you for watching and thanks for your comment!

[@GreenOnion854]

@@RaddyDev thanks to you. I'm trying to fetch an API from rapidAPI but it seems that it works in a different way. Quite confusing

[@RaddyDev]

I would assume that the names and the object trees are slightly different. You could console log the data and then start selecting the data that you need with the dot notation. If you are getting a JSON object it should be more or less the same

[@debasissaikia304]

Good content..need some more projects

[@RaddyDev]

Yeah I'll be adding a lot more. Thank you!

[@passionatebeast24]

Thank you so much.

[@RaddyDev]

Thanks for the comment!

[@feefiifoofum]

Hey Raddy! New subscriber here, love the content! Quick question, if I am using the newsAPI, how do I set up the search parameters in the routes folder? I know it should be q=${search} but i am having trouble in actually implementing the form input to change the parameter for every request.

[@RaddyDev]

Thanks for the sub! It won't be much different from the WordPress example. The only difference would be that you need to swap the API URL (obviously haha) and go into the articles object. You would need to render: res.render('newsSearch', { articles : newsAPI.data.articles }) And then update your newsSearch.ejs page to match the names. (example: urlToImage, title, description) I just added an example on the blog post ( Link is in the description ) - scroll to the bottom off the page and you will see it. It's getting a little messy, i need to tidy up the article one day. Thanks for the question and I hope that you stick around!

[@feefiifoofum]

@@RaddyDev i got it to work! Thank you so much for the quick response. I will definetly keep up to date with your tutorials, you make these concepts easy to grasp. Keep up the good work 👏

[@shubham_srt]

@@feefiifoofum hey dude can you share the files with me I am unable to implement search while using news api

[@manoellopes]

Big thanks dude

[@RaddyDev]

Any time! Thank you for watching

[@anujupadhyay10]

which is the recommended ejs plugin for vscode?

[@RaddyDev]

EJS Language Support 👌

[@xmxmxmxmxxmxmxmmx4981]

Thank you.

[@RaddyDev]

Thank you for watching!

[@godpower7941]

im stuck att 33:39, being told articles.foreach is not a function.

[@RaddyDev]

Hi, you can reference the code here: raddy.co.uk/blog/build-news-website-with-node-js-express-ejs-wp-rest-api/

[@RaddyDev]

Let me know if you are struggling to figure it out. I'll try to help tomorrow

[@bieberpraba2233]

@@RaddyDev i too stucked at the same

[@RaddyDev]

Did you have a look at the article to see if your code is the same?

[@RaddyDev]

You are probably not getting the object

[@mvrkkautilya]

it is saying forEach is not an function in ejs ...... how to solve it😥😥😥

[@RaddyDev]

Check the data that you are passing. forEach is an array method

[@taofiqcodes4303]

just watching this and love it mate...thank you so much..please can you do a tutorial on postman usage and full tutorial on API?

[@RaddyDev]

Sounds good to me! I've made a note and thank you for the comment!

[@taofiqcodes4303]

@@RaddyDev can you share the note pls

[@taofiqcodes4303]

@@RaddyDev okay now i understand thank you

[@vishwajeetpawar3009]

can you make tutorial where we are using two or more data bases and API as well Please !! Surely Subscribed for your great teaching !!-

[@RaddyDev]

I need to think of something. Thanks for the kind words and the sub!

[@nqha9x]

Could you create more videos like this using nodejs, express and about e-commerce websites?

[@RaddyDev]

Of course! I did create a new one recently showing you how to create a simple recipe website. It should be in my Node.js playlist if you want to check it out

[@haardpatel4242]

I used newsAPI then at 33:35 what should I type in ejs. Becz it is giving me error that articles.forEach() not defined ???????????????????????

[@RaddyDev]

Click the link in the description. I have an example of the newsAPI at the bottom

[@nuraiutegen7411]

@@RaddyDev where is it ???i cant find it. i have the same problem and cant solve it

[@RaddyDev]

Scroll down to the KZbin questions section raddy.co.uk/blog/build-news-website-with-node-js-express-ejs-wp-rest-api/

[@ahmedahmedx9600]

Hi randy, can you please tell me which monitor you are using ? And is it good for programming and color accuracy ?

[@RaddyDev]

My monitors are fairly old and I am not even sure if you can still buy them. The model is Dell U2414H. They are perfect for programming, but I am not so sure about color accuracy. I can imagine that the new models would be much better.

[@venkatesh2788]

Please make more node projects

[@RaddyDev]

I do have a few ideas on my list, but I would like to hear if you have anything in mind also? Thanks for the comment!

[@venkatesh2788]

@@RaddyDev you can try how to connect Node js and React js, and make any simple project

[@RaddyDev]

Unfortunately I am not familiar with ReactJS, but it's something that I could explore. I mainly use Angular for my project. Thank you for the suggestion

[@muhammedcansoy6131]

excellent

[@nabeelali5831]

can you link the json file, 22:44

[@RaddyDev]

raddy.dev/wp-json/v2/posts

[@yishakabrham5002]

great

[@SonNguyen-po5tr]

Thanks for nice tuts ,btw can you give the name of the VS theme.

[@RaddyDev]

The theme is called Dracula. Thank you for watching

[@habvielrgbimpc3447]

If I go to the website after 20:20 I get the error "Error: Failed to lookup view "news" in views directory "./src/views"" Can you help me?

[@RaddyDev]

Did you add the Templating Engine code? 15:35. Other than that, it could be something silly like a typo.

[@RohitKumar-dz8dh]

Heyy Raddy love your teaching. I am practicing along with you but I get error "could not find news " while render to news.ejs page . I couldn't resolve this error , would you tell me what can be issues for this error . I want to watch this complete video please help me .

[@RaddyDev]

If you are not getting news it could be my firewall. Sometimes if you make too many requests my firewall might block them. Any errors?

[@RohitKumar-dz8dh]

@@RaddyDev Thanks sir resolved issues.

[@5tevend]

adding the route on 17:20 didn't seem to work for me, i tried looking through SO and found a lot of different answers requiring module exports, can we not just use `app.get('/', (req,res) => res.render('news');` to render the news.ejs as our home route ?

[@RaddyDev]

I've got the code on my blog and github if you want to reference it. And to answer your question, yes you can do

[@kj1431]

Can we deploy this project on cyclic or any other deploying site, I am not able to deploy

[@RaddyDev]

I actually did a tutorial on that and used the same project as an example. Check it out on my channel

[@cxnftunreal]

How were you able to run the webpage on your browser. Having issues with that

[@RaddyDev]

You have to create a Node.js server and then start the server. That's the first 20 min of the video. What issues are you having?

[@cxnftunreal]

@@RaddyDev I created the server using npm on my Powershell, but when I run localhost:5000 it tells me site can't be reached

[@RaddyDev]

@@cxnftunreal Do you get an error in your console when you do npm start?

[@cxnftunreal]

@@RaddyDev it just stops on listening on port 5000 after nothing

[@RaddyDev]

@@cxnftunreal That's strange. Try a different port number. Something like 3000 or 8080...

[@evanilsonp.9900]

Hye raddy. The first part of the project we render 10 posts, but when we search for something in specific like node, some other results will appear and they are not in these 10 posts from home page. Depending on what you search for, it'll be more than 10 posts. How can I put more visible posts at home page?

[@evanilsonp.9900]

And another thing is when we search for something else that's not in the API, we just have a blanket page.

[@realdevilman]

Awesome video!

[@RaddyDev]

Thank you 😉😎

[@floydfernandes8844]

hi @Raddy I seem to get this error around the 20th minute mark: throw new Error('No default engine was specified and no extension was provided.'); ^ Error: No default engine was specified and no extension was provided. This is when running the localhost on browser It seems to be something with express

[@RaddyDev]

it might be that you need to install ejs and then set the view engine to ejs. So install ejs: npm i ejs Set the view engine to ejs: app.set('view engine', 'ejs') Try that and let me know how it goes

[@floydfernandes8844]

@@RaddyDev one more question what if i want to use multiple api requests. Can i do it in the same get function or do i need a new one

[@RaddyDev]

@@floydfernandes8844 You can do multiple API requests inside one Get function it's not a problem

[@floydfernandes8844]

@@RaddyDev if possible can youblink me to an example i cant seem to find anything

[@RaddyDev]

@@floydfernandes8844 The only one I can think of is this one: kzbin.info/www/bejne/hXbHgXtqm7tqrLs but instead of an API I used a database. It's fairly long and some of the packages have changed a little bit. You'll have to dig a little bit

[@kamanakarki2483]

Do we use any Algorithm here??

[@RaddyDev]

Yep. Nothing too complex :)

[@yogesdhakal]

can you also teach us how to add pagination to the news page .. it would really mean a lot .. thank you ..

[@RaddyDev]

Next time I try to do something similar (which might be very soon) I will try to incorporate one. Thanks for the suggestion Yogesh!

[@yogesdhakal]

@@RaddyDev thank you.. Looking forward to it.. I completed this one and was wondering how to add pagination.. Ejs is tricky

[@medurisupriya1722]

I get an error, article.foreach is not a function. can somebody help me with this?

[@RaddyDev]

Hi Meduri, did you managed to fix it? Check this stackoverflow. com /questions/31096596/why-is-foreach-not-a-function-for-this-object

[@braiNN]

its because his data is in an array, but if you're trying to access the news api all of their data is in an object.

[@66_vaibhavvarunkar60]

I'm getting the same error

[@66_vaibhavvarunkar60]

Did you solve it ? Help will be appreciated

[@RaddyDev]

@@66_vaibhavvarunkar60 the problem is what braiNN said above. Have a look at the link I posted and you should be able to solve it

[@krushnakantshaha5357]

If we don't enter any text in search bar then how to handle that request?

[@RaddyDev]

There are a lot of options... Some ideas could be that you do a redirect to the homepage or maybe you display "No news found." with a nice layout and a big search bar. It's really up to you how you handle it. Whatever works for your application and whatever is best for conversion, ux and so on... if you were asking about the code, you can simply check to see if the input is empty and do the things I mentioned above

[@krushnakantshaha5357]

@@RaddyDev Okay i'll try this and thank you so much for quick response

[@sharveennagendran]

what must I do to add more than one route under the routes folder? Cause right now, I did the exact same for another route, however, the new route just overwrites the previous route.

[@RaddyDev]

I wounder why that is happening... I hope that I haven't made a mistake somewhere. I will look into it later and let you know. If you figure it out please let me know

[@sharveennagendran]

@@RaddyDev roger that brother

[@RaddyDev]

I think that the problem comes from the position of the express middlware. You can do a quick fix by adding the new page at the top. app.use('/cart', cartRouter) - new app.use('/article', newsRouter) app.use('/', newsRouter) I quite like the approach explained here and it would be fairly easy to convert to: stackoverflow.com/questions/32418963/how-to-use-multiple-router-files I hope that this helps

[@sharveennagendran]

@@RaddyDev Alright, thank you. Do I need to write const cartRouter = require('./src/routes/cart'); app.use('/cart', cartRouter);? The reason I have two routers is that each router contains a different API from different sites, and I want to combine them both.

[@RaddyDev]

Yeah, you do need to add the const cartRouter. It's up to you how you want to structure your code. You could have controllers also to separate your functionality. That would make things better

[@jacobsilverstein1727]

If you have a private API key how do you protect it? Is the JS code visible in the source code?

[@RaddyDev]

In this example the JavaScript code is executed outside the web browser (back-end), so your API key won't be visible on the front-end. Thanks for the question 🙂

[@tutscloud4818]

Hi. when i write this ->

[@RaddyDev]

It should be and or . It sounds like you have missed something. You could go on the Github page and reference the code. I hope this helps

[@tutscloud4818]

@@RaddyDev i did miss on some spelling :D thanks for a reply though

[@jessdeng9084]

​@@tutscloud4818 I got the same error, how did you fix that problem? There is the red mark on what I have missed?

[@waluwigii]

@@RaddyDev the < of my

[@nikhilerigila1065]

app.use('/', newsRouter) throwing error throw new TypeError('Router.use() requires a middleware function but got a ' + gettype(fn))

[@RaddyDev]

In your news router page, you are probably missing " module.exports = newsRouter ". I hope this helps, Nikhil!

[@codingmarina7309]

Hello, could vue.js be integrated into this project? Thank you

[@RaddyDev]

Yes, absolutely. Instead of using EJS to render pages, you can just use Node.Js as the middle software that grabs the data and then you can use Vue.js to fetch it and render it. It's a good little challenge

[@SahilSharma-pk1gg]

can you help me to fetch data from newsAPI . It's not working as that data is in object not in array.

[@RaddyDev]

Yes of course. I just updated the blog post with an example of how to get the data and display it. It's at the bottom of the article and the link is in the description. I hope this helps. I've added a little bit of explanation, but I will need to go back at some point and format it better haha

[@surajshivan7758]

Facing issue with the last step .It gives ENOENT error

[@RaddyDev]

Did you create the search.ejs file? It sounds like it's something to do with the path. Maybe you have a typo or something. You could reference the code on GitHub

[@surajshivan7758]

@@RaddyDev created search.ejs file and still facing the same error bro

[@RaddyDev]

Could you share the code please? Maybe a GitHub link or a zip file will do

[@greglouis5779]

Sir how if someone want to add its own block for news on the website

[@RaddyDev]

I guess you could do the same thing as long as you can get the news from an API, XML or anything like that

[@greglouis5779]

@@RaddyDev can i talk with you in private please? What platform can we discuss

[@greglouis5779]

@@RaddyDev i am actually trying to get an API from twitter as you shared in the link

[@RaddyDev]

The process of making it work should be the same as WordPress - just different different naming conventions in the response object that you get

[@ProdByTso]

I have got to the end of creating our application I have all the code as you do but I cant open the localhost? when I search localhost:5000 theres no error but it doesnt load the page its forever searching?

[@RaddyDev]

How did you get to the end without starting the server?

[@ProdByTso]

@@RaddyDev I didnt it worked when you had the 'cannot get' message when i add all the other bits of code the server still says listening but doesnt load the page

[@RaddyDev]

That's strange. Have a look at the code on my blog or GitHub and see if you are missing something or have a typo. It could be something small, but without seeing the code I can't say. It's probably a typo somewhere that you have

[@ProdByTso]

@@RaddyDev thanks got the source code its working now :)

[@RaddyDev]

@@ProdByTso that's awesome. I am glad that it's working

[@alimodz6253]

If I was getting a random color from Node.js server and I wanted to apply that color to my ejs template background, how do I add that color variable to the CSS file?

[@RaddyDev]

You could create a variable that holds your random color and then res.render it like so: res.render('index', { color: '#fff' }). In EJS you would have to just do to output the value. Then I guess you can add this pretty much anywhere you like. You could add it in a div with style="background color... or you could add it in body { background color ... You get the point. I hope this helps

[@alimodz6253]

@@RaddyDev thank you sir 👌

[@ferreiradelima96]

EJS Tags are not being interpreted. I already downloaded an extension for ejs on vscode but it didn't fix it.

[@RaddyDev]

Did you install ejs and set it up correctly? Do you get any errors? The extension is there only to help you write ejs easier. Double-check your setup, I have a lot of simple examples here on youtube and also my blog if you are struggling

[@ferreiradelima96]

@@RaddyDev I fixed it. thank you. I typed 'title.rendered' to be rendered. The correct form was 'article.title.rendered'

[@mithunvishnu5089]

how can i ge this project ? please raddy send me any link

[@RaddyDev]

Hi, here is the link. raddy dot dev/blog/build-news-website-with-node-js-express-ejs-wp-rest-api/

[@rajapaksha]

im using "express": "^4.17.1". and body-parser not working

[@RaddyDev]

The body-parser is now part of Express. They recently changed it. Use this instead: app.use(express.urlencoded({extended: true})); I've updated the blog post

[@rajapaksha]

@@RaddyDev thnkyou

[@newtanagmukhopadhyay4716]

Bro just a small question. why did you do app.use(express.static('public')) and then app.use('/css',express.static(__dirname+'public/css')) i mean doing only the later would have sufficed right? also,in that file news.js file, res.render('news'). what exactly is 'news' here? like is it the name of the ejs file?

[@RaddyDev]

You only need app.use(express.static('public')) but the other examples where if you want to do a specific folder. I am not sure if I explained that well. Just use the first one and it will work. Regarding the news, yes that's the news.ejs file, but you don't have to specify the file extenuation name - ejs. I hope this helps!

[@sairajkulkarni1347]

make a vdo on its deployment

[@RaddyDev]

Here: kzbin.info/www/bejne/p2mqhIp9qpelpaM

[@rakeshjain2152]

Hey! I thought your hosting plan was expired

[@RaddyDev]

The raddy dot dev one? What happened?

[@jcdsr1]

It will be nice a tutorial on how to build a URL instead of using id, using the URL field or converting the title of the post into a URL

[@jcdsr1]

Also thanks for your tutorial

[@RaddyDev]

It would have been better if I did that on this tutorial. I could do a new one with handlebars, but I need to find a good API to get some data. I don't want to use the NewsApi or WP. I will try to think of something. Thanks for the suggestion

[@yaseenimuhammadraja9461]

Hai sir, Great tutorial 👍. And I have one doubt that is, How to render multiple result from MySQL query on the same .ejs file on Node.js and Express?

[@RaddyDev]

If you are talking about multiple records, you can just loop through the object with EJS and display the results. You can use a for each loop to do that. And if you are talking about having two different objects coming back from MySQL, you can still loop thru them, but you'll have to do that twice. You could create a new object that combines the results and then loop. I think that I said loop too many times haha. I hope this helps

[@mohsinirfan4498]

how can we make our rest api link

[@RaddyDev]

I guess you mean to publish it with a domain name? You could use a platform like Heroku to do that. I have a video tutorial on that and there is a free tier

[@mohsinirfan4498]

@@RaddyDev Sir i mean that i create a rest api how to print my rest api data into html file

[@RaddyDev]

@@mohsinirfan4498 you can use EJS just like I have on this video

[@jianhe]

ejs if format is really very hard.

[@RaddyDev]

Yeah I find it hard to type, but it's fairly powerful

[@adad8795]

Awesome

[@RaddyDev]

I am glad that you liked it! 👌

[@sanjaykandula4240]

updated api link we need

[@RaddyDev]

Working on it... I don't know when and what has changed in order the API not to work.

[@RaddyDev]

Fixed, it looks like the API has changed slightly: /wp-json/wp/v2/posts

[@conormooore5192]

Hi could you make a Spotify website like this?

[@RaddyDev]

Using their API? I could do that. We'll need some front end JS for interactivity, but that can be done

[@OhReallyHuman]

vizwishtudio code hehe... great tutorial though!

[@RaddyDev]

😀 thank you

[@RaddyDev]

If you want to know how to display data from the NewsAPI I just updated the article. Link in the description Update: Body-parser is no longer required as it's part of Express. Use this: app.use(express.urlencoded({extended: true})); Instead of: app.use(bodyParser.urlencoded({ extended: false }));

[@RaddyDev]

@Flame Fox C:\users\flame and then the file seems fine to me. You can go do that in any folder and that's where your project will be created

[@fernandosoaresdev]

Hi, great video you dropped on us! Thanks for the shared knowledge! Can you tell me what color scheme/color theme are you using? +1 Sub with the bell!

[@RaddyDev]

Thanks, Fernando! It should be Dracula the free version

[@braiNN]

use. semicolons. please. thank. you.

[@RaddyDev]

Why?