HomeОбразованиеRelated VideosMore From: LearnWebCode

Handlebars.js Tutorial (webpack integration at the end)

1373 ratings | 67705 views
Since the filming of this lesson webpack has changed their API so don't type out the exact webpack code you see on my screen. Instead, my GitHub link below has the newest code changes that will work. NOTE: in my updated version you do NOT need the dollar sign $ before the helper name in your templates. My front-end course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBEDEAL My new advanced WordPress course: https://www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=YOUTUBEDEAL "Follow along" code: http://codepen.io/anon/pen/qqPegg "Finished product" code: http://codepen.io/anon/pen/WoddJb?editors=1010 Webpack Handlebars Example Repo: https://github.com/LearnWebCode/handlebars-webpack Add me on Twitter for webDev updates and cat pics: https://twitter.com/learnwebcode
Html code for embedding videos on your blog
Text Comments (131)
Innana DM (8 days ago)
Wow,. Perfect! I followed step by step and def gained a clear understanding of how to write with hdb. Thx!
vijay kumar (1 month ago)
Awesome intro to handlebars :) Thank you very much
Preston Sparks (2 months ago)
Thanks very much! I'm taking a coding bootcamp rn and your vid was much easier to understand.
Robert Suttles (2 months ago)
This was very good. We need more from you! Between you and Mosh Homedani, I may become competent at Javascript someday...
Shubham Sudame (3 months ago)
What if there is no name of Json array in my JSON data?
Tactical Engine (3 months ago)
use the {{this}} method he mentioned.
Mike Harvey Ambait (3 months ago)
How do we access id or class of the element inside the script/template of the handlebars?
Celeste DIMANCHE (4 months ago)
This was very useful for me, but what about using handlebarsJS partials and templates should I use/include them as you did for helpers? thanks in advance!
Santi Nunez (4 months ago)
It was very helpful, thank you very much !!
Mike Deluxy (4 months ago)
What a great video. Thanks for this. :)
artifactingreality (5 months ago)
crap video
Johan Witters (5 months ago)
Many thanks! Finally someone explaining things properly, condensed, to the point. Thank you sir!
M Zubair Haroon (8 months ago)
Great tutorial, I've a problem, the webpack 4 doesn't work with fallback in webpack.config, <h3>{{$calculateAge birthday}}</h3>, can't make this work Thanks
SumWin Liew (8 months ago)
Purrsloud is 2 year Old now.
Rachana Prakash (9 months ago)
This is great!!
scooterphoenix (10 months ago)
WOW, single quotes and double quotes matter in handle bar templates?
Trang Nguyen T. (10 months ago)
Thank you so much for you helpful video.
Kaimura 92 (10 months ago)
Why would I use that new complicated handlebars.js instead of just putting in an easy String that contains all the tags (like in that previous ajax/json video)?...
weissRussian (10 months ago)
You would want to use handlebars if your application requires logic and has a lot of elements. Handlebars basically allows you writting plain html code for the templates without looking after all the special characters, looping, if-conditioning and so on.
Sebastian Nielsen (10 months ago)
What does bundle.js? Is it like a js file with all the modules combined in that?
astha prasad (10 months ago)
awesome tutorial!! thank you!
Aayushi Mishra (11 months ago)
dude!thanks a ton!!!...i was so new to handlebar js.....you made it so easy for me....:))))
Huy Nguyen (1 year ago)
Great tutorial. Is it possible to make a individual page for each pet? For example when click the image or title of the pet it will go to the individual page to view more information about the pet.
Todd Sutherland (1 year ago)
this is the most succinct and logical tutorial on the subject that I have found online. Thank You!
Jean-Philippe Lauzon (1 year ago)
Dude! You got the little something! Bravo!
deodatus fink (1 year ago)
Good stuff. Thanks mate.
Johand Van. (1 year ago)
Great ! Thank you so much
Abdus Samad (1 year ago)
nice tuts
Daniel (1 year ago)
I can ride my bike with no handle bars. No handle bars. Nooo handle bars.
Erin Highbaugh (1 year ago)
Just wanted to say thank you for making all these videos. All your videos have been immensely helpful. I really like how you keep each video concise (not going over basic concepts in every video), but you still take the time to explain exactly what you are doing.
Matthew Davies (1 year ago)
I watched your JSON & AJAX before this, but did you also make a video for the CSS styling that you did in between these two videos?
What is your js editor?
LearnWebCode (1 year ago)
In this video I'm using Sublime Text, but very recently I've started using Visual Studio Code. I just posted a video on VS Code a couple of days ago that you might enjoy.
Jaimy Michiels (1 year ago)
fck sake u scared me there at 21:40, try using a transition next time :p
Wilfredo Mendez (1 year ago)
Simple ans easy to follow, thx for a another tut.
Sophia Sheref (1 year ago)
thank you so much! it was very helpful!
Dan Krueger (1 year ago)
another excellent video. i’ve been using handlebars for 6 months and still didn’t understand it because the documentation is so non intuitive. Lost me on the web pack stuff though
Dan Krueger (1 year ago)
another excellent video. i’ve been using handlebars for 6 months and still didn’t understand it because the documentation is so non intuitive. Lost me on the web pack stuff though
Andres Uribe (1 year ago)
Very useful, very clear, thanks a lot.
7 Days in sunny june (1 year ago)
Great stuff Brad, that's why I bought your Udemy course, it's worth every penny!
Erikari (1 year ago)
Thanks for teaching me Handlebars and Json :D
Christoph Senn (1 year ago)
It was a very helpful tutorial for my web project so thank you very much. My question now is about how to do a if helper function for to filter species. Like display it if species=cat, hide if species=dog... that would be very great for me...
Abul4u (1 year ago)
Thanks a lot... very helpful. Please create more videos on WP rest api with angularjs 4 Thanks in Advance
Jennow (1 year ago)
Thank you so much
ARIVILIAR (1 year ago)
Funny, crystal-clear explainer. I love your videos, keep it up dude!
Caged (1 year ago)
Purrsloud is now 1 year old.
Krisna Worka (2 months ago)
Purrsloud is now 2 years old
Mehdi Azhar (1 year ago)
Hey! Love your work. In this video I am not being able to see the <h2> element, i.e. in this case the names of pets, even though I have followed each and every step thoroughly. Please help?
Mike Gmez (1 year ago)
Thanks buddy, very simple and useful. Keep it going !!
Leo Tamim (1 year ago)
webpack integration at the end makes this tutorial onair -- Thanks . But i have a question ? For large e-commerce business web application can i use this kind of templating structure and is it's performance will be ok ??
Yavor (1 year ago)
I have a big problem. The first cat is now more than 1 year old so I cannot use your if else statement to display "less than an year old". :( Other than that, an excellent tutorial!
funzo88 (1 year ago)
You can still test the if statement by saying "if (age == 1)"
Kavya Rani (1 year ago)
I got this error WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.resolve has an unknown property 'fallback'. These properties are valid: object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? } Can you tell me which is the alternative for fallback?
Simon Lee (1 year ago)
Hi Brad. Awesome tutorials. I was just wondering - was Handlebars partly inspired by Angular/React/Vue (or perhaps vice versa)? I'm a newbie, but I'm noticing some similarities between the JS frameworks.
alfaiz momin (1 year ago)
Can we use handlebars.js to separate our Header and Footer and include them in all our html pages?
vishal thapa (1 year ago)
Superb!!
Mohammed Kamel (1 year ago)
can you create a tutorial for angular 2
Mohammed Kamel (1 year ago)
awesome Tutorial , you have great way to explain things
Isaac Sogunro (2 years ago)
awesome!
Cristopher Rivas (2 years ago)
Very useful! thanks !
Peter Fu (2 years ago)
For those who are using webpack version 2, use this code below otherwise you'll run into the these 2 errors :) - configuration.output.path: The provided value "./js" is not an absolute path! - configuration.resolve has an unknown property 'fallback'. var path = require("path"); module.exports = { entry: "./js/main.js", output: { path: path.resolve(__dirname, "./js"), filename: "main-bundled.js" }, resolve: { modules: [ path.join(__dirname, "./js/helpers") ] }, module: { loaders: [ {test: /\.hbs$/, loader: "handlebars-loader"} ] } };
Hanmant Arsid (2 years ago)
thoroughly enjoyed this video. Thanks !!!
Thanks a lot for the whole series of vdeos. Learned a lot
rebootingg (2 years ago)
This explains everything so clearly. Thanks!
Amen Ra (2 years ago)
Hey this is a great tutorial, but it needs to be updated to reflect the changes in Webpack version 2. In the configuration file the way you output your bundle is different. And reslolve no longer has fallback, now it is an array resolve.modules
GreggsWorld (2 years ago)
Thanks for this video! Im a little stuck though... I have everything working except for the resolve.fallback, the log spits "Helper Missing". *my helper is in folder: js/helpers/calculateAge.js *my template.hbs is in js/modules/myTemplate.hbs *my webpack config inside the resolve is: fallback: path.join(__dirname, "js/helpers") -> if i log the path it is correct and i have tried various varieties. * I copied your: calculateAge.js, myTemplate.hbs, ajax code - all from github * If i remove calculateAge from the template everything works My webpack config is: var debug = process.env.NODE_ENV !== "production"; var webpack = require('webpack'); var path = require("path"); module.exports = { context: __dirname, devtool: debug ? "inline-sourcemap" : null, entry: "./js/main.js", output: { path: __dirname + "js", filename: "main.min.js" }, resolve: { fallback: path.join(__dirname, "js/helpers") }, module: { loaders: [ {test: /\.hbs$/, loader: "handlebars-loader"} ] }, plugins: debug ? [] : [ new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), ], };
Michael Avnyin (2 years ago)
Love your vids dude you are for sure an incredible mentor to the young devs! @LearnWebCode I see the power of handlebars but curious why/when would I use handlebars? Some practicle/real world examples? Thanks!
R Nair (2 years ago)
Thank you! a million times.. :)
Arnab Roy (2 years ago)
it helped a lot...thaks
Ben Marley (2 years ago)
Really helpful tutorial. Thanks!
kabadanke (2 years ago)
Thank you so much! You're a great teacher :) Subscribing!
Crazy Lazy (2 years ago)
Thank you, Brad...
aditya wisnu (2 years ago)
so awesome !!!.. subscribed. cant wait your next tutorials
eXtremeFX2010 (2 years ago)
Great Tutorial, followed it with no problems. Quick question: How would I load the json data into DIV wrapper container via user clicking on a link instead of page load for handlebars.js to show data. Is there an href or link helper that when the user clicks the handlebars.js link, the data is loaded? Is there a code snippet or tutorial somewhere that demos this? Thanks so much.
BIGDRILL (2 years ago)
You've probably already solved this, but you could use an event listener on all/specified anchor-elements and load the (JSON) data into a handlebars template whenever a user clicks the link element. Afterwards you could just target the DIV's innerHTML-property and override its value with the rendered template.
Nguyen Duc Hoang (2 years ago)
Very useful
Will La (2 years ago)
Noob here. Why do you target an empty div? Please provide both technical reasons and a conceptual explanation of why.
Ehnoxx Ggan (2 years ago)
Yea, it's just there waiting for some data to be appended to it. If you styled your div with some paddings and background it would show up in the website, but it will still be empty. The data from another source is up to you. Hope it helps :D
Will La (2 years ago)
Ehnoxx Ggan Correct me if I understood this wrong. So the empty div does not show on the website or have any styling. It's primary purpose is to "load" the data from another source?
Ehnoxx Ggan (2 years ago)
I'm not good either but here's my answer, well you can target divs which are not empty as long as it has the ID in it. Its for the tutorial purpose I guess? But in real life you'll always target your own empty div where you will append your data from a dynamic source.
hazlee seruji (2 years ago)
do you have handlebars.js using google spreadsheet tutorial instead of json?
Fahad Kassim (2 years ago)
This is just awesome #StickyBubbleOnGooglePlay
Thomas Delmond (2 years ago)
All the pets are now 1 year older, so the cat trick (less than 1 year old) isn't used anymore ;) (maybe a quick update on the JSON file ?). Thanks for the tutorial !
Vincent Ngu (1 year ago)
module.exports = function (birthYear) { var age = new Date().getFullYear() - birthYear; if (age == 1) { return age + " year old"; } else if (age > 1) { return age + " years old"; } else { return "Less than a year old"; } };
Radu Constantin Miron (2 years ago)
awesome! thanks!
Joory Al Hamed (2 years ago)
A million thanks. I was in need to such an obvious video. Don't stop teaching!
Jachen Carl (2 years ago)
Thank you very much for all your time and enthusiastic tutorials. Your language is so clear that I asynchronously can take advantage of learning english as well. Leting animals be part of your lessons makes you very sympathic. Bravo!
Blu Strikes (2 years ago)
Hi brad, thank you for your 'html' and 'js' tutorials. I so want to complete this particular tutorial, however I am stuck 16 seconds in. It keeps telling me that I have an error. I have copied the JSON pets-data.json to a the letter, but do not know what I am doing wrong, Here is where it tells me I am wrong.. {  "pets" : [  <--- Please can you tell what is wrong here oline 2 of the .json file. My console.log tells me it's an error. Why..?  so frustrated.
Amro Osman (2 years ago)
Blu Strikes get the code from the description
Blu Strikes (2 years ago)
Hi, thanks for your help, just a quick reminder that I copied his code to a 'T' and it's telling me that my code on "LINE 2" which consists of;- line 1 { line 2 "pets" : [ <--- just these few letters is wrong. says my code here on line 2 there is an error. why? ...plus the rest of the text from here is copied out to a T ...
Amro Osman (2 years ago)
Blu Strikes actually you have reversed the open bracket with json start with [ and end with ] in between will include { } separated by coma's so your json should look like . [ { "data" : "value"} , { "another data" : "value 2" } ]
Christian Vanhenten (2 years ago)
Really all your tutorials are incredibly clear, well builded, nice to hear/look at: probably the best tutorials in this domain, thanks
inagreen (2 years ago)
Hey Brad, I find your courses to be extremely engaging and useful. Possibly one of the best I have seen around so two thumbs-up. Having said this, I have recently taken an opportunity where Ember.JS is the framework of choice for developing web apps and find it difficult to master/ understand. Is there any chance you could make a tutorial/ video/ courses on Ember from beginner to expert level? Thanks!
Raihan sidi (2 years ago)
wow i never thought js was easy, thanks man
Oussama Amassuo (2 years ago)
funny thing, before i get to this video, the cat grow old !!!! it's 1 year old (2017 - 2016 ) , i know u intended to show how u can call function & pass argument, in handlebars
Oussama Amassuo (2 years ago)
i was tired of trying to learn handlebars on my own, Thank you man !! subscribed, & looping through videos :)
Mark Atherton (2 years ago)
Hi Brad, following along fine with your tutorial very well explained - however when I try to use NPM and webpack for workflow in the last part of this tutorial - the terminal command "npm install handlebars handlebars-loader path --save-dev" it only generates the node_modules/ folder within my site. It does not create a package.json or a webpack.config file in the root of my site. Did you create these files manually or have I missed something? Thanks, Mark.
Mark Atherton (2 years ago)
Oh I just made a public git repo of this tutorial you can access at https://github.com/matherton/handlebars101 thanks
Rory O'Connor (2 years ago)
I found this to be very helpful and concise. Paced very well too.
Jitesh Bamania (2 years ago)
thanks for lesson..
Sanjayreddy Guna (2 years ago)
Very happy to subscribed your channel, maintain the same quality bro.
Sanjayreddy Guna (2 years ago)
Awesome Explanation Bro, appreciate your noncommercial help.
Christopher Li (2 years ago)
what if the registerHelper function name has the same name as the property of the object of the JSON file.What will happen?
Kyle Koivukangas (1 year ago)
try it and see what happens, you learn a lot from trying to break things like that. (It will run as normal, I tried)
Oleh Savchuk (2 years ago)
Thank you so much for taking time to explain everything. You bet, we learned everything you said! Awesome vids!
Kathy Toufighi (2 years ago)
excellent!!
Andrzej Cuber (2 years ago)
This is grate! Thank you for your time given to us. Thank you for sharing your knowledge with us.
ARIVILIAR (1 year ago)
Andrzej Cuber Polski?
essam salah (2 years ago)
is this ending of course or there are other videos ???..sorry for my bad english
Jay Pick (2 years ago)
Great tutorial, thanks!
Ken Jones (2 years ago)
Hi Brad, I can't figure this error out: "hb.js:21 Uncaught ReferenceError: Handlebars is not defined". I'm stuck at the first Handlebars test 11:27 into the video. I have tried quite a few things, even pasting in your sample code to replace my typed version. I have tried both the Handlebars.runtime and non runtime packages. I have moved the script tag around in the html doc. This error persists. What can you suggest?
gmcfadden100 (1 year ago)
Same issue for me
Sriharsha Daram (1 year ago)
Hi Brad, I am getting the same error. Handlebars.compile is not defined. Why is this coming? I have placed the js file reference in the script tag. Can you please suggest. What is non-runtime package. How to use it. Thanks.
Sanjayreddy Guna (2 years ago)
As he explained, copy and paste handlebar.js file in js folder, this worked for me.
Ken Jones (2 years ago)
Awesome! You are super supportive! Thank you it works!!! I will try your tip and practice/test in CodePen. I hope my ability to spot details in the code improve. Guess I need to practice, practice, practice.
LearnWebCode (2 years ago)
Also, if you want to test directly in CodePen (instead of copy/pasting to local files) you can remove the reference to the handlebars package in your CodePen HTML, and in the CodePen JS tab, if you click the gear/settings icon, towards the bottom of the pop-up screen there's a "Quick-add" menu and you can choose Handlebars. Makes testing right in CodePen pretty nice!
Faycal Faycal (2 years ago)
I just don't understand why people will give a thumbs down to this video? You know Its a free tutorial! Thanks @LearnWebCode I've been following your latest 30 min series and I learned a lot (especially the JSON/AJAX video). Thank you so much!
Round About (2 years ago)
The video is great. I did learn something
Julien Bucaille (2 years ago)
Hey there! First of all, thanks for everything you do, you truly are the man! Second of all, could you maybe give me a little hint of what I'd have to do in the following situation: What if I wanted to output a single pet in the container and then on click of a button dynamically change the content to display another pet by its name in the array of my JSON-file? Thanks!!
MasterCharlz (2 years ago)
Hey Brad, I love that you included all the setup stuff in a codepen! Made following along super easy!
Richard Dale (2 years ago)
I just want to reiterate what a few others have said. I know its easy to say but I really mean it when I say your tutorials are great. I've just been doing your Udemy course and although I knew a lot of the course, you've given me a much better understanding. Keep up the fantastic work, it really is very much appreciated.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.