32:14 1. Simple a Static Site 40:40 2. JavaScript to Render Content 52:21 3. Templating and Abstraction with a Static Site Generator 1:24:09 4. Content Sourced from an API at Build Time 2:02:17 5. Localised Content Render at Build Time, Routed at the CDN 2:28:08 6. Client-Side Render of Targeted Content with Browser and Content APIs 3:19:50 7. Bonus: How to Gradually Introduce the JAMStack to your existing infra
Best tutorial I have came across on CZcams, for literally anything, thank you so much. It's long but not a moment is wasted and its just the right length to solidly demonstrate the key concepts of the topic.
Really awesome introduction to JAMStack, thanks a lot Phil. I've got a general overview of what JAMStack is, not only from a theoretical point of view but also from the practical one through all the examples, using eleventy as Static Site Generator(SSG), a SSG that I hadn't heart about until this video, Gatsby and Next are probably the most known ones. He goes from basic concepts of how we thought about sites years back and the infrastructure around it: LOAD balancer, WEB server, Databases, etc.. to the JAMStack model using CDN and different tooling. Then Phil codes and shows different JAMStack sites examples, from the most basic one to a full example using Static Site Generator, Client Side Rendering using serverless functions and how to even configure the CDN to customize the views based on the customer location. Really awesome JAMStack course, thanks again Phil.
this was just on the spot, not too hard, not too general, very precise and distinct. Just a super-helpful tutorial and a great sum-up. Thank you Phil !
Great video Phil! Usually it takes me various attempts on different tutorials to get a grasp of a topic. But your content and delivery hit the spot first shot!
I was just thinking about searching whether FCC had done a video on JAM stack. Here it is! So my initial interpretation of what the JAM stack is, is basically adopting static site generators.
Thank you very much it's the best tutorial on the topic, I have been looking for a tutorial with clear concepts and examples for a long time, most of them on the web are ambiguous and only mention the JAM without clarifying the background architecture.
This video is simply MAGIC! Thank you so much for exceptional content for something that doesn't have a lot of data to start with. Greetings from Argentina. 💪💪
Finally, proper internet web development is becoming proper again. Not using node and all the bloated crap. Simple static coding to make complex websites is the way to go.
Loved this content, thank you so much for putting it out. But the cursor following the reading, and the not-in-show-mode Keynote and clicking between slides was distracting. I loved the deck design, but using the keyboard or a presentation remote, plus using color changes or other Keynote animation methods to highlight important parts (where you swirled the cursor) would have made it premium.
What an excellent video. It really helps make sense of the Jamstack by showing several variations. Plus, you will likely learn a few tips and tricks. It would be great if you shared your slides. I want to show some of them to my boss. :-)
When I run the script "npm run build" Dreamweaver starts up!!! When I exit Dreamweaver the script ends with no error messages BUT nothing is built - there is no dist folder. I'm stumped at this point.
I have a question: In example 4 you said there are some options to update the data (because of the pre rendering we always get the same news data). What are this options and how they are working?
Hello, your video is really amazing, I just find the 11ty documentation very bad; it is difficult to find even the simplest things like standard folder names or configuration options.
Awesome tutorial, this is exactly what I needed to crystalize my knowledge on the JAMstack. I'm in the localization chapter, and if you want to demonstrate how the site's contents will be reformatted based on the country. Why not use a VPN like Tunnel Bear to switch your location to a foreign country? In addition to demoing the power of JAMstack & netlify it'll be a nice way to plug a good product. PS I don't work for Tunnel Bear I just saw an opportunity to provide a solution to a problem :) Anyway, love the tutorial and I love the JAMstack architecture.
So, I'm about half way through the video. This is all new to me and I don't understand. So Jamstack is a concept / process of building a page? Not a program you are using to help organize the data?
Would a vue site with apis and cloud functions be a considered a JAMSTACK site hosted on a S3 bucket? It would be client rendered however, why would one want to SSR it, who wants to manage a server.
Am a web developer and a server administrator... Keep it in mind that only HELLO WORLD sites are built in tutorials.. Real world applications requires a server.. DON'T BE FOOLED. Either your using your server or some other service server. To me the only new thing here is the name JAMSTACK. Thank you❤️
@@freecodecamp what about the server that's responsible for cloud functions? Pretty sure that that's doing some heavy stuff depending on what code you are writing in it(some image processing, machine learning etc for example).
So i've found this content after a conversation first with cloudflare, and then with netlify, and I still cannot get an answer to the question which has led me to find this 'jamstack' in the first place, which is this: Can this jamstack address, completely, the problem of third party script penalties issued by google's lighthouse against such things as hubspot, facebook and, ironically, google's own tag manager script/s? These are third party scripts, which presents a HUGE obstacle to lighthouse scores. Anyone?
something I didnt quite understand, does the javascript API call happen on build time? or is it really calling the third party on run time? so what happens to SEO in this case?
We don't have a patreon (they take a 10% cut). We have our own donate page and thousands of people support us each month there: www.freecodecamp.org/donate
This is the third video about JAM stack that I watch and the longest. And I still don't understand how to generate pages for API. Author showing how to display news on main page but what the sence for it? How to generate separate pages for all news? Also I didn't realize if I can use this tecnology for making site with headless CMS. When I create a new page with CMS should I create new template on frontend? Should I deploy frontend every time I create new page? Oh, too much questions but no unswers and too much water in this video.
The video goes into a lot of detail. Could you use the method he used to create the country pages to generate separate pages based on the API you're using?
It's not another stack per se, it's a methodology for architecting an application. MEAN and MERN are both technically JAM, just one uses Angular and one uses React. And besides, I don't agree with the sentiment that "we have enough already." People are continually trying to solve the problems of the current way of doing things, which means new and better ways of doing things. If your MEAN stack is working just the way you like, then no need to change anything. But nothing's perfect, so people optimize stacks to do what they need for their apps, and I think that's just terrific. I just found out about Redwood and am excited about that. It's great there's so many options that you can take your pick of what will work for you, and the truth is that there is lots of overlap, and sometimes the nuances are lost on some people (myself included) which can make it feel like there's too much choice, but that's the open stack system for you, and I'd much prefer that to everyone using one framework put out by a single corporation.
I got tired of IT industry cause those kids are all the rave about using proper naming conventions in code. Only to release the product and name it after a snack, so that nobody who is not on the inside will have a clue what the product is for other than being edible. Once you are grown up, IT industry can be very embarrassingly childish to be in. So how many flavors does it come JamStack just hope i wont need a plug in called FruityNut. In Software Engineering deliberately naming objects aside from their use is called information hiding, so that all those folks naming their software after snacks are hiding their product from the public, in order to keep up with naming fad. Am working on product called HotButter, ill leave you to ponder its use. And for any kids out there, IT is best done at home or with friends, and not in an office, where you may be forced to work with kids who cry when mummy wants them to share thier toys, and who choose to name engineering products after snacks they wish mummy put in the lunch box.
@@aammssaamm Hey Buddy it was not a criticism of you personally , but rather a childish trend in engineering industry. Unless of course my criticism of this childish trend in engineering hit a raw nerve with you personally. In which case you might justify directing a personal insult at me for criticising a public trend. Are you sure you dont have more to confess than that.
@@andrewngotho Would you like a JamStack with that, but we also have a layerCake , you just have to pick a flavour. The layeCake comes with a side of JavaBeans
It doesn't have any subtitles. You can choose auto-generated subtitles in english and then have youtube translate them into portuguese but as they are auto-generated they might be wrong
32:14 1. Simple a Static Site
40:40 2. JavaScript to Render Content
52:21 3. Templating and Abstraction with a Static Site Generator
1:24:09 4. Content Sourced from an API at Build Time
2:02:17 5. Localised Content Render at Build Time, Routed at the CDN
2:28:08 6. Client-Side Render of Targeted Content with Browser and Content APIs
3:19:50 7. Bonus: How to Gradually Introduce the JAMStack to your existing infra
You are great
Best tutorial I have came across on CZcams, for literally anything, thank you so much. It's long but not a moment is wasted and its just the right length to solidly demonstrate the key concepts of the topic.
Really awesome introduction to JAMStack, thanks a lot Phil.
I've got a general overview of what JAMStack is, not only from a theoretical point of view but also from the practical one through all the examples, using eleventy as Static Site Generator(SSG), a SSG that I hadn't heart about until this video, Gatsby and Next are probably the most known ones.
He goes from basic concepts of how we thought about sites years back and the infrastructure around it: LOAD balancer, WEB server, Databases, etc.. to the JAMStack model using CDN and different tooling. Then Phil codes and shows different JAMStack sites examples, from the most basic one to a full example using Static Site Generator, Client Side Rendering using serverless functions and how to even configure the CDN to customize the views based on the customer location.
Really awesome JAMStack course, thanks again Phil.
this was just on the spot, not too hard, not too general, very precise and distinct. Just a super-helpful tutorial and a great sum-up. Thank you Phil !
Great video Phil! Usually it takes me various attempts on different tutorials to get a grasp of a topic. But your content and delivery hit the spot first shot!
I was just thinking about searching whether FCC had done a video on JAM stack. Here it is!
So my initial interpretation of what the JAM stack is, is basically adopting static site generators.
Thank you very much it's the best tutorial on the topic, I have been looking for a tutorial with clear concepts and examples for a long time, most of them on the web are ambiguous and only mention the JAM without clarifying the background architecture.
I'm watching this and following along. It's such an incredible tutorial, thank you Phil!
Wow!!! Totally Bombed...Many thanks Phil..you made me a new convert to JAMStack..Be safe wherever you are, in these times..take care
I
This video is simply MAGIC! Thank you so much for exceptional content for something that doesn't have a lot of data to start with. Greetings from Argentina. 💪💪
Just finished the course. Phenomenal! It's a gift to get to learn from an expert. Thanks!
Great tutorial! Very informative. I'm now interested in building my next project with JAMstack. Thank you for taking the time to educate people.
this "server" sounds good.$$$. can hear the excitement in this fellows voice. personally, i have a mighty fine desktop. $$$$
Thank you for the detailed tutorial. One of the bests on YT
Finally, proper internet web development is becoming proper again. Not using node and all the bloated crap. Simple static coding to make complex websites is the way to go.
I never enjoyed building websites, until I found jam stack. Now I build websites with react everyday ☕️
This comes at a perfect time :) thank you for the video :)
Wounderful video. Thanks!
This is really well explained, thank you!
Nice shirt ❤️ ... looks like a CEO 🥰
Loved this content, thank you so much for putting it out.
But the cursor following the reading, and the not-in-show-mode Keynote and clicking between slides was distracting. I loved the deck design, but using the keyboard or a presentation remote, plus using color changes or other Keynote animation methods to highlight important parts (where you swirled the cursor) would have made it premium.
Good tutorial! Thank you!
A brilliant and crystal clear introduction, thank you.
What an excellent video. It really helps make sense of the Jamstack by showing several variations. Plus, you will likely learn a few tips and tricks. It would be great if you shared your slides. I want to show some of them to my boss. :-)
When I run the script "npm run build" Dreamweaver starts up!!! When I exit Dreamweaver the script ends with no error messages BUT nothing is built - there is no dist folder. I'm stumped at this point.
Same here 🤷🏽♂️
*Awesome content* ❤️🔥❤️🔥❤️🔥❤️🔥❤️🔥❤️🔥❤️🔥
I have a question: In example 4 you said there are some options to update the data (because of the pre rendering we always get the same news data). What are this options and how they are working?
Thanks so much for this excellent video and presentation!
How do we configure auth in jamstack ?
Hello, your video is really amazing, I just find the 11ty documentation very bad; it is difficult to find even the simplest things like standard folder names or configuration options.
Great tutorial! Thank you very much!
This might be a noob question but will strawberry work?
Thanks!🙂
Well done! Thanks for sharing!
very very well explained, thank you sir
great video as always!
Eleventy is the SSG used in this video for those who want to know
yeah, even though I expected nextjs or gatsby earlier
superb explain..love from india
great loving so far
Superb, great tutorial thanks
Thank you! I'm new to Jamstack and you explained very well! Are the slides you followed available for download somewhere?
Thank you for the excellent tutorial.
I was doing great until 1:10:24 and ran npm run build. It came back with error. Anyone else have this happen? Or know what I can do?
Awesome tutorial, this is exactly what I needed to crystalize my knowledge on the JAMstack. I'm in the localization chapter, and if you want to demonstrate how the site's contents will be reformatted based on the country. Why not use a VPN like Tunnel Bear to switch your location to a foreign country? In addition to demoing the power of JAMstack & netlify it'll be a nice way to plug a good product. PS I don't work for Tunnel Bear I just saw an opportunity to provide a solution to a problem :) Anyway, love the tutorial and I love the JAMstack architecture.
Great explanation but upload volume a bit too low for comfortable listening with small laptop with internal speakers only.
شكرا
gracias
merci
thank you
Thanks
So, I'm about half way through the video. This is all new to me and I don't understand. So Jamstack is a concept / process of building a page? Not a program you are using to help organize the data?
I have never heard about this before... Okay , lemme learn
It's like 20 years old :)
thank you~~
Thank you for the great content! is there anywhere to access that presentation?
great tutorial! Are the slides available?
Did I hear that right?, No hosting needed?
That's correct. You don't need a webserver at all if you're just using other peoples' APIs.
Does it require previous knowledge in javascript?
Yes
How I can choose English subtitles instead of Indian language subtitles?
Would a vue site with apis and cloud functions be a considered a JAMSTACK site hosted on a S3 bucket? It would be client rendered however, why would one want to SSR it, who wants to manage a server.
this seems interesting >> what you have to think about it.?
Thank you.
Am a web developer and a server administrator... Keep it in mind that only HELLO WORLD sites are built in tutorials.. Real world applications requires a server.. DON'T BE FOOLED.
Either your using your server or some other service server.
To me the only new thing here is the name JAMSTACK.
Thank you❤️
There technically is a server involved in the JAMstack, but it is only serving static pages. The server does not have to run any code.
@@freecodecamp what about the server that's responsible for cloud functions? Pretty sure that that's doing some heavy stuff depending on what code you are writing in it(some image processing, machine learning etc for example).
lol
dumb VS Code question: what did you use to add the heart emoji? All the extensions I've found use inline :emoji: calls, but you just "blooped" it in
That's the emoji keyboard.
macOS: cmd + ctrl + space
Windows 10: windows + . (period)
@@emrec1009 I'd love to know how I can do that in Ubuntu 20.04, I saw some tricks, didn't feel convenient
So i've found this content after a conversation first with cloudflare, and then with netlify, and I still cannot get an answer to the question which has led me to find this 'jamstack' in the first place, which is this:
Can this jamstack address, completely, the problem of third party script penalties issued by google's lighthouse against such things as hubspot, facebook and, ironically, google's own tag manager script/s?
These are third party scripts, which presents a HUGE obstacle to lighthouse scores.
Anyone?
That CDN proxy at the end is interesting... but, it's like Cloudflare, except you don't have to verify you own the origin domain? That sounds sketchy.
How are people getting emmet to work in .njk files?
something I didnt quite understand, does the javascript API call happen on build time? or is it really calling the third party on run time? so what happens to SEO in this case?
Ah, at build time. The video should have just at lest (view source) to prove. Awesome tutorial
return [].concat.apply([], newsObjects) versus return [ ...newsObjects ] ; Can someone explains the difference?
Hello team I do want to contribute my tutorial on this channel ... How can I do that ?
Do they have patron .
If yess then please support them
We don't have a patreon (they take a 10% cut). We have our own donate page and thousands of people support us each month there: www.freecodecamp.org/donate
Does it require previous knowledge in javascript? Thanks!
You should have some knowledge in JavaScript, but it does not have to be a lot.
Would be great if the audio were louder....
1:30:00 CAT IS HUNGRY
volume could be louder
The volume is too low
Why don't you have Brazilian Portuguese subtitles?
what a surname !!!!
okay so where was i for a whole 3 years :0
Just, why?
It was going great until example 3.. you really started glazing over a lot of things without really explaining what you were doing.
2:28:12
Ok
You used something called "hub" but never explain how to install it. I've had no luck.
This is the third video about JAM stack that I watch and the longest. And I still don't understand how to generate pages for API. Author showing how to display news on main page but what the sence for it? How to generate separate pages for all news? Also I didn't realize if I can use this tecnology for making site with headless CMS. When I create a new page with CMS should I create new template on frontend? Should I deploy frontend every time I create new page? Oh, too much questions but no unswers and too much water in this video.
The video goes into a lot of detail. Could you use the method he used to create the country pages to generate separate pages based on the API you're using?
Improve the voice quality
you lost me at njk
Allie Sherlock
World does not need more stacks
As if MEAN, MERN , LAMP weren't end ugh lol
@JC S MY BAD
It's not another stack per se, it's a methodology for architecting an application. MEAN and MERN are both technically JAM, just one uses Angular and one uses React. And besides, I don't agree with the sentiment that "we have enough already." People are continually trying to solve the problems of the current way of doing things, which means new and better ways of doing things. If your MEAN stack is working just the way you like, then no need to change anything. But nothing's perfect, so people optimize stacks to do what they need for their apps, and I think that's just terrific. I just found out about Redwood and am excited about that. It's great there's so many options that you can take your pick of what will work for you, and the truth is that there is lots of overlap, and sometimes the nuances are lost on some people (myself included) which can make it feel like there's too much choice, but that's the open stack system for you, and I'd much prefer that to everyone using one framework put out by a single corporation.
@JC S +1
Thank you anyway, please no more stacks, there are alot of them
You are stack with them :)
I got tired of IT industry cause those kids are all the rave about using proper naming conventions in code.
Only to release the product and name it after a snack, so that nobody who is not on the inside will have a clue what the product is for other than being edible.
Once you are grown up, IT industry can be very embarrassingly childish to be in.
So how many flavors does it come JamStack just hope i wont need a plug in called FruityNut.
In Software Engineering deliberately naming objects aside from their use is called information hiding, so that all those folks naming their software after snacks are hiding their product from the public, in order to keep up with naming fad.
Am working on product called HotButter, ill leave you to ponder its use.
And for any kids out there, IT is best done at home or with friends, and not in an office, where you may be forced to work with kids who cry when mummy wants them to share thier toys, and who choose to name engineering products after snacks they wish mummy put in the lunch box.
oh boy, you must be badly missing your mummy and your lunch box.
@@aammssaamm Hey Buddy it was not a criticism of you personally , but rather a childish trend in engineering industry.
Unless of course my criticism of this childish trend in engineering hit a raw nerve with you personally.
In which case you might justify directing a personal insult at me for criticising a public trend.
Are you sure you dont have more to confess than that.
OK boomer
@@andrewngotho Would you like a JamStack with that, but we also have a layerCake , you just have to pick a flavour. The layeCake comes with a side of JavaBeans
i forgot to add , the replacement for google is now called GoDucklingGo. you cant make this sh*t up.
voice is tad too soft, and a tad hard to keep following.
Quite the intro.
Why don't you have Brazilian Portuguese subtitles?
It doesn't have any subtitles. You can choose auto-generated subtitles in english and then have youtube translate them into portuguese but as they are auto-generated they might be wrong