Node.js Crash Course Tutorial #7 - View Engines
ฝัง
- เผยแพร่เมื่อ 1 มิ.ย. 2024
- Hey gang, in this node.js tutorial we'll look at view engines. View engines allow us to inject dynamic
content & variables into html templates before sending them to the browser.
0:00 -- view engines at a glance
1:28 -- ejs view engine
11:01 -- passing data into views
23:57 -- partials
30:18 -- adding css
🐱👤🐱👤 JOIN THE GANG -
/ @netninja
----------------------------------------
🐱💻 🐱💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/vu...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱💻 🐱💻 Course Files:
github.com/iamshaunjp/node-cr...
🐱💻 🐱💻 Other Related Free Courses:
+ Modern JavaScript Tutorial - • Modern JavaScript Tuto...
+ HTML & CSS Crash Course - • HTML & CSS Crash Cours...
🐱💻 🐱💻 Node.js links
+ Download here - nodejs.org/en/download/
![Golang | Rest API Loyiha [Bo'lim - 2] | O'zbek tilida](http://i.ytimg.com/vi/-s0sKptBOoI/mqdefault.jpg)
![[Live สด] การออกรางวัลสลากกินแบ่งรัฐบาล งวดวันที่ 1 มิถุนายน 2567](http://i.ytimg.com/vi/3canzHC_d0k/mqdefault.jpg)
I have never seen any teacher like you.
Everything is actually perfect, clear, understandable, and amazing.
All thanks for you
Thanks for the kind words Mohammad, it means a lot :)
My sentiments exactly. I came expecting a topical understanding, and left with in-depth knowledge!🙂😀
I watched a ton of tutorials onTH-came and paid inUdemyy for them you are the guy whic the very best by far! If Ihade found earlier I probably saved months of time it'ss not a exaggeration) @@NetNinja
I watched this once all the way through, all 12 videos, then went back and watched again but typed the code whilst watching. Best tutorial series I've seen.
Great to hear, thank you!
Just a checkpoint: VS code itself doesn't have syntax highlighting for EJS. Therefore we need to install an extension named EJS language support.
BTW great video NINJA :-)
Thank you
Similarly, in Intellij one can add an 'ejs' plugin
thanks!
Thank you @subhajitdey135, your comment has helped me.
thanks
Everytime I have a question popping up in my head, you answer it right away. This course is really amazing!!
Bet it was about using an external CSS instead of inline. :) It was bothering me ever since he started the tag.
I was wondering when he is going to use partial views
Dude you are crazy!! how do you manage to post valuable content from different topics within the same week!!!!
Keep it up!!!
I tried out, as a self-taught developer in Morroco, many different youtube channels and educational resources outside of youtube and I can say with confidence that you are among the clearest, sharpest and most pedagogical educational sources. Thank you so much for all your efforts !
Before watching the Node.js crash course tutorial I was freaking out because I couldn't wrap my mind around nodejs, express, and MVS. I'd watched over nine hours of lectures and then studied countless articles for over six hours and it still didn't make sense; routing, rendering, and ejs?? EEEEEK. Fast forward to today, I've finished tutorial #7 and I'm literally shocked because I understand what's happening, and even better how cool these tools are!! I'm not even done with the tutorials and yet its all making sense, can't wait to keep learning. Thank you for sharing this incredible resource!
Excellent Shaun! Really good - no unnecessary waffling, direct to the point every time, no time wasters. Very useful content. Many thanks.
i hope we can have a MERN tutorial soon. REACT is way Cleaner than EJS
Beginner here, Let's say I have a project deadline and I am still on the learning phase. The project is small-medum scale, which should I go for between the two, React or EJS? I can learn quick and the project doesn't need much fancy stuff.
@@redzeit Hi, i would suggest react
React and EJS are completely different things. One is a front-end framework, and the other one is a template engine. They are not used in the same way or for the same purpose.
I always thought youtube teachers get a little too much credit for their work. There's always a bunch of people saying things like "I finally get it" or "why can't my university teach this well", and I don't think those comments considered that they're actually reviewing something and not explicitly learning it for the first time when they come to youtube after a class/bootcamp. So it's kind of unfair to throw those teachers under the bus when certainly those teachers introduced the topic and made you think about it enough that you could come into a 2nd viewing far more prepared. All of that taken into account and considered, I think The Net Ninja is a superb teacher. His content is elevated to a level I've really only ever encountered once prior. This is one of the opportunities that I can say, despite the fact that I had a decent grasp already, Net Ninja has taught me a lot. Beforehand my understanding felt like a blurry image that was recognizable but not clear. Now I feel like I have a 4k quality picture, framed, and complete with descriptions and summaries underneath.
Hahaha, you really enjoyed it to compose such a lengthy message. Shaun is the best I've met on TH-cam, goes straight to the point with clear and concise explanation. Very good teacher
@@jeremiahojo2048 I really wanted to emphasize that Shaun didn't just get through to me because I've seen the material before. He truly is incredible.
My new morning ritual tea and node.js let's go!
let's go !!1!1!!!!
I’m a day behind.....let’s go!
I will have to rethink about my career if I am going to look like you in profile picture.
.
.
.
.
.
.
.
.
.
Just kidding lol... I am already a developer haha..
Hello man! It's been 9 months, have you applied to any jobs? How have you been on your progress? I am currently covering these tutorials and just wanted to know what's going afterwards and waiting ahead
man. ilu. as a beginner with absolutely no idea of how backend works the level of depth and the flow of each video really helps me graps these consepts. I tried various other sources but all of it seemed like i was copying from them without knowing how it was done but now i really know what i have done.. love your channel. keep the good work up. may God bless you abundantly
This is the best lecture on NodeJS i have seen till now
I have watched so many courses from your chaneel eg JavaScript, asynchronous Programming, vue, React, Webpack and now node js/express and all of those courses were amazing thank you for making this quality content free for us thank you very much
I really appreciate the fact that you show multiple ways to do things. For example how you explained creating servers and using express in the previous videos in this series. I'm learning a lot from your content.
That's great to hear, thanks for your comment Sutra :)
This weekend was too long as we did not get a Node.js tutorial portion! :D
Thank you for this amazing course!
Anyone encountering
warning: Special Characters must be escaped : [ > ]
You should
1) Install install ejs extension
2) If (1) does not work, write this:
"htmlhint.options": {
"spec-char-escape": false,
"doctype-first": false
}
It's the HTMLHint that was causing it
This ejs concept is so cool! I've always wanted to write html in this elegant and modular way! Thanks so much Ninja, best web development tutorial!!
I finished your JS udemy course and I am building an e-commerce website, now learning backend so I can finish it up! You are the best
Enjoying this course. You make things very clear. I love people who explain things without assuming prior knowledge. It means I actually learn something rather than become swamped in terms and concepts I really do not understand. Thank you!
That's great to hear, thanks for the kind words :)
Thanks for another tutorials, You are changing lives, Please keep the good stuff coming
I am the guy who never heard of ejs and prolly view engines. and then i watched your videos.
next i know i am watching ur vdos, learning it and executing it on the same time for two clients and they were insanely happy with the site.
ALL THANKS TO YOU
Just in case anyone is having trouble with ejs syntax highlighting in visual studio code, going to the settings.json file and adding this snippet worked for me :)
"files.associations": {
"ejs": "html"
}
these ones solved the issue for both express and ejs highlighting in webstorm (it wasn't finding the source for some methods of express, nor the declaration for ejs properties, either). i'm not sure if it propagates on visual studio code, but it should since it's all in the package.json file:
npm install --save-dev @types/express
npm install --save-dev @types/ejs
not working for me plz...just explain the procedure plz...thanks
What worked for me was installing the ejs language support extension for VS Code.
@@naelmht same for me
@@naelmht Thanks! wasted like 15 minutes searching in google lol
Hey, I don't know if you've done this yet (I've been watching your older series), but it'd be really helpful if you could show how to do a login & registration system w/ Node. Also, password retrieval. I know, I know, it's a tall order & I'm going to look them up online anyway, but I just thought I'd ask. I look forward to watching this series. Keep up the good work, dude.
00:03 Using view engines for injecting dynamic data into HTML templates.
02:25 Node.js and Express use EJS to automatically look for views in the 'views' folder.
06:39 Creating multiple view templates for different pages
08:42 Rendering EJS files and creating a simple form in Node.js
13:06 Passing data from handler to view in Node.js
19:33 Using EJS view engines to render dynamic content in Node.js
21:24 Dynamically rendering content using EJS templates.
25:37 Using include function to add head content to view file.
27:45 Including common elements in multiple files for efficient updates
31:46 Styling and positioning elements using CSS properties.
33:34 Styling the form for individual pages
My Favourite Teacher on youtube
i never saw an node explanation like this, you are amazing bro, cheers from Brazil!
Thank you so much for all tutorial videos, I had learned many things from your tutorial videos and I had applied in my work. I know that you are sharing your love to the world. I know that it is not enough to say Thank you so much. You are a great Instructor!
Thank you! I'm building a web based/text based game and you definitely taught me everything I need to know to move from PHP. Awesome dude!
I had to install the ejs extension from vscode for the tags to work. wonderful tutorials !
I just love how you say "rrright heeah" lol, Awesome tutorial though!
I daily wait your new videos 💜, These videos make my day 💚 Keep it up 💙
+ Where were you last 2 days ?
I was able to complete this video in practical! Thanks Shaun!!
The best tutorial as always. Thanks for your work and inspiration.
Loves from Vietnam
a very very intuitive and informative video....btw this was my 1st video from ur channel...liked ur style of teaching very much
Thanks so much Shaun for sharing your knowledge so elegantly
Thank you The Net Ninja, from the bottom of my heart.
and from my top , bottom, left, right and center of heart as well. 🤗
Love this video!
Shaun, I want a deep explanation of server side vs client side rendering as you mentioned in your video, now Im thinking about it
Your tutorials are excellent, because I can remember all aspects of systems development.
P.S .: The style was good for me.
Thank you Professor Shaun!
You're a life saver man ! awesome tutos and great explanation
thank you a lot you posted this years ago but im just finding it pure gold
Best tutorials i ever came across. Thanks a Ton dude
i don't know if you read it or not, ninja. but thanks for your course!
i was watching your tutorial for about 2 months now and still loving your channel content. and i just realize that you just got verified channel logo next to your channel name now. maybe you got that "check" logo this week? idk but congrats :).. keep creating buddy, i love your content!
explaining everything you do is great! you dont just type something and continue typing something else. Great vids got yourself a new sub
thanks for talking through the added parts
Thanks you for your amazing course. Super easy to understand.
Holy shit this is one of the best tutorials ever
Best tutorial ever. Deserves more then the effort
very easy to understand, thanks a lot for making this video. I like the part where you explained that all this process is called Server Side Rendering. It's good to know what we're doing .
Glad it was helpful Herbert!
you are great teacher...just dont stop doing this
Really explained very well about ejs view engine. If you want to know about view engine we can watch this tutorial about
Net Ninja indeed is a tutorial ninja, I love the way you make things simple to understand.
as suggested at 33:00 I went and completed the entire flexbox series. Real good series worth the time spent for sure.
Keep it up 🤩🤩🤩🤩. Superb explanation 🔥🔥🔥. Keep uploading like these videos.
From India🇮🇳🇮🇳🇮🇳
Great channel! Thanks for all the time you dedicate to teaching others!
Thank you :) that means a lot
Ive looked for a properly explained ejs tutorial for hours and i found one ^^
You're such a great instructor!
The only thing is that pace is a little bit too fast and if it has more advanced concepts like sending emails, file upload and testing. Otherwise, it's a lot better than many udemy courses.
The journey to the million
You...are...amazing. Such an amazing teacher.
Can't wait for the next video of the series :)
amazing video as always!! I noticed that ejs is very very similar to php templates and in some ways django templates as well
This guy is brilliant !!
I really enjoy your videos, thank you for sharing.
Thank you! 😃
Excellent tutorial. Crisp and clear! tyvm!
Glad it was helpful! :)
Awesome tutorials.. very simple and understandable. Waiting for next tutorial.will follow whole series. The NeXt Back-end after PHP .. Node Ninja..,😎😎
Clear and concise. Great stuff mate
Much appreciated! :)
this is new to me. i was introduced to node from react so im betting it will be epic
Amazing Tutorials!! Thank you!!
So... this is how conditional rendering works before React. Awesome.
Best ever tutorial on ejs
I waiting nodejs crash course and your teaching skill is very amazing and I also waiting your next skillful teaching videos
Previously i was using pug... But now I am gonna switch to EJS as it is more similar to HTML... Thank you shaun for introducing me to EJS.
I was surprised that we used forEach without return instead of using map and return the markup. Curious how it works, just looping and spitting what's inside into the outer tag
The styles:
@import url('fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap');
body{
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
font-family: 'Noto Serif', serif;
max-width: 1200px;
}
p, h1, h2, h3, a, ul{
margin: 0;
padding: 0;
text-decoration: none;
color: #222;
}
/* nav & footer styles */
nav{
display: flex;
justify-content: space-between;
margin-bottom: 60px;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
text-transform: uppercase;
}
nav ul{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
nav li{
list-style-type: none;
margin-left: 20px;
}
nav h1{
font-size: 3em;
}
nav p, nav a{
color: #777;
font-weight: 300;
}
footer{
color: #777;
text-align: center;
margin: 80px auto 20px;
}
h2{
margin-bottom: 40px;
}
h3{
text-transform: capitalize;
margin-bottom: 8px;
}
.content{
margin-left: 20px;
}
/* index styles */
/* details styles */
/* create styles */
.create-blog form{
max-width: 400px;
margin: 0 auto;
}
.create-blog input,
.create-blog textarea{
display: block;
width: 100%;
margin: 10px 0;
padding: 8px;
}
.create-blog label{
display: block;
margin-top: 24px;
}
textarea{
height: 120px;
}
.create-blog button{
margin-top: 20px;
background: crimson;
color: white;
padding: 6px;
border: 0;
font-size: 1.2em;
cursor: pointer;
}
Thanks!
Thank you Sir !
Thank you so much!
BRO I LOVE YOU THANK YOU SO FUCKING MUCH
awesome tutorial … Thank you so much Shaun. ☺️👌 btw I wunder what is the color theme you are using as it is just so much clear to see the code like that and also I don’t know why but my settings chain the ejs tags on one line
Dude you have a gift for teaching
A great series so far!!
Any plans to make an updated series about REST Api’s? Would be a great help for MERN apps :)
I bloody love this guy!
I seriously love you man
What an amazing Lesson i've learned from you God bless you , but as a suggestion why don't you create another new playlist for Node.js i mean with React not in EJS
Hey! great content, just had one query, I have made some frontend web-apps using reactJS which did not require any backend service nor any Database, now I wanna use some nodeJS API and Database to fetch some information for the web-app, how should I proceed? I'm willing to start-over.
Extremely helpful, thank you very much
"That's pretty simple" hahah I love when you say that after me already having a headache trying to keep up hahahaha. Great job Man !!!! I learn a LOT from those videos.
Aha, happy to hear it's helpful :) thanks for your support Alex!
Awesome tutorial, curious to know if it can be binded with angularjs, is that also covered in any tutorial ?
This is so cool !! keep on the hard work :)
AWESOME as always 😍😍😍
Are templating engines still relevant? specially if i plan to use the MERN stack?
You are the best teacher I have 💙💙💙💙💙💙
Beautiful. Thank you very much sir.
I'm not sure if you are going to see my comment, but I have to say it. I watched a lot of Node.js videos and all of them were just a speed run through the whole topic. So I want to say thank you so much for the detailed video. You got a new subscriber.
If you did see my comment, can you please tell me how do you get intellisense and highlighting for ejs. I tried EJS language Support extension but it doesn't give me javascript intellisense . Thanks again.
Thank you so much for such awesome videos
Hi Netninja, kudos for the fantastic course!
I am curious which extension you are using for your ejs to automatically call the javascript function while editing the ejs file?
you can use JavaScipt EJS extension by DigitalBrainstem
May you live long and healthy dude god bless you
Thanks I got some basic idea about backend .
Plzzz grab more courses on backend so we can work on real time. Also plzz create one real time app in the course so we will Get an idea .
Plzzzzzzz ♥️
Great course! What theme do you use on vs code? because I passed 15 minutes searching a good one but I found one that isn't good like the one that you use
you're so good I wanna learn things I already know again
Following along with Pug. I really love Pug and it's not too difficult to use along with the tutorial.
EDIT: You have to go to the branch corresponding to the lesson. Styles are on branch lesson-8.
I am from Nepal learning web development from You . Your content is amazing.
Thanks Ramesh, big love to Nepal! :)
Can we code together
Dude, Episode #7 and I completely understand everything you have taught.
Awesome :)
best node.js tutorial ever
thank you for this lesson 💙💙💙