Node.js Crash Course Tutorial #7 – View Engines
- December 28, 2023
- Posted by: MainInstructor
- Category: Go JavaScript Node PHP
Video Title: Node.js Crash Course Tutorial #7 – View Engines
Alright the gang so in our app so far currently we’re just serving static HTML files back to the browser and by static I mean all of the content is predefined and it doesn’t change now sometimes we want to inject some kind of dynamic data into our resulting Eastvale for example
That could be data from a database like blog posts or it could be user data that we want to show on a profile page so how would we output dynamic content or data in these kind of templates well to do that we can use something called a view
Engine or a template engine and this is something that express ups can use really really easily so it’s another massive advantage of using Express to build node websites so view engines let us write HTML templates are very similar to this in an HTML syntax but also allow
Us to inject dynamic data and logic into them like variables it checks loops and then we can serve the resulting HTML page with that data to the browser so there’s a few different options that we can go for when we’re choosing a templating engine we could use something
Like express handlebars which is quite popular also something like pug which is really quite different from HTML actually so we’re not going to go with that or something like ajs which comes with a lot of nice features and it’s really simple so this is the one that
We’re going to be using going forward in this tutorial some of my friends the first thing we need to do is install ejs so that we can use it so I’m going to cancel out of this process then say npm install ejs and that should save it to our
Dependencies over in package.json or right here ejs we can see that okay and now we have to say we want to use EJ s as our view engine of choice for this application so we do that at the top after we’ve created the Express up so
I’m going to do a little comment here that says register view engine and to do that we use app sets and app set well lets us configure some application settings and one of those settings is the view engine that it uses and we’re going to use the EJ s view engine so now
It knows that EJ s is going to be used to create our templates now that we need a place to create our different ejs views now automatically Express and EJ s is going to look in the views folder for those so that’s the default value of
Where it’s going to look so if we place all of our EJ s files in here we don’t need to do any more configuration however if you want to create a different folder called something else then you can tell Express what that folder is going to be called by going
Down here in same app sets and using a different configuration setting called views and then the second argument is going to be the name of the folder where you will keep your views for example my views and now Express would know to find your views in here and it would look in
Here instead of just views so I’m not going to do that I’m going to place all of my views inside this folder right here so how do we create these views they’re very similar to HTML but they have a different extension so the first thing I’m going to do is actually delete
All of these three files I don’t want plain HTML anymore and instead I’m going to create an index ejs view like this so all I’m gonna do inside this view is just paste some HTML and this is pure HTML there is no ejs specific code here it’s just like having a nature
I’ll file exactly the same so you can see we’ve got a head right here with a title and inside the body we have enough and that nav has two parts it has the site title on the left and it has a ul which is the nav on the right now the
Reason I’ve given these classes is because later on we’re going to style these a little bit so inside this site title we have an anchor tag which goes to the home page and there’s an h1 inside that and this is blog ninja now we also have a paragraph tag under that
That says this is a net ninja site I realize that’s very egotistical of me but nonetheless below that we have enough right here and there’s three links there’s one to the home page which is ultimately where we’re going to show all of our blogs there’s one to the
About page and there’s one to a new page which we have not yet seen and we’ve not yet created or configured and that’s going to be to a forum page to create a new blog so that will be forward slash blogs forward slash create okay so
That’s the nav done right there and then under that we have this div right here with the class of blogs and also a class of content again so we can style this later on and then finally an h2 inside that that says all blogs so ultimately
All of our blocks are going to go underneath here and that’s going to be the dynamic stuff that we do in this template file later on for now let me just save this and show you how we actually serve this up to a browser as a
Response so if we go back to apt is no longer inside the home routes handle it right here do we want to send this file instead we want to do what’s known as a render a view so I need to replace that with the render method this is how we
Take of you render it and send it back to the browser and all we need to do is say what this view is called – the extension well this one is called index so that’s all I need to do I need to just say response render index and now
Express is going to look inside this folder does it reviews folder automatically it’s going to find this it’s going to use the ejs view engine to render that and send it back to the browser so let’s see if this works I’m going to first of all open up my
Terminal and say no daman up to run this and then I’m going to go to the browser and go to the home page and we should get that template which we do now then let’s do the other files we need one for about and also one for the
404 and then we’ll create that create page as well where we’re going to have a form to create a new blog so then well let’s first of all do about dr. ejs and in here again I’m just gonna copy this code and paste it in because I know you
Probably don’t want to see me type out HTML this is not an HTML course but again it has the same head with a same title and it also has exactly the same nav here with links to the home phone slash about and then forward slash blogs
Create and then final it for the content of this page it’s just ad for the class of about and content and h2 and some lorem ipsum or right here so that’s the about page and everything that’s identical to whoops the index page all of this is identical the only thing
Different is the actual content at the bottom so let’s save that we also need our 404 page so let’s do 4 or 4 ej s and again I’m going to paste this in again this is pretty much identical to the other two pages all of this is the same
But we have this div at the bottom with a class of not found and contents and we have this message in the middle now notice all of these divs they all have a class of content this one does this one does and oops this one does right here
And that’s just so we can style them all the same way with one single CSS selector later on alright so we have those three pages done and let’s go and render those right here so instead of this we can say response dot our render and we’re going to render it this time
The about view and then down here at the bottom instead of all this we want to take that off we’re going to keep the status because we still want to set that to 404 but then we can say dot render and we want to render the 404 view so
Let me just test this out come over here to the browser and let’s try clicking these links if we go to about then it takes us to the about page if we go to another URL that doesn’t exist then we get the oops page not found this one still doesn’t
Either the forward slash blogs forward slash create URL because first of all we’ve not created a handle a function for that and secondly we don’t have a view for it either so let’s create a handle of function for it first of all and I’ll do that just
Above the redirects so in fact you know what I’m gonna get rid of this redirect because we really don’t need it in our application anymore and let’s say instead app gets the URL is forward slash blogs forward slash create and this is going to fire a function we’re
Taking the request and the response object and inside here all we want to do is render something so we say response dot render now we need to create the ejs file to render so let’s do that new file and we’re going to call this create ejs
And then once more I’m just going to copy and paste this into this file dead simple form again all of this is the same we have the head the title the nav at the top exactly the same as the other pages the only thing different is this
Over here we still have a class of content but also create blog then we have a form and it’s dead simple we have a label for title and an input for the title of the blog we have a label for a blog snippet which is just kind of like
A preview of the blog if you like a sentence or something and we have an input for the snippet and then we have a label for the body and a text area for the body as well the actual content of the blog and then at the bottom we have
A button to submit the form so there’s no kind of functionality to this form at the minute we’re just purely outputting it through the screen and nothing’s going to work with it but we have at this form ready for later so we can add functionality to it then for now let’s
Just worry about hooking this up so that when we go to forward slash blog forward slash create we render this and we can do that over here by saying inside the render method we want to send back the create view all right so let’s give this a whirl so forward slash blog forward
Slash create click on that and now we get this form so now all of these links work and how simple was that this is how simple it is to create EGS files which is it’s just HTML at the minute and then render those right here and that’s
Easier than using that send file method and specifying a routes this way we don’t have to do any of that because it automatically it looks in this views for the forest now I know you might be sitting there thinking well actually it’s pretty pointless because we’re not actually doing anything different yet
This is just raw HTML but the power of ejs and other templating engines come to life when we start to inject dynamic content variables and logic into these views so then now that we’re using ejs templates how do we actually create dynamic content inside these templates
So it’s not just all static stuff like this well we use ejs tags and they look something like this they’re a bit like PHP tags so we can do an open angle bracket and then we can do a percentage sign and then we close them with a percentage sign and a closed angle
Brackets and then inside here now we could do some dynamic code so for example I can do any kind of JavaScript I could say Const and then name is equal to Mario like so now this right here is gonna run as JavaScript but it’s not going to run as JavaScript on the front
End it does that on the server right but now inside this template we could output the name somewhere if we wanted to so how do we output a value well let’s say for example I want to output it right at the top inside this div right here well I could do a paragraph
Tag first of all and if I want to add the value again I need my ejs tags so angle bracket and then percentage and then percentage angle bracket to close them but when we’re outputting a single value we need to add an equal sign at the opening bracket just after the
Percentage sign so when we’re just doing code like this that’s not being output to the screen it doesn’t matter we don’t need that but when we’re outputting the value to the screen we need this equal sign right here and then I could just output the name which is this dynamic
Value right here so let me save this and see if it works I’m going to save and a refresh over here and now we can see this name okay so we do dynamic code this way and we output a value this way now we don’t want to actually do that
Instead what we probably want to do is pass data from our app over here because ultimately we probably communicate with database get some data and then we want to pass that data inside this view right here so we can then output it so how do
We do that kind of thing well we’ll skip the database bit for now because we’ve not covered that yet instead I’ll just show you how to pass data from our handler into a view so say for example I want to output a dynamic value inside the title tag and
That’s going to be the title of the page well I could do that by passing through data as a second parameter inside this render method and that parameter is just an object now this object is ultimately going to get sent into this ejs file that we render right here and we can
Access therefore any of the properties directly from this object inside this file and output them so say for example I want a title property and you can call it what you want it doesn’t have to be called title but say I want a title property which is going to be home then
This object is being passed into this file right here so then we can access that property title inside this file and I’m going to output it right here so let me do a pipe symbol first of all and then output a variable remember we do angle bracket percentage equals and then
The variable name well in our case it’s the title we don’t have to reference the object first we just reference this directly and then we close our percentage and angle bracket and that is it it’s going to grab whatever value we pass through and output it or right here
Instead so let’s just preview that and the title by the way is this thing at the top so if i refresh now we can see now that title at the top and that’s been output cool so let’s do this for each page let me open up these other
Pages for or for abouts and also create and then if we go down here we need a title for each one of these where we render so let’s just paste these in and then come back to them paste and paste okay so the title for this is not going
To be home it’s going to be about the next one is going to be create a new block and this last one is just going to be 4 or 4 so 4 a 4 now we need to output the title in each one of these so let me
Copy that and paste it right here save it and I’ll write here and save it tedious I know what we’re getting there all right done now if I preview this in the browser we should see the correct titles at the top of every single page and if we go to 404
Then we should get that as well awesome so there we go that’s the basics of how we can pass data into a view and how we can then access that data inside the view but we can do more things inside ejs for example say on the home page
Over here if I want to pass through some blocks some dynamic data it could be an array of blocks then inside the index page I want to cycle through that array and output a bit of HTML template for each item in that array to display those
Blogs on a page well I can do that in ejs as well so let me close off these dudes right now and over here let’s now create some blocks now I’m just going to copy and paste this from my github repo paste it in right there and this
Constant blocks is just an array and inside we have three elements each one is an object and it is a separate block not very interesting blogs blogs nonetheless so they only have at the minute a title and a snippet and that’s all we’re going to output for now but
Later on we will output the body as well so let’s first of all pass this into this object so I could say blogs is going to be equal to the blocks above now because this and this are called the same thing I can shorten this just to blogs and it automatically assigns this
Value to this property then okay so now we can access this blogs property inside the index let’s go ahead and do that so we can output them so we’re going to output them down here underneath the h2 and the first thing I actually want to
Do is check is the length of the blogs over zero are there any blogs available to us because I only want to try and cycle through them if there are blogs available if this was empty like that I wouldn’t want to try and cycle through
Them it makes sense so we need to do and if check in here and we do that just the same way we do it in JavaScript so first of all remember we open up our angle brackets percentage we don’t need the equals sign right here because just doing some generic JavaScript logic
Not output in a variable yet inside here I’m gonna say if and belongs dots length remember we can access blocks because we pass it through and the length property is a property on an array if that is greater than 0 then we’re going to do something now we need to close off our
Ejs brackets right here because now we’re going to output some template so I’m going to output an h3 and also a P tag so the title is going to go in here and the snippet is going to go in here but before I do that I want to close off
This if block so I can do it at the bottom over here so I’m go break its percentage and then close off the if block and then close off the ejs tags right so we do our opening if right here and then we close it off at the bottom
In between we have our template so now only if the length of blogs is over 0 is it going to output this template if it’s empty it’s not going to do that now in actual fact we don’t want to just output one h3 and one paragraph site right
Because we might have three so in actual fact inside this if block right here we want to cycle through the blocks first of all and output this for each blog so I’m going to actually cut that and instead I’m now going to do some more
Code and that is going to be inside the ejs tags first of all and I’m going to say blogs dot for each that’s a method we can use on a race and it’s going to cycle through them so far each blog it’s going to fire a callback function and we
Take that blog in to the function now this right here I need to get rid of and I need to close my ejs tags because this is where I’m going to output the template right here and then I’m going to close off the for each by doing closing angle bracket and then closing
Parentheses like so close off our ejs tags as well so I hope this makes sense it might look a little complex at first but you will get the hang of it just know that we open up our JavaScript statements at the top and if they need
Close enough we do that again at the some in ejs tags both times so first of all we’re checking if the length of blogs is over zero if it is then we’re cycling through the blogs and we’re firing the callback function for each blog and we take in that individual blog
At a time so the first time around it’s gonna be this one at the top then this one then this one so it’s going to cycle through those and we’re gonna output an h3 and the paragraph tag in each case for each blog and we have access now to
That variable down here we can output that so and first of all I’m going to give this a class of title so we can style it later on so class equals title and then this a class equal to snippet and then inside the title I’m going to
Output a variable so we want to do an equal sign inside our ejs tags this time that’s what we do when we output in a dynamic variable and then I’m going to say I want to take the blog that we have access to and get the title property
From that remember they have a title property and a snippet so underneath that I want to output the snippet so I’m going to copy and paste this dude right here and I’m gonna change title to snip it and now this should work so well let’s test this out I’m going to go over
Here and refresh I’m going to cross my fingers as well to help this works and it does we have now these three blocks so that’s the title snippet title snippet and if we inspect this we should see whoops not that we want to inspect it in the console we should see that we
Get an h3 for each one and a paragraph tag h3 paragraph right so for each block were outputting this bit of template and that’s really cool we couldn’t as easily have done that in HTML instead we would have had to send back raw HTML and then
On the front end maybe access the data and then dynamically render content that way but this is a bit easier doing it this way right so now we’re cycling through the blocks if there are in it and outputting those but what if there aren’t any well let’s now make this
Empty and save it come back over here and refresh and we don’t see anything so maybe what we should do is add an else case to this if statement right here and if there’s no blogs we can output eh like there’s no blogs to display so where we close off the if-statement
I’m gonna say else and then open that up and then down here I’m going to close the else block inside ejs tags like so and then I’ll just do a paragraph tag inside which says there are no blogs to display all right so let me save that
And I’ll really flesh over here and now we can see there are no blogs to display but as soon as we have data inside the blogs again then it’s gonna get rid of that and show the blogs instead awesome so that’s pretty simple right that’s how
We can pass data through into a view and how we can output that data and also just use vanilla JavaScript inside these EGS tags to add additional logic as well like if statements loops etc so we’re now creating dynamic ejs templates with variables and logic inside them but how
Does this all work well our view files live on the server and where we want to render one through the browser that view file is passed into the view engine the EJ SVU engine to be processed now the engine looks for any kind of dynamic content variables loops conditionals etc
Then whenever it finds those it figures out the resulting HTML code for those parts and in the end it spits out a valid HTML page based on the template we wrote and then the HTML page with the resulting data inside it will be returned to the browser so this whole
Process is called server-side rendering okay then so if we look at our different views at the minute all four of them have a lot of the same content they all have this nav example which is identical on every single one of these views now that’s not really efficient because if
We then changed the nav in the future to add different links or change the links then we’d have to go through every single view we had and that could be above 10 it could be 20 it could be even 30 and we’d have to change that now in
Each and every single view so it would be nice to be able to create a file which held just this part of the template which is the same and then we can import this into our views where we need to because then if we need to
Update that part of the template in the future we just have that one file to update instead of all the individual views now fortunately we can do this with Express and ejs and those files that we make are called partials or partial templates they’re basically parts of a template that can be reused
In different views so what I’m going to do is create a folder over here and I’m going to call that partials and then we’ll create all of our partial files in here now we’re going to have one father now we’re also going to have one for the
Head and we’re going to create a foot as well that we can place at the bottom of every file too so let me first of all create a new file and I’m going to call this navigate AS they have the same extension there’s still just ejs files
I’m also going to create a new one called head dots ejs we’re going to put the head content in that and create a new one called footer ejs to okay so first of all the nav let’s go to the index page and grab that enough cuts it
From there and then go to the nav file if we can find it and paste it in here and that’s all there is to it so this nerve pasture right here now contains this HTML and all we want to do is use that right here in this possession in
This view file so the way we do that is by using an include function and we have to do this inside ejs tanks so open up your angle bracket centage and then close that off as well and then this time we need to do a minus
Sign or – at the end so I’ll explain that in a second but then we say include which is a function and then we need to pass through a relative path to this function and that relative path is to the file we want to include right here
Which is this enough so dot /to say the same directory then into partials then we want the nav dots ejs file so without putting a value right here yeah and why didn’t I use the equal sign instead well when we use the equal sign it escapes
Special characters and we end up with a string value instead of raw HTML now this minus sign doesn’t do that so whenever we use include we use this minus sign to output that value instead so now if we save that and go to the home page over here if we refresh there
Shouldn’t be a change but it looks like there’s gonna be an error let me go over here and open up this terminal now we don’t seem to be running the app so I’m gonna say no daman up like so and hopefully this should work now so if we
Refresh over here now we get it and this nav is still there everything still works so what we can do now is just copy this and go through our difference view files and where we see the nav get rid of that and instead replace it with this
Include statement or like so and this way now if we are updating this nav at any point we don’t need to update in four different files we only need to update it once right here so let me save that again and refresh to make sure everything is still working on all of
These pages which it is the nav is still there awesome so I also want to flush out the head as well as the nav so what I’m going to do is go to the index and I’m going to grab this whole head right here and cut it and I’m going to paste
It inside the head file like so now we just need to include it so let me grab this and paste it up here inside the HTML file now we want to include the head instead of the nav I’m going to copy that and I’m going to go to the other files
At the top and replace the head with this include statement instead save that and the same for 404 and we’ll save that one and then finally we want to do the same way that create and save that okay so that’s the head done and then finally
We want to do this footer now we haven’t actually created the footer yet so let’s flesh this out from scratch it’s going to be dead simple I’m just gonna do a footer tag which is a valid HTML tag and then inside I just want some kind of
HTML copyright notice so I’m going to say copyrights and then I’m going to use the code for the copyright symbol so ampersand first of all then copy and then the semicolon and then I’m going to say blog ninja 2020 so all this does is put out the copyright symbol in the
Browser so I’m going to save that and then we need to include it so let me grab this copy it and paste it at the bottom because I’m super lazy and change this to footer like so and then I’m going to copy this dude and go to the
404 and paste it in there save it and go to abouts we’ll do it in there as well and then finally on the index page at the bottom to save that and now if we come over here and refresh we should see the footer as well which we do and it’s
Going to be on all of the other pages too and even the 404 should work yep we can see that footer at the bottom and the nav and the head is still there as well awesome so that is how we create partial templates with ejs okay they’re my friends so there’s only
One more thing I really want to do inside this lesson and that’s just to add a little bit of CSS so that our web pages don’t look so crappy so what I’m going to do is first of all get rid of these ejs files because all of the CSS
Is going to go inside of the head because we’re going to use it on every page make sense to do it here so I’m going to do a style tag first of all and then I’m just gonna paste in these Styles they can all be found on my
Github repo remember the link to that is down below and it’s on the lesson 7 branch you’re gonna find this CSS inside this file the head EGS file so I’m gonna paste this in I will quickly go through it because there’s a little bit here the
First thing I’ve done is an input right here and that is importing a font that I wanted to use called nut o on Noto serif and I got that from google fonts right here so when you select a font in google fonts you can then get this import or
Right here and it gives you that URL okay so for example if I want to select this style right here and this one and then I go to M but you can get the import right here by clicking on import and then just grab in that that’s all
I’ve done and I’ve pasted it right here so we can use that font in our project now the body right here we’ve given it a max width of 1200 pixels margin 20 pixels top and bottom auto left to right meaning that this 1200 pixel column is
Going to sit in the middle and margin is automatically going to be applied left and right to equal that out it senses the content bit of padding then a font family which is this thing and then a max width as well which we don’t need because we already did that right here
So let me get rid of that then we do a bit of a reset on these different things right here P H 1 X 2 etc we strip away the margin and padding and the text decoration and give them a color of a dark grey we use a bit of flex on the
Nav so that the content spaces between so that one will sit on the left the title and the down will sit on the rights we give it a bit of margin a border and text transform the UL itself which is inside a now if we display that
As flex so that the different links sit next to each other and we justify the content space between so there’s a gap between each different link and we align the items to flex end meaning they’re gonna sit way over on the right incidentally if you want to
Learn about flex box and what all this means this is not the tutorial series to do that I’ve got a whole series on flex box so I’ll leave the link to that down below so you can see it anyway carrying on we have the Li where we strip out the
List-style-type and give it a bit of margin the h1 we increase the font size the nav P and the nav a we just give it a color and the font weight the footer again color align the text to the center bit a margin and at the h2 again a bit
Of a margin h3 just some simple styles here the content this is the stuff right here so if we go to a page and we see this this is the content div and it’s on every single page where the content is so all we’re doing is giving that a bit
Of a margin to the left and then for each individual page we’ve created these classes so for the index we don’t have any unique styles we need to apply yet all the details we don’t have that page yet the create styles are right here that’s the form so all we do any
Standing the form up a little bit to give it a max width of 400 pixels applying this margin so it sits in the middle we’re standing the inputs on the text area to give them a bit of margin padding and the width the labels display:block but a margin text area 120
Pixels in height because automatically they’re a bit smaller than that bit shallower and then finally at the button we’re making this a kind of ready color crimson text color of white bit of padding a border font size of 1.2 m/s which is slightly bigger than the default and then the cursor:pointer
Which is a little finger when you hover over the button so uses know to click it well okay so that is the CSS again apologies if I’ve rush through this but this is really not a CSS course and I did not want to bore you with it so
Let’s go over here and see how this looks inside the browser let me refresh and Dada this looks automatically better let me just zoom out a little bit okay so it looks pretty true to size and there we go there’s the title remember if we
Click on that then it goes to the home page this is the home page and that’s where we cycle through the different blogs remember inside the index or right here we have a link for that right here about this is the about page and new blog and there is the form and now
Everything looks a little bit nicer so feel free to work on this CSS add your own styles and if you create a design which is better than mine which is probably not hard to do it’s all then definitely you know leave your Styles down below and other people can use
Those as well so there we go now we have this Xpress up setup and we’re now using views and injecting dynamic content into those views now ultimately I want to get all of these styles right here and I want to place them in a separate stylesheet but right now we can’t really
Do that we will do that later on but in order to do that we need to talk about serving static files like CSS files and images and using middleware so we’re going to take a deep dive into that in the next lesson
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Can you answer me that how I hosting the web in the end this series of video?
really ❤ your video. thanks!
Definition of “teacher”.
very well explained
Dude, Episode #7 and I completely understand everything you have taught.
Hey! Thanks for this. It's a great tutorial and really refreshing my dusty node, express, ejs knowledge. I've got a question though which is that I decided I would create a css file and serve them through the app.js file. It works fine on all the pages with the exception of the 'create' page. When I copy and paste the code directly into the head like you have, it works fine. I suspect this has to do with the app.get("/blogs/create …) path. Is there a way around it? I was having a hard time formulating the question succinctly and coherently enough to do a google search for the issue.
Why ejs used jere ?
I wonder if there is any reason to use EJS, if you want dynamic content, rather than just make the plunge and learn how to use Angular or React?
cant find the source code 🙁
ninja hahahah legend
This is like learning from Tyson Fury. Well Done.
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!
your github is empty, where to get the files?
I'm getting the error Error: ENOENT: no such file or directory, stat 'C:UsersuserDesktopnode-crash-courseviewsindex.html', any help is appreciated! I might figure it out by tomorrow though
edit: i solved the problem, i was editing the wrong file
No words!❤
bunch of ass kissers, yes it s explained ok-ish, it s not ''ALL PERFECTLY CLEAR OMG'' , all in all it is like 33% clear; 33% ok-ish and 33% too fast paced and confusing compared to other vids that explain per example the data passing to views.bye
May you live long and healthy dude god bless you <3
Hi,
I'm not sure why you have "/blogs/create" as there is no "blogs" folder
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
Hi ninja! thanks for the great content. I'm following along your videos here and I have one problem. In the 'ejs view engine' section', the first part of the video, the HTML file you copied and pasted is not on your github. It seems that you only pushed the very end files in this video. The ejs files in the github (lesson 7) are different from what you use in the video.
I don't know if you're reading the comments, but if you do, could you please push a file for that too? Let me know if you're confused about what I'm saying.
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.
if anyone find any path error you can do this to make it right <%- include('../partials/nav.ejs') %> ya one more dot
☠
Basically, ejs===php except ? to %
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.
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 !
hi, i have a problem with the EJS tag. When i type it in my vscode editor inside the EJS file, it is considered as a text rather than a tag. please help me with this problem
Top man
Nice tutorials Ninja.
I would want to ask. I were using react with NodeJS, would I still need to use ejx?
Is there a way to add css in a separate file or it must be as 'style' element inside HTML ?
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.
Flexbox tutorial playlist: https://www.youtube.com/watch?v=Y8zMYaD1bz0&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG
I am from Nepal learning web development from You . Your content is amazing.
I'm hoping someone can help me figure out what I am doing wrong. When I try to run the code, I get an error in the Terminal that says "Failed to look up view "index" in views directory". I downloaded the ejs extension after reading the comments but that didn't solve the issue. The File name is 'index.ejs'
this is solution:
<%- include("partials/nav.ejs") %>
I have problem and include is not working .
SyntaxError: Unexpected token '.' in C:UsersAdministratordocumentstutsnode-crash-courseviewsindex.ejs while compiling ejs