How To Build A Markdown Blog Using Node.js, Express, And MongoDB
VloĆŸit
- Äas pĆidĂĄn 5. 08. 2024
- This is my most comprehensive video to date. In this video I cover absolutely everything you need to know about Node.js, MongoDB, and Express by building out a complete blog with markdown support. This video covers a ton of content from the basics of setting up an Express server to the complex structure of building a full stack web application. If you are wanting to get started in web development then this is the perfect tutorial for you.
đ Materials/References:
GitHub Code: github.com/WebDevSimplified/M...
MongoDB Install Tutorial: âą How To Install MongoDB...
Async/Await Tutorial: âą JavaScript Async Await
đ§ Concepts Covered:
- How to create an Express server
- Connecting MongoDB with Express
- The structure of a full stack application
- How to setup database hooks
đ Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#Node.js #WDS #Express
Finally, a good tutorial on a CRUD application that isn't 3 hours long, "WHICH IS EXACTLY WHAT WE WANT."
20 minutes into the video, I decided I needed to show my gratitude for your awesome material, so I went to your Patreon and became an "Investor" $20 monthly. I already bought your React course. Keep up the great work, Kyle! I love your teaching style and professionalism.
Thank you so much! I truly appreciate the support. I will send over a key for the beta version of my CSS course soon.
@@WebDevSimplified Hi Kyle, this is a really great tutorial. I'm really learning a lot. I'm stuck though. I get an error after writing this code :
{ %>
I get an error... articles.forEach is not a function.
Is there a fix for this?
@@KevohYout Hi Kevoh, kindly remove s in forEach. Your code will be like articles.forEach(article => )
@@KevohYout Hi, I haven't tested it, but try this:
{ %>
.
What I've changed here is:
.
forEach(articles => {
to
forEach(article => {
and
to
.
You see, *article* there is referring an individual article in the list of *articles* that we're looping through. I hope that makes sense :)
@@aaron_the_penguin Hi Aaron, i tried it that way and it still didn't work. I don't know what the problem is. I'm still debugging though
This is not a tutorial. This is a piece of art.
:D
the way he speaks reminds me of bob ross painting
I know Im randomly asking but does any of you know a way to get back into an Instagram account?
I was dumb lost my account password. I appreciate any assistance you can give me.
@Finn Forest instablaster =)
@Atticus Colten i really appreciate your reply. I found the site thru google and Im trying it out atm.
Looks like it's gonna take quite some time so I will reply here later with my results.
Unbelievably in-depth. Rarely are people this good with tutorials
Thank you!
Kyle! You're my favorite teacher for programming. I've been watching you for more than two years now and I can't thank enough for all the things you taught me. Your videos are really a treasure. Your soothing voice and good looks make it even more fun. Kyle, you inspired me so much, I recently decided to become a professional developer.
Thank you for all your work, your high quality teaching and videos!
I realized, what I really like about your videos is how you build this up layer by layer. Testing functionality as a concept then breaking it apart to make it more "production-ready". Thank you very much!
Thank you very much for sharing this video. At one point I said to myself "if this guy can teach so much in 20 minutes, imagine what he can do in one hour.." then I looked up the time and actually 55 minutes had passed. You are a great teacher! I can't stand one hour of university class, but your video was just enjoyable, engaging and with a valuable content! I would never skip one of your classes if you were my teacher hahaha Thanks again! Keep up the great work!
i was searching for a good blog tutorial with node last week and boom, the best one. Thanks so much!
Kyle you came in clutch!! I was looking for the exact same things a few days ago! Thank you sir! đđœđđœ
I'm glad I could help!
This is EXACTLY what we want.
You stole my comment good sir.
After going this tutorial like 3 times , I can proudly say...now I get it
True...JUST LIKE THAT
Love the way how he says it :)
honest to god you explain things better then my class sometimes. Ive been doing routing and crap like this for weeks and id always get lost and daunted in setting things up. I really dig the bite size pace you take things at. Now I wont have to worry about doing my homework this week. Thank you.
I have never finished a full tutorial building a complete project until this one! Wow so helpful and helped me understand a bit more of how to build something more full-stack! Thank you so much!!! Hope to see more!!!!
This is one of the best tutorial I've ever been through! Thanks a Lot!
Started node.JS coding using your videos.
Congrats on the improvements (you're smiling more, talking slowly. etc. )
Keep up the good work ;)
I know tons of people already said this but DUDE YOU ARE A LIFESAVER! If I had money I'd be throwing it at you!!!!!!! EXACTLY what I was looking for! You are an amazing teacher! Such a blessing to have found you and your tutorials :) Once I get a job I'll be sure to throw some gratitude your way buddy!!!
I like your style - straight to the point - no nonsense - no ego. Thank you.
Absolutely fantastic video, I was having an issue with markdown and sanitization on a MERN stack project I'm working on and this instantly alleviated my suffering! Side note, a great video idea (that isn't really out there at the moment) would be this same node/express backend but swapping out EJS with React, so essentially a MERN structured blog. Anyways, thanks again!!!
Thanks you so much everything works perfectly and this was an amazing deep dive into making me feel like I actually have a handle on all of the GET PUT POST ect. I knew almost nothing before watching this video about requests and working with ejs but with this video I was able really understand what was going on!
Keep up the good work! Thanks a lot!
That is awesome. Nice job!
you are the ONLY youtuber (well 2nd one is Coding with Mosh) that breaks down concepts this easily to understand. Thank you!!
much better understanding watching it all come together, i thought i was looking for node js tutorials but now see this is actually what i need. Awesome , great work
Funny I was just thinking of building a simple blogging web app and lo and behold a video pops up on my feed! Thanks! âđŒ
AI
Wow. Thiss is exactly what I was looking for. Thanks a load!
Man, I had to watch hours upon hours of tutorials on middleware to understand routing. I think it finally sunk in. Thank you so much!!!
Thanks Kyle! You really made my day by creating such well-explained tutorial, and I learn a lot from you and the comments. Really appreciate your works!
I appreciate the effort you put into your tutorials, thanks for the information. Unfortunately I find the content hard to take in because it's run thru very quickly without explanation. My goal with completing this tutorial was to completely build it out and then break it into segments so that I could then dive in to deeply understand the concepts and build upon that. But I find it very difficult to take this approach with this one. Either way great stuff man and thank you!
The world turns thanks to people like you...
Thank you so much for masterpiece
I've never commented on a tutorial video before but i came back to comment on yours. Its the best i've ever seen, you are the best
for months I've been looking for this tutorial. you sir are a gentleman and a scholar. tysvm.
Thanks a lot for sharing knowledge.
Just two things :
* 27:45 : You don't need the ./ then ../ to access to the parent directory. Just ../models/article
* When you want to pre populate fields, you can just use { article } instead of { article: article } using object destructuring
For those having an error "marked is not a function" in the end of the tutorial, the package updated.
use: marked.parse(this.markdown) instead of marked(this.markdown)
Thank you
actually when i am connecting my data base mongodb it is showing this error can you help...
const serverSelectionError = new ServerSelectionError();
^
MongooseServerSelectionError: connect ECONNREFUSED ::1:27017
@@tusharguys1234 Have you downloaded and installed MongoDB on your machine? If not, first go to their website and do so. (also, make sure the service is running)
Thank you!
Thank you
Rarely are people this good in explaining stuffs. Helped me a lot to understand things
Thank you so much for this video! So well explained, yet very concise considering the material covered. Exactly what I needed before building the backend for the app I'm working on.
You are so GOOD at coding and explaining things. Your coding is like an art. Please do more coding turorials. We like it.
this is *exactly* what I needed, thanks.
dude this is so smooth and nice. I'm trying to learn node.js so I can use it instead of django when needed and you have made that process as easy as possible. Even when you faced errors you explaines, and fixed them with grace.
MAN I LOVE YOU! I'm developing a big big project that has to do with news and thanks to this video I'm getting close to making it come true! Truly amazing!
Hi Kyle. This is honestly a fantastic video and it has taught me a lot as a junior developer. However, I don't if I missed something, but the way this blog is designed, wouldn't it just allow anyone to add, edit or delete the blog posts, or do they remain somehow private for you to manage and others to only read?
hey anyone get this error:
const serverSelectionError = new ServerSelectionError();
Edit: found the issue, have to download MongoDB for windows and start the service from services and then the connection will work.
Thank you, Kyle, for another magnificent tutorial! I wonder how one can explain programming concepts in such an easy and fascinating way
I am really new to the developer community; most of the time, my head is spinning, but I quite enjoyed this tutorial. Following along to the end, I successfully completed the project. This is going to be a great template for a project I have in mind. Honestly, I wish I could support your channel more, but I am not working yet. During my training, I have watched so many of your videos and have gotten out of a bind several times. At first, I was like "WHAAAAAAAT!!!! SAY WHAT NOW!" in minions-speak and struggled(still struggling) sooo much, but I believe I am starting to get it. I enjoy your teaching. Thanks so much.
Hey Kyle,
Thanks for the great video. I got stuck at about 34:10 because I didn't realize I needed to install the mongodb server program on my system (mongoose added to the app at 24:10). Finally figured it out but for future watchers inserting a comment at that point might be helpful. Cheers :)
I am also stuck there. How do you do that?
thanks man! was searching for all the wrong solutions! you saved the tutorial for me.
Yea I guess that is important, right đ
OH MY GOD I WAS STUCK THERE FOR 4 HOURS 4!!! i was slowly losing my sanity because of that. thank you
You saved me too lolâŠthanks
If you have error message during the tutorial maybe it's because you haven't installed MongoDB. mongoose doesn't do it.
Kyle did a video about this :
czcams.com/video/wcx3f0eUiAw/video.html
Thank you ! worked fine with Mongo ;)
Thanks I got that error, after installing MongoDB Server the error's gone!
thanks for this!
Kyle, thank you for teaching me a lot on your channel...I have been following you for a while...I can say that my coding skills have improve a lot thanks to you and a few other ytbers. Appreciate u
It took me some weeks of spare time to follow this video and work on the project. And finally I finished it! This is absolutely the first web project that I build hands on and I've learned a lot from it. The video is dense in content and clear in explanation, and the approach is much better than those "learn sth in 3 hours full course" :) . Thank you very much!
One minute in this video is not really one minute. When i saw this video the first time, i said, Ok i got a small project which is only one hour in length and i should be able to finish it today, oh boy i was so wrong.
You should have said up front that we would need a mongoDB already set up. Having never used it before I had no idea why it wasn't working!
Hey Did your error resolve. I am also getting a error like (const serverSelectionError = new ServerSelectionError(); ). Not able to resolve it. Can you help me.
@Sreekar K The way he guided
This is great! Can you please also teach uploading images, save and fetch please?
Hey Have you had a chance to try the upload image? How it works?
This video is a jewel, thank you for bringing content of this level for free.
I have watched a lot of videos for express, this one is just amazing when compared to others, thanks!
Its a great tutorial i had found on youtube...but its so much confusion because you had named every second file as 'article'đ€Żđ€Ż
hello .. new Article() generates whitespace to teaxtArea .. do you know whats going on?
EDIT: I've figured it out. It was whitespace in .ejs template. The needs to be right between tags without whitespace ._.
This also gave me issues till I figured it out.
That was awesome! Thank you very much for your detailed explanation as always! Keep rocking!
This is an incredible tutorial! What a wonderful example of how to do it. Respect.
I have an error somewhere at 33:00, basically I get MongooseServerSelectionError: connect ECONNREFUSED ::1:27017, and this happends after i fill out the form and click save, I googled on stack overflow but couldnt find the solution if anyone knows or encounterd the same error and solved it please help
did you ever find a solution ??, im facing the same issue
Fantastic tutorial! Works great in development
Anyone else getting an "Unhandled Promise RejectionWarning " though?
I've been trying to deploy it through Heroku - added try/catches to all the async/await functions but still the error persists
yes
Yeah, I get this at about 35:00 stage of the video, and so that's where it ends for me. Can't figure it out. Did you end up figuring out the problem?
the best tuto i ever watch in ur channel until now
please make other precious things like this
let me join in the accolades here ... #1 I HAVE NO IDEA what you're doing but I am confident that I will understand it in time, because it's all laid out. That's the way I felt about learning javascript and html, once I did a few lessons, I went - OH- THIS IS SUPER EASY! Thank you to the people who invented javascript etc, because all I have to do is learn the syntaxđșđșđș
anyone who is just starting out, don't let it get you down or think you're taking too long to learn something. Teachers like him care about you and are here to show you the way đI didn't know a lick of javascript/html/css a few months ago, kudos to wonderful teachers
Hey, it's great but I got stuck at 35:20 when it needs to show the PARAMS.ID, I am unable to get the id. Does it need to install something extras?
Please Help.
I am having the same problem
me too
Does anyone have fixed the issue. Please tell fast as possible
@@JuandeLellis I got the solution...We need to put underscore before id because in mongo db ID is stored as a "_id" Just edit this line.
${ article._id } in place of ${ article.id }
@@laplasparadox3138 I got the solution...We need to put underscore before id because in mongo db ID is stored as a "_id" Just edit this line.
${ article._id } in place of ${ article.id }
Dude, i cant get out of your channel. Nice job.
I just completed this course, but maybe something has changed with packages, because I am getting an error of "unhandlledPromiseRejectionWarning"....not sure how to troubleshoot. Any advice would be much appreciated!
I'm having the same problems as well
What code gives you the error... did you miss an await with an async?
same((
If all my courses in university were this good I'd have graduated 2 years ago
Thank you for the support!
"which is exactly what we want " is the new punchline for me :) useful video and thank you for your efforts.
THANK YOU MAN OF WEB DEV!! everything works fine!!
A tip for anyone who is following along with the tutorial:
while copying code, be very careful about silly spelling mistakes in the quotes (for which I totally did not spend 2 hours re-watching the video)
For anyone getting a "Cannot /DELETE" error, check every single line of your code. There's a spelling mistake somewhere. My error was typing ':/id' instead of '/:id'
For anyone getting errors with MongoDB, make sure you actually install MongoDB. I didn't realize you needed to do that AND install mongoose đ
thank you, i did the same this
I don't know why but we have all been to the same situation lol :D
Can you add comments section for individual post ?? that will be awesome
I hope to make a part two for this video if this video is popular enough and that would most likely be something I include.
@@WebDevSimplified I Owe You Bro
Thanks Kyle! Relearning webstack so redone this tutorial. This has all the functionality required
This is so useful!!! A lot of 10 hours tutorials are so boring. This is just 1 hour but learn a lot!
Am I the only one where the connect function for mongoose doesn't work? It always crash
I feel you
@@ayushmishra7729 solution?
@@UniversalKnowledge01 check your connection string and make sure you copied it properly. Also if the connection is refused make sure you are not already connected on the same port elsewhere.
Good but if authentication is added it will be great
I am thinking about doing a part two on this video if enough people like this video.
@@WebDevSimplified yeah please do it thank you
You deserve million likes
@@WebDevSimplified Thank you som much first, and same comment if possible to add authentication, will be great :)
@@anilanaparthi6985 Take a look of passportjs.org It's easy to use and offers plenty options to authenticate with.
@@WebDevSimplified It'll become a real almost-ready-to-deploy project! Looking forward to part 2!
what an informative and wonderful video man !! you do so much work to give us good content!! Thanks, Kyle!! Subbed!!!
Everything works perfect! Thank you for such an exceptional tutorial đ„
*Tip* : We Can Write
const app = require("express")();
You may need to use express.static, so it's easier to just define express.
What does the () do at the end?
@@HostDotPromo Its same as:
const express = require("express.js")
const app = express()
() just calls the function
@@HostDotPromo And It's Came In ES6 ( I Think )
@@j122j Thanks!
'
Got the solution...!!
You need to Install this plugin in your VS Code as it doesn't understands embedded javascript(ejs) by default.
marketplace.visualstudio.com/items?itemName=DigitalBrainstem.javascript-ejs-support
It works bro thanks
@@geetgori160 how am i gonna plugin, i couldnt get it
@@tunahani selam sitede plugin tam olarak nerede, bulamadım
EÄer VS Code kullanıyorsan Exte
nsions bölĂŒmĂŒnden arama yaparak indirebilirsin
Hi Kyle , Nice clean step by step explanation and easy to understand. Thank you so much for the well and neat tutorial on node.js , mongodb and express framework.
thank you so much. this is real deal. i wish the efforts you are putting in your content may reward you beyond your cherished desires.
The shear amount of "developers" in this comments section that expect someone to just solve their problem for them with little to no research or effort on their end is exhausting. You want to be a developer? This is part of being a developer. You are a problem solver. Start learning how to problem solve or your career as a developer is going to non existent. It's one thing to ask for help after you've spent hours upon hours researching on your own and trying out possible solutions. Its quite another to simply beg strangers online to handle your work for you with no effort on your end. The reality is that if your doing this, and this is your go to mentality - you are not learning anything anyways aside from how to type quicker and anyone dumb enough to hire you is going to be incredibly disappointed.
Shut up loser
New day and a new master piece from web dev simplified . Please do more backend tuts like how to make an app that each person have their own profile page . Thank you in advance
This is awesome! Excellent explanations as you go through the code; very clear :).
I did my first website job with this tutorial. I used other tutorials as well, but this was huge.
thank you dear Kyle for this realy complex features and notions explained in the easiest way.
You are really the best tutor of web dev on CZcams.
Wow! Grateful For This Course! Thanks!
Wow! Another great video tutorial, learned so much from this!
Thanks so much for such a great tutorial, Kyle! đ
such a great teacher! thanks for simplifying this for me
You're the man, Kyle!
I'm trying to make this a rest API and client rendering with React.
What a tutorial. Amazing. No words for this.
Great tutorial Kyle!! Fantastic work here
This is a perfect video, which is exactly what we want.
Awesome!! Learned a lot. Always wanted to know how to create a markdown blog and that slug thing.
whoa thanks man ive been really hoping you'd do a vid on this
really useful indeed. That's what I meditate over the years!
A really cool project, you're the best Kyle.
all of my queries were solved after this tutorial. needed this for so long . Thanks
Hey Vaibhav! Are you a fresher and open to opportunities in web development currently? Have you created any projects in JavaScript frameworks?
In the first 15 min I am your fan man.... your teaching way is excellent...
that is a great tutorial for someone who wants to learn building web applications, thanks!
Thank you for your tutorial. Veyr easy to understand!
This is not a tutorial. This is a piece of art
Nice work. completed it already. Though with some adjustments.
Thanks man.
Hey. I am a current student from Toronto university coding boot camp. Just wantta let U know helped me A LOT! Here, have my attitude!
Thank you so much for the support. I am glad I have been able to help.
Awesome tutorial Loved it and helped me a lottttttt to understand the mongo :)