JAMstack Course - Build websites that are simpler, faster, and more secure

this is a video about the jam stack a way of developing and deploying sites to the web I've been building things with jam stack for quite a long time I think actually before the term Jam stack was around and I've become really excited about the possibilities of using Jam stack and what it can do for us as developers and also for users as well so this is quite a long video I go into a little bit of depth and we start with an introduction to what the Jam stack is what the term is what it means and then also some of the advantages of the jam stack we compare it a little bit to other stacks like the lamp stack which is something that might be a bit more familiar to many web developers and then we'll start to look through a bunch of examples so there are six examples can practically showing taking one site from a single file a statically generated or aesthetically written with my own hands HTML file deploying that to a content delivery network but then evolving that page turning it into something a little bit more dynamic turning it into something that has things like localization and client-side rendering and other bits and pieces and so that's a set of examples that grows throughout the video you can jump into any of those points and jump straight into those examples or you can watch the kind of evolution of the whole thing as we go and then at the end of the video as we do a little bit of a wrap-up there's also another demonstration which looks at how you can start to use the gem stack in your own infrastructure so if you're already building sites using a different architecture how can you add gem stack next to that what's an easy route in to do that so there's an example of that at the end as well and at the end of the video there are also a bunch of resources and links for you to take a look at and I hope it's useful so let's get started and start to look at exactly what this gem sack thing is right then so we're where to begin well we're thinking about an introduction to the jam stack then it's probably worth our while just considering them and this is an approach to delivering websites and it's not the only one there are many many approaches delivering websites we've been at this a long time now as an industry and we've evolved a long way it used to be when we first started out this is an incredibly nice simple diagram to begin with it used to be that you know when when we started building for the web we'd we'd create assets we'd put them on a web server and then it would come along in a browser and we'd ask for stuff and then we'd get the stuff and that's that's a lovely situation to be in you know it's very seems very simple very straightforward now we'd have this relationship where we'd create assets put them somewhere that they'd become available and then when someone came along with a web browser and asked for those resources we'd simply deliver them to them and that was great and it stood it stood up well for folk for quite a while and and that was kind of nice and efficient but we soon ran into limitations in that you know these things were work but they were static they weren't they weren't able to be changed based on what people asked for so the experiences we were getting seemed to be quite static as well so we tried to add something new to this we started to add some kind of level of dynamism at the at the server level so now instead of just asking for stuff and getting stuff the server would do stuff as well we'd have this this can script this this logic that would would be executed at the server level for every request that would generate a view and then return it to the views er and that was great because it meant that as we were requesting things we could we could build things up on the fly so we wouldn't need to know every permutation that was being requested or we might need a head of time we could respond to the needs of the user and create something dynamically and return it but it did mean that the responsibilities of this server now were quite different you know now we needed to make sure that for every request that came in we had enough enough capacity here enough horsepower to be able to service every request and get something back to them quickly so that soon led to a slightly different scenario so we started to introduce different bits of infrastructure so rather than just having a single web server that was creating those views we started to add many web servers to handle the traffic and we'd perhaps put something in front of those web servers like a load balancer that would say okay well this request will go to this web server this request were to another web server can I share the load across those servers and we started to do more things like abstract where the data lived rather than the data being on these web servers as well we we start to say well let's let's abdicate the responsibility and share some of the load with with servers that are specific to that and abstract those out as well so we got to a point that a request from a from a page for a from a user for a page will travel through all of these different in bits of infrastructure gradually assembling a view that would get returned to the user into the browser rather than having something ready to go we also started to think about well maybe we could find some assets that are kind of just static and don't need generating on the fly and maybe we could put those in a different location so we started to introduce things like a CDN which is a content delivery network and networks give the machines geographically arranged so that wherever the user arrives from some of those assets can be served directly from there whereas others would have to go and go through this journey and get built up over time so all of this kind of added to the infrastructure and the pieces in play for serving the request of the user ensure it got complicated and you know we got more sophisticated and that kind of things we were building and our infrastructure got more complicated as a result luckily though you know we we've been learning we've been building new tools so we don't have to stay in the same picture that we've had for such a long time now we understand that the the needs of users have changed and what we what we expect to build has changed but so is the tooling that allows us to get there so you know a few things have changed browsers have gotten more capable you know the web browser that you'll be viewing this site in now is very different to the one that we were using at the beginning when everything was was a little bit simpler browsers a way more powerful way more capable than they ever used to be and we can we can use those to great effect also as a as a consequence of building so many sites for such a long time we as an industry of matured our processes and we've really got a lot better at the way that we build sites and the way that they we we can deploy them so we can start to make start to take advantage of these these maturing processes and also tooling has improved you know the things that enable us to to to generate our code to manage our code to deploy our code and all of the things around that that's all improved as well so we can evolve our approach as a better as a result of all of these things improving so let's get to this this small question then since we're looking at an introduction to Jam stack what is the jam stack well there's a couple of ways that we could we could answer that we could we get asked you know what does jump stack stand for and we could ask what does that mean and they first glance you think well these are the same question but but not quite let's let's let's dig into both of them in terms of what does jump stack stand for well the word has come about by you know considering JavaScript API sand markup to make up the the Jam of this Jam stack and certainly as we go through that this video will look at how we use markup how we use JavaScript and how we use api's to create experiences in the browser but there's more to it than than just what it stands for let's also consider the word stack as well for just for just a moment now what do we mean by stack in the first place well I think when we're talking about web technology stacks the stack is the layer of technology which deliver technologies which deliver the website or application it's the thing is the set of tools that make up that delivery so when we think about what it stands for well that's one thing but I don't think we're any the Y's are necessarily to to talk about what what does Jam stack actually mean and what's the result and how do we use it this is about the best definition I think I've I've encountered above Jam stack and that is Jam stack means fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN removing the requirement to manage or run web servers there's a lot to unpack there and we'll do that over the course of this video but I think this is this is a good descriptive meaning for jam stack pre-rendering the files so that you don't need to manage your web server later on is kind of a return to the capabilities that we might have had in this world but there's so much more that's come along to to empower things around this that we'll get to shortly you might think well there are a lot of stacks already you know I'm aware of different approaches of building things for the web there are all of these different stacks that we might choose from with different technologies and and that's that's fair but let's let's let's use one of them as a bit of an example just as for means of clarification and a bit of comparison so let's let's talk about glam stack for a little while now lamb stack that stands for Linux Apache MySQL and PHP and this is a very popular I think the most popular combination of technologies for building out a web experience that exists on the web at the moment and each of these these technologies plays a certain role and these other stacks that's you know we've listed up here effectively they play into that plays into the same kind of environment but some of these technologies are switched out but ultimately they do the same kind of thing we end up with a system where on a web server where we've got something that is delivering our operating system for us to build on in the first place we've got a layer for data access being MySQL here for a database and the services are tributed to that then we've got a layer for doing pre-processing or the actual scripting and processing and handling of the logic and assembling the views in this case it's PHP for that pre-processing layer and then some kind of web server that will do things like the HTTP routing and the actual serving of assets and passing things along down the stack to get the the resources we need now in the lamp stack you'll often find these things combined in a single web server but over time as load increases a typical thing to do is we'll we won't have one web server will have many web servers all running these bits and pieces and other described a few minutes ago and sometimes we'll start to abstract things like the data layer out of these but ultimately we're still looking at a stack which include reaches all the way back down to the operating system right the way through up to the the actual routing and the handling of the HTTP requests meanwhile if we to look at the jam stack as a comparison to that the stack looks quite different the diagram is a little bit different here but we're catering for the same kind of things we're still talking about HTTP routing and serving we're still talking about data access we're still talking about kind of processing in a runtime but a key difference here is that this runtime that the processing layer in effect the operating system if you like that lives within the browser here so we're not having to reach all the way down into an operating system that's provided to us by the the client that sir the runtime exists right there in the browser the API is the data access we've kind of abstracted that away that's kind of not part of our domain now there are api's that exist out in the ecosystem now that we can make use of which we don't have to manage ourselves we can request access to those via their API and we typically do that using JavaScript so that's why we get this this kind of Trinity of markup delivering content and then if needed we can start to use javascript in the browser to talk to api's and get get content and embellish and enhance the experience here in the browser they're still rooting and serving going on but typically in a jam stack world what we're doing is we're pre generating all of those assets they can so they can be served from a very simple static server or even better still a CDN and this is the kind of thing that can be managed for us it's almost like a service that's been completely abstracted away since there's no internal kind of clever logic logic here which is coupled to the way that our system in our application works so markup JavaScript an API is kind of moved the stack kind of away from the server and and and over here so jam stack really is about having things that are pre-rendered it's about leveraging the browser and the the power and the browser and the technologies available to us in the browser and it's about operating without a web server and all of these things bring us a bunch of different advantages we'll get onto that in a second but I just want to kind of put these two things back side by side for a second and consider you know what the stack looks like here in the depth of the stack that reaches all the way down to the operating system right the way up through the data the scripting and even the handling of the requests and compare that over here to to what happens with the jam stack where the stack is kind of moved up a level it's kind of closer to the browser is closer to the user we're not dealing with operating system infrastructure we're dealing with a runtime which is provided to us in the browser so that we can use JavaScript right there to do the dynamic things we need right there in the browser and sitting on top of markup and be able to call API s so this means that if we're if we're thinking about you know pre generating pre-rendering things working without a web server it feels like we're getting a bit closer back to this this kind of environment this kind of flow where we're pre generating things putting them somewhere that they can be found and then a request comes from a user to get the stuff and they give that back this this some kind of return to this simplicity was starting to get appreciated quite a long time ago Aaron Swartz has done a lot for the open web and lawful web project web development in general can coined this term he talked about bake don't fry in a blog post that he wrote back in 2002 has his instincts were tough and trying to get back to a place of more simplicity where things could be much more robust if only we could find a way to get to this point we were not building our response to a request every time frying it on demand but instead baking it ahead of time so it's ready to return and this idea of pre-rendering that we're talking about and having things ready to go for when they're requested and there are lots of reasons we might have motives for that I think about it as doing the work now so your servers don't have to do it later kind of enlightening the load and the complexity at request time and doing this work upfront and I also like to think of putting some distance between the complexity and the user again thinking about this this world where perhaps we're having to have moving parts or all of these stages when a request comes from a user knowing that with confidence all of these things will work perfectly every time and the transmission between these things is going to work perfectly every time and there's sort of complexity in and potential failure points there and the more we can reduce those and the more we can put distance between the user and that complexity the better and we'll talk about how we put that distance between those two things shortly being in a situation where we have a much simplified kind of hosting scenario where we've got pre-generated assets this hugely simpler format that simplifies deployments and I want to just kind of illustrate that point just a tiny bit so I've kind of adapted our diagram from earlier where we've got a request in a traditional stack that's maybe hitting a CDN but also hitting a load balance web server database service and the request goes through all of these things when we're talking about our development and our deployment of of our code and our content well that requires action being taken and updates happening to each of these bits of infrastructure sometimes there are many of these bits of infrastructure next to each other and so as we're deploying and developing and deploying our code we need to make sure that we can predictably update all of these things and they all stay in lockstep so that now the result is always going to be something predictable if we compare that to the situation with the jam stack where everything is pre generated and ready to go as a content delivery network it means that our process of development and deployment that's radically simplified that that is a situation where we're essentially updating one one resource in a known in a known and predictable way this unlocks all kinds of opportunities for us and one of those things is that we can start to use version control for everything now yes it's fair to say that we might want to do that in this environment as well and of course we do but when we're in a situation where we're building an own asset and putting that with that one set of assets in a single place it means that we can start leveraging things like version control and tools like git which we'll come to in a little while and start using that in our examples we can have the version control used for everything right down to the configuration of how the CDN works right through to all of our content all of the code and then that version control can reach all the way through to the hosting environment and through to the deployment process so that we are in have a very predictable way of updating and deploying our code there are a few other advantages of gem stack that I think are really important to call out and those are security performance and scale and I'll just spend a couple of minutes just just describing those just just in short so in terms of security and how does the gem stack improve our outlook for security for websites well as you might imagine from the diagrams we've just seen we get a greatly reduced surface area when we're we're working with the jam stack you know if we think about this comparison once again the kind of infrastructure we have in play and the kind of infrastructure we need to secure even against the requests that we know are going to have to pass through all of the simba structure and have code that executes in all of these different environments the more infrastructure we have and the more moving parts and the more code we have the more we have to secure simply put with the jam stack you know that there are fewer there are fewer moving parts in the scenario and I can't sometimes glibly kind of comment about the fact that there is no server more secure than the one that doesn't exist so getting some of this infrastructure and these moving parts out of the out of our hosting scenario just creates a much more unmanageable security profile for us and there are far fewer moving parts to attack moving on to performance well when we think about how we've tried to handle performance in our traditional stack that kind of stack though I've been illustrating well often what we'll do when we're trying to build out that kind of hosting environment to be very performant and to respond to requests quickly is we'll start to add some static layers to that and what I'm talking about there is I'm talking about caching so if we go back to our diagram once again you know at each level of the stack in order to try and speed up the process of this request hand passing all the way through the infrastructure and back every level we try and minimize the dynamic things we have to do here so a web server we might might look at well what templates are commonly used with what data and can we cache that response so it's ready to go when a request comes into it that reaches down as well into things like the databases where we might try and cache common queries for the data so a request that comes in there actually isn't doing something dynamic it's saying ah this is a common request so I can serve that statically and return that much more quickly that's true every level level through right through to the CDN where some assets are cached but some of them will need to be refreshed and updated or you can pair that with a jam stack every time we do a deployment into our CDN effectively we are updating the entire serving cache there are is no logic that we have to manage this kind of this barrier between what is cached and what needs to be dynamic and it's this logical separation at each level that adds complexity and adds complication to how we deploy and manage and maintain these bits of infrastructure caching is hard caching is one of those things there's universally understood to be hard in web development and this more you can simplify the model of the cache and ideally have something that takes care of that for you wholesale the better off we'll be but it's also interesting to note that know for all of the benefits we might you might sometimes hear about for a dynamic back-end the way we try and make it go fast is adding static layers into it and this is an again an area that will we'll kind of think about a bit later on when we talk about what truly is dynamic and what truly is static let's move on to scale so when we're talking about scale we're talking about you know how many how many requests can we can we manage with a particular piece of infrastructure traditional stacks add infrastructure in order to in order to cope with large scale in a previous life I I worked doing technical architectures for the large projects and it was always a tough question to say to answer how much how much will our infrastructure cost for this project because we kinda just needed to know well how much traffic are we gonna get and also how complex is it for us is it going to be for us to to handle of each of those a quest and requests and as a result how much infrastructure all we need adding infrastructure to include - - to handle scale looks a bit like this I mean certainly adding these caching layers that's going to help to a degree because that lightens the load on what needs to be be dynamically that work that needs to be dynamically done but knowing that there's going to be more and more traffic here at each of these levels and the result is that we start to we start to add more more bandwidth in we start to add more servers more capability more capacity rather to handle this increased load more servers means more costs more complexity our deployments are getting more complex as we manage things across here and this is just catering for a live environment we're not even talking about things like staging and testing environments where we really strictly speaking we should be replicating all of these so this is a different scenario to the gem stack where by by design and by default the jam stack where everything is already cached there's no additional dynamic work to do this kind of on-demand work to do so we're at an optimal position already serving everything from a content delivery network which is from it's very inception was designed to handle thing at high load that's exactly what they're for so we've got a much better scenario over here if we can work in this way okay that sounds fine um but you might be raising an eyebrow and thinking well okay but what you're describing is a return to this and I thought this was a problem because everything had to be you know we're we're hand making all of these assets and putting them there and we don't we don't know how to to service things are a little bit more custom or dynamic well that's a fair thing to call out and a common a common point of concern but luckily the whole reason that Jam stack exists and the whole reason this term really exists is we've moved on you know we're we're lucky that we've we've we're lucky that we've got the dukes of this experience now we've been building and learning about new approaches and new tools so things have evolved we're not quite in the same scenario we were before and I tend to think of it as having all of these enablers yes we used to think of things in this world as static sites that word isn't going to cut it anymore things aren't static in the same way at all anymore where there are benefits from hosting things in this way but we've really evolved the tools and the systems have evolved I think of it in terms of enable us we've got all of these enables now that allow us to go far beyond what we used to do and that's what the jam stack is all about so they're enable that enables things such as static site generators now a static site generator is a script if you like which effectively does the work that we used to do in a web server here we used to have templates and data and logic and when a request would come in we'd munge those through all of those things and generate a view and return it well a static site generator includes all of those things but rather than happening happening at request time this happens at build time so we can generate all of the resources that we need for an entire site by running a script ahead of time that kind of brings me to tooling in automation because it's kind of one of one one aspect of that there are all kinds of resources now for how we automate the process of generating our sites how we trigger those things how we predictably deploy and manage the assets and the tooling and the automation that has arrived in the industry now really elevates the kind of sites that we can build and the way we build it and that's what we're gonna look at just a little bit as we get into our examples in a few minutes the other thing that really has become a huge enabler is the development in browsers where browsers are so much more capable now than they ever were before now this doesn't mean that we just offload all of the work and all of the complexity from the backend into the front end certainly we can do more than we've ever done before but there are techniques for progressively enhancing the experience in the browser and responsibly building up layer upon layer of of functionality and dynamism in the browser we can leverage all kinds of smart things at the browser level that we just didn't have access to before and the last and perhaps one of the largest enable is I think for the jam stack is the the number of services and api's and this thing with the API economy has really flourished and we're starting now to see companies emerge with all kinds of specialisms the kind of things that we used to have to build in-house with our with our own team now companies are starting to see the opportunities of creating those those capabilities and offering them as a service and offering access to them through API so that we can predictably request access to those and get the kind of capabilities that we need to bring into our sites so with all of these things together this really elevates the kind of sites that we can build from what we used may be we used to think of a static but now can do so much more because of all of these things so over the course of the next I don't know a couple of hours we're gonna look at a bunch of examples and it's gonna start super simple we're gonna start with something that which very much is in this territory but then over the course of the examples we'll build up we'll start to introduce static site generators we'll look at some of the tooling and automation we are going to start to do things directly in the browser and start to call on browser api's and then also use javascript in the browsers to call on services that exist out there in the world and bring in content from different api's and different services that exist there so that's a brief introduction to what the Jam stack is and where we're going to go and now I think we'll we'll get into some examples I'm a tiny bit conscious that this is a this is a long video and I've got I got six well seven examples to show you so depending on what you're looking for you might want to jump right the way indirectly to some of the some of those examples now these these do follow a particular pattern they do follow a bit of a journey we'll start with something very simple and we'll use the same example to gradually build up so to get you know the full story you'll probably want to to watch each of those in term however if you want to jump straight in I've just put this little index page here so you can see the approximate times of when to when to jump into each each section so it starts with a very simple static site a single file beings host being created and deployed but this does look at the the simplest way of deploying the site's not just making it so that's kind of why that's there and important then on top of that we start to add some simple JavaScript rendering to that example so we'll start manipulating things in the client then after we've done that we'll move down to building that experience I'd with a static site generator so we'll start to use some kind of templating and abstraction and how the mechanics of that work and then some automation there and we'll do that so that then our next example example number four will start to populate that site and that static site that I built with this static site generator with content from an API and we'll be doing that at build time from there we'll go on and we'll start using the content API to to also render out lots of different versions of the site with different localized content and start to configure our content delivery network to route people to the appropriate route based on their their location in the world then after that an example six will start to add a bit more client-side rendering and start to target content to the visitor of the site based on some JavaScript will run in the front end so we'll start to interact with the browser api's and then do some crime side requests other content api's to do some progressive enhancement of that page through some client-side rendering so those are the examples we're going to work through and the time codes that you have with them then at the end I couldn't help myself I added just another bonus piece of demonstration to think about how we gradually introduced a jam stack site into your existing infrastructure so if you have a complex infrastructure already and you and you think well I'd like to start using the jam stack but how do I introduce the two and blend the two together this is the time when you can find an example of how we can do that using some of the tools that we'll see along the way but ultimately it's a it's a quick look at how we can start to introduce a jam stack site into around your existing hosting infrastructure so that's the rundown of the demos we'll get into and the times that you can you can access those ok so I think it's time for an example let's let's jump into one or two examples and we're gonna start nice and simple let's let's not let's not go crazy to start off with let's just start super simple and we'll build up over time one of the things that we'll do through each of these examples is the code is gonna be you can follow along as I as I write some of this but also I'll pop this on to github repository so you can you can grab the code and step through it as well now this first one work that I'm starting with is very simple so you might you might not be so inclined to do it but let's let's start with the same conventions we're gonna use throughout so each of the repositories is going to be available to you at a URL like this so find that out jam stack slash x1 for example number one that's where this is gonna be and this example we're starting is just very simply and with a static a variable static site let's just look again just as a bit of a reminder about now what is Jam stack what is this thing we're gonna make and just as a bit of a refresher no we're just saying that Jam stack is fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN which removes the requirement to manage and run where run web servers great so what we're gonna do is we're gonna pre-render which is a bit of a fancy word really or for what we're doing we're gonna just make an HTML file that will then host directly from a CDN so that we don't have to to bother with apache or nginx or other kind of web servers it should be nice and simple what are the things we're gonna make well I've given it away just by saying we're just gonna make HTML so we're just gonna make markup but as again as a reminder Jam stack it's JavaScript API and markup but it doesn't have to be all three it can be any one of these I mean critically I guess markup is the minimum viable site you can have you know browsers interpret HTML they interpret markup and do things with them even if that markup then calls in JavaScript and and makes use of api's or what-have-you but to start with I think we'll just make some markup and we'll put that somewhere that can be served as a gem stack site so just a tiny look again at what this could look like this is the thing we're about to do we're gonna build something now later on as this gets more more or advanced will be building things will be using tooling to be building this will be using some automation or perhaps use a static site generator for the moment we're gonna you know I'm just gonna be mashing a keyboard and and making a file that will then deploy to some hosting somewhere so it can go into a content delivery network a set of servers around the world that we don't need to manage its managed as a service but then it'll give us a URL so that we can request this page in our browser get the markup which you know we don't have to do anything because that's all been pre-built it will come down the wire and our browser will then be able to display that to us that sounds like I'm maybe over complicating things or being very Ferrari with my description given what we're about to do but these are the principles that will build on over time so let's let's jump into into making something we're just going to make a very simple static view of a page first of all and I've got a folder set up here which i think is empty yeah great so let's just start coding something now I love this because it kind of harks back to the the things that I was doing was I started to get into web development you know I was opening up text editors writing code now admittedly I didn't have lots of helpers like this which is lovely being able to have helpers such as that to speed some of these things up but ultimately writing code in text editors and then refreshing the browser to see the result I used to love that so this kind of makes me reminisce about that but let's get on with this and this make you know a page you we're gonna gradually get to the point that we customize this and make this a bit personalized to start with it's going to be super simple though I am going to make a little wrapper so I can do some by centering and bits and bobs like that I will put an h1 in there and say this is capitalize that and let's let's put something in here that maybe will customize a bit later on let's make this nice and positive put some love in here fine maybe we should style this up a little bit I'm just gonna do this all in line I think rather than creating some CSS files that I'll call in I'll split that out later on but for the moment really are keeping this nice and nice and basic just to reline that oops what else should we do with perhaps a 400 and let's let's make that that love nice and visible okay oops okay so we've made something pretty pretty simple I think you'll agree it's just a single file now we don't need a web server to serve this we're not this is about as basic as it can get so I could in fact just open this up locally with my browser yeah I don't think there's any huge surprises and what we're seeing there is just some static HTML being served locally from my file system there's no Apache there's no nginx there's nothing really clever going on here it's just it's just a file that we're serving and as such this makes it ideal for being out to servers are as our most basic Jam stack example now there's a load of different places we could perhaps go to host this full disclaimer I work at neckla fire which is a company that does this sort of thing so I'm gonna use neckla 5 mostly just because it's most convenient and I think is pretty it's pretty simple to get started with and but of course there are other companies you could use for this you could be hosting this on say github pages or on site or on Google cloud or directly on on Amazon Web Services maybe in an s3 bucket I'm just going to use this because it's a very very simple example very simple way to get started and here's my is my directory that we just created I just created that one index file in it I'm just gonna drag and drop that onto here and so what's happening here is this is being deployed to a CDN this has gone over to net the vine and if I've pushed it around to their different hosting infrastructure and we've got a URL for that now so I can look at that we see that this your URL here's our page if we did a dinner view source no surprises because it's just exactly what we always heard it's being what we built it's being so statically it's being served from a CDN I don't have a server to maintain to keep this alive it's just it's just there as part servus so yes that was that was terribly simple in terms of what we built but let's just let's just just refresh what we've done there okay so we we built something we made something because by typing rather than with any kind of build tools we deployed it to a hosting environment to a CDN and then we called it up in the browser seeing the markup there so was that Jam stack let's have a quick Center check of that well yeah I think so I mean it's just markup and jump stack sites a JavaScript API so markup it's a super simple example but it's markup it was pre-rendered we didn't have to render anything at request time all we were doing was serving that static asset directly from the CDN we didn't have to manage any web servers or or have any logic running there it's it effectively just fit serving that file so in the answer the question was that jam stack yep I think so that's sir that's probably the most simple example we can have of a jam stack site but now in a position to move on and build something a bit more interesting so let's gradually layer up with another example so onwards to our next example example number two we're gonna add some Java scripts to what we had previously um you at once once again the code is going to be available on github so you can you can just jump straight into what we have there so that's going to be it find that at Jam stack x2 since this is example number two and we're gonna use JavaScript to make the page a little bit more interesting we're gonna keep on building on that previous example but move it along a little bit so you know we have just our markup previously now we're going to be adding JavaScript at this point we're not gonna be calling any API so we're gonna come to that a little bit later on but as I said before jab stack doesn't need to use all of these things you can use any of them typically will always include markup but now we're just going to add some JavaScript there are a few different things that we might do with JavaScript at different stages of the development the deployment and the execution time so let's just look at that's a tiny bit and I'm gonna call out this this phrase rendering so you may have heard people talking about rendering and different types of rendering and I think we should call out a few of the main types of render just to explain those and unpack those terms a little bit so here they're the three types of rendering that I want to call out and they come into two groups this client-side rendering and this server-side rendering so first of all let's talk about client-side rendering let's talk about what that means when we say client-side rendering what we're talking about is executing JavaScript in the browser so in the client executing JavaScript in the browser that manipulates the Dom so in other words it's changing the what the user sees in the document object model the view that is rendered by the browser so that means that now this code executes not in server land but in browser land so this on the the user's device is in their browser it runs client side and that JavaScript has just come down the wire it might be in the same page same file as the HTML it might be in different files and different assets but none of it is executed on the server this is all executing client-side in the browser then if we look at the other side of rendering looking at server side rendering sometimes you hear this abbreviated to SSR there's a couple of different ways we might think about server-side rendering this request time and there's build time but both of these things that are happening on the server so let's look at request time first of all and when we're talking about server-side rendering that happens a request time or so per request what we mean is generating the mark-up on requests in the server and then transmitting that to the client so it's like a little diagram of this for just a moment so this is familiar from from the first example but we've just changed it a little bit because what's happening here is when the browse when the user makes a request from buy point in their browser at a URL that rather than hitting a CDN perhaps we're hitting a web server now on that web server we don't have a complete view ready to go we're gonna render that on demand as a response to that request so on the web server we might have maybe some templates maybe some other logic that gets executed to determine what template we we use maybe that calls out to data that we need to populate the template with to generate this view that might live on the same machine as sites get bigger we typically split that out so it's on a different server so it's on a database server so we might need to make a request for that data then mash that together with the template to generate the view that we send down the wire to the browser for it to get displayed in the browser now during build time and deployment time you know we might be writing the code that is the logic the templates we might be populating data into the database for the content so those kind of tasks are happening at Build time but the critical piece of generating that view and then returning it to the user that is happening at request time in server-side rendering that happens at request time so that's this scenario the other scenario is server-side rendering build time I sometimes talk about that as being pre generation or site generation but I think perhaps a more youthful term is still thinking about it as server-side rendering but this is happening at build time rather than request time so we talk about that as being you know we generate markup a build time so that is ready to transmit to the client when needed so we don't need to perform this this task of compiling or generating rendering the view per request this has happened happening once a build time so you know the view of that looks looks like the view we had previously in this diagram so the the rendering happens here at build time and then it's deployed to wherever we're going to serve it from so in this case a CDN a content delivery network so that it's ready for every request we don't have to do this again it's ready to send down the wire to the user so both in client-side rendering and in server-side rendering at Build time they share something in common and that is that per request we don't need to execute any logic on the server to then generate a view these things are all ready to go and one of the things that you sometimes might hear is with the jam stack the stack you know the technology stack the things where logic is executed has kind of moved to the to the to the browser and move closer to the to the to the user and into the browser because here we are executing code that you know will changed the view and change the rendering but that's not happening on a server that's happening in JavaScript and in the client side neither one of these has has a server that executes logic so these are the two kinds of rendering that you often associate with Jam stack so the thing that we're going to build in this next example is going to be something that does some client-side rendering it's a very simplistic example but we'll get into that now so let's let's go over to our folder again so we've got a new folder here for this example if I just list what's in there at the moment we just got the index.html file that we had before let's just open that up and and refresh our memory was just a moment ago but here we are it's just a simple little HTML file but we're gonna do something here with JavaScript in the client that's gonna change this view and manipulate that's a little bit so at the moment I've got this page which is a page just for me it's a very motivational thing for me to see each day but let's let's change this a little bit so there's something something that's potentially gonna be some a bit dynamic so I want to have a bit of a vibe that I get every day from this a little message you read that's the kind of motivation I need but let's make this message change every time the user refreshes the page so in other words we're gonna be changing what's rendered in the browser with JavaScript every time the user refreshes it so let's create a bit of JavaScript over here too to do that let's go yes what might we have in here well I'm gonna do some copy and pasting so you don't have to watch me type but what we're gonna do is we're set up a bunch of different messages that we might display in this this this div here so at the moment it tells me I'm great which is all very nice but let's have a few different messages that might get displayed to me so yeah these are the kind of affirmations I need to brighten my day but we'll choose one of these are at random so let's just I'm going to put in again I'm just going to pull in the code rather than having you watch me type it so I've set up an array of of these vibes these messages and then I'm going to choose one random with this bit of JavaScript that just pulls from random one of these one of these messages and then we're going to display that in the browser by selecting the the element that has this vibe class and appending whichever one of these these messages that we've selected at random of course we need to to call that into the page let's just do that down here that's the script tag and we'll source that from yes okay so once again you know there's nothing happening that that requires a server here this is all happening in the clients that open up let's pull it over here I'll need to let me just make you so you can see this okay so let's save that open that okay so now every time we reload our page we're getting a different view or a different message here that's injected by JavaScript now again this is a simple explanation very deliberately but what we're doing is effectively rendering some content client-side okay what we should probably do is get that deployed as well so if you recall we were in our previous example we had had this little little site being deployed we've got one one publish already and what I'll do is I'm just going to okay so now we have a a second example here yes let's do likewise let's let's go to our deploys we're going to send this to the server to the hosting as well okay so now hopefully when we go to our our site okay great now we have this extra message there we didn't have before which is which is on the server and each time we load the page that's changing now you'll notice that this this is happening at the time that I run the code in the browser so in other words this happened in client-side none of this is happening server-side all we're serving from the server is this HTML and this JavaScript all of which was pre-rendered pre generated and we did it manually by typing it but it's the kind of thing that might have been something of a build output but nonetheless we've got some some simple client-side rendering happening as a slight enhancement and this is somewhere again that we'll be able to build on for our next example so let's just recap for just a moment you know what what have we got here so we're manually generating some markup and we've also written some JavaScript that comes down the wire and then in the client we're doing some very simple JavaScript just to manipulate the DOM and render some different content and that's that's what's happening right now so let's do our little recap was that Jam stack yep we've got mark up we've got JavaScript and critically what we don't have is a web server running that we need to manage everything is being hosted and served directly from a CDN so yes indeed that that is still very much Jam stack but now we need to start making things a little bit more interesting so let's let's move on to our next example alright so in our next example things are gonna start to get a bit more interesting now because in example number three we're gonna start doing that server-side rendering at Build time with some automation rather than just typing these files that we've been doing so far let's let's start to add some scripting and some automation so this example is building with an SSG or with a static site generator and I'll introduce you to that in a second the code that we're creating as before is going to be available in a github repository you can find that at gem stack x3 and you'll be able to to follow along with the code that we're gonna create together now Before we jump into making this and starting to write some code let's just talk about a few prerequisites because now we're not just editing files were actually starting to introduce some moving parts so there are a few things that you'll need in order to make this work so one of them is get so git for version control we're getting to the point that we're gonna start having versions and we're gonna start incrementing through that and later on we're also gonna start using git for actually deploying some of these updates so you will need to have git installed many systems already have that but you can you can get that for free from this URL also on free code camp there is a lot of support for getting started with git how to use it the other thing that we'll need to have installed is no js' so that's a local JavaScript engine so you can run JavaScript client and server-side or rather on your local development machine so we're gonna need to have no js' installed again it's for free and you can get that from node.js org there are there is a good help in getting started installing that should just take a few minutes to install once we've got those two things installed on our local machine there's another couple of things that we're going to use for hosting the code and then deploying the code later on we've already done something with metla fie with our drag and drop but we're gonna start using this a little bit more it's worth creating an account so that you can track this and and retain the site that you build rather than just having something which is ephemeral those drag-and-drop deploys we did earlier on if you don't claim those eventually they just go away so you just need to claim those so an account from Metta fide calm is important likewise in the account again for free from github github calm so that we've got somewhere to push our changes and track all of our changes so those are the prerequisites we'll need before we get started what we're going to do once we do get started is we're going to change so this is our diagram from the previous previous example so you may recall what we've what we've what we were comparing jams that to is these dynamic backends these web servers which compile the view on-demand for you so in this scenario you know when a request comes into the web server we're pulling together the data we need we're generating the HTML and then we're out putting it at request time whereas with Jam stack of course we're not doing that here we're doing this previously a build time and so far all we've been doing is is just typing assets what we're now going to do is we're gonna start to add some scripting some automation some intelligence here and by doing so we're effectively creating this server-side rendering at Build time we're generating the marker at Build time so it's ready to transmit to the client when we need it so that's what we're gonna do the way we're gonna do that is we're gonna have some kind of build automation so this is a script that will run which will pull those things together churn out the HTML and whatever assets we need to be able to tell the browser to render the site so we're gonna do some build automation and we're going to use a static site generator now you can think of a static static site generator effectively as a script that you run in any environment whether that's locally on your development machine or if it's an a continuous integration server and it's it effectively turns templates and data and whatever other bits of logic you have into a set of static assets that you can then deploy to a web host so again just going back to this it's it's the piece that we run here to generate all of the assets we need so that they're ready for form for the user when they come along and view the site there are lots of static site generators run I mean a lot of them they're really popular and there's this site static gen dot-com which is a good list of in fact what I might do let's just have a quick look here so there's this is static jenkum which is an open source repository of lots of static site generators if I was to start scrolling here each of one of these is a static site generator you can see the scroll bar there's a there's a lot of them there are hundreds and hundreds and hundreds of them and it's become very popular too to make these things but a few of them are bubbling up and getting particularly popular and we'll look at those in a second but I just wanted to call out that you can explore this site and find the one that's right for you we've kind of listed here the different languages that they're built in so you can find something that's been built in a whole host of different languages that you can use also the templating language so the language that you use to express the HTML and express the logic that generates the HTML there are lots of those as well and you may already be familiar with some of these or you can explore these there are lots of different options there as well so so you can kind of filter these and see so if I'm used to something which is kind of Django flavored I can filter it by that or ejs is a popular templating language so there's a bunch that support that you can explore this to your heart's content a few that I would call out so Jekyll was I think probably the the static generator I encountered first it's been around for a very long time was made popular by github because github pages supports this as the static site generator they will run on your behalf is based on Ruby so you have to install it with a ruby gem but you can explore the site and explore the documentation here if you wanted to use that one I'm gonna make a recommendation there which is what we're gonna use in our demos in just a minute but you know there's Jekyll there's also Hugo which is written in go which is super fast again we might have considered that one gasp bjs is another static site generator which is built on the react ecosystem so that might be one we consider but in actual fact I'm making a recommendation in a second so you know we can choose the static site generator to suit us based on the language maybe the workflow that it supports performance in terms of how quickly it rendered you know the site that it generates how quickly does that render in the browser those are the different site generators can have different profiles for that and the kind of architecture it supports how much control we've got over the output so some static site generators ship with JavaScript frameworks that are quite opinionated on how it'll then do some of the rendering for you if they are also have client-side rendering and different static site generators have different level of adoption and different popularity all of these are things you might consider when you're choosing a static site generator particularly for a large project but for the sake of our examples I'm going to use a static site to site generator called eleventy you can do this with any of the static static site generators you like but I choose eleventy for this kind of purpose purely because I find it's got a very logical architecture it doesn't take a lot of extra knowledge to understand um it does have very flexible templating it can use a lot of different template in languages and it happens to support the ones that I think are particularly logical and it doesn't generate in the site anything that you don't ask for so in other words it doesn't bundle in a JavaScript framework or any magic you you say here's my template please give them the output and it gives you just that and nothing more which is good makes it good for our purposes because it helps us to understand it a little bit better and also it's JavaScript all the way down so in other words and it's built in JavaScript we install it with JavaScript so we don't have to do lots of complicated things to get our environment set up so that's that's why I like that so let's sir let's jump in and take a look okay so the place we're going to start for that let's move over back to our terminal and what I've done is I've actually is created copied another folder we've got a new folder here that will work in let's just open that up in a code editor so you can see what that is in fact it's just a copy of what we had before because we're gonna be evolving our previous example but let's start doing some things now to make it repeatable so we're actually going to start well install eleventy so we've got a static site generator we're gonna start to build in some automation it's important that the the build steps are something that's repeatable I guess that's one of the things that really elevates Jam Sacketts the level of automation and predictability when we repeat tasks and that goes all the way through to the things like the dependencies so I'm gonna use NPM to manage these dependencies I think if I just create a new NPM package just with a default setup here and now we can start adding adding dependencies that we'll be able to install repeatedly now I'm just gonna nip over to an empty dev to remind myself of the of what it's called and I'm just gonna copy that and I'll install left NPM I from Stahl I will save it so it saved this configuration for future use and that'll go off and install eleventy for me now since this is saving it to my package Jason this means that in future and we'll see this update in a second when it's when it's completed this means that I'll be able to run a single command and install all the dependencies for the build in future right now is just this one static site generator but as things evolve we might start adding a few other libraries resources packages here that we'll be able to predictably install in an automated manner each time we want to either redeploy or change this change this project so it runs somewhere else okay so the installation has completed and you'll see now we've got a dependency added to our package our package JSON file in here so we'll be able to easily reinstall this communicate what the dependencies are in future so that's good but one of the things I want to start changing is perhaps how we've organized things here a little bit so now you can see by installing eleventy we've got this node modules directory here we've got the package dot Jason we just created this thing is packaged a lot Jason file here there are a few things that are starting to muddy muddy up our our sauce so I'm actually gonna organize things a little bit here and let's add a source folder which is where all of our our code that we're gonna write is gonna live and also you know when we run our generator we're gonna output to another another folder here as well we'll let that be created dynamically but what I'm gonna do for the moment is I'm going to move the index in here I said all of the things that we wrote earlier on those are gonna live in our source directory other things including like a config file for eleventeen in fact I'm going to create that right now door 11 t.j.s that's the config file that will tell eleventy how to build and we'll start populating this in a second and all of those things are going to live outside the source directory and then we've got our source directory organized so what kind of organization are we going to do here well we're gonna want to have multiple pages at the moment we just have one so a sensible thing to have if we're gonna have multiple pages is to have a template so let's and let's create that now I happen to know that eleventy uses this default of looking in and includes folder for for assets it might include and actually I'm gonna just use our index dot HTML file that we already have I'm going to move that across into English I don't change this into a template so let's turn that into a nunchuks template that's happens to be their language I'm I kind of like using make a little bit more room here and so this is our HTML file that we're working with in the previous example how can we make this the basis for a template well there's a few things that we might want to have to be different for every page so we might want to have a different title for each page so I'm going to start adding some nunchuks syntax here for that so we'll have a title variable that will pass in every time we want to use this and also the body that's let's make that different for every every page as well so I'm just going to copy that and I'll keep hold of that that's using a second but we'll pass in a Content variable here I'm gonna use a built in filter from nunchuks called safe so what happens here is whatever content whatever string we pass through here and in the first instance it'll be that the HTML that I just cut out of here whatever we pass through into this variable through to this filter and lunge X has one called safe which which means that it can it can handle the escaping of all of the the HTML characters for as it's safe to just pass that through without escaping okay so it's let's save that but we'll you need to to add some some pages now so in our source let's create an index page we'll call that index dot Chuck's and it's paste in our precious precious HTML that we just took that would be the content that we passed through to the template but the static site generator need to know a few things it needs to know some variable those variables that it's gonna pass through so put those in a section at the top here now these these characters this denotes a section at the top that we call frontmatter and this is in Yambol format which looks like this page you I think we'll call I think that's what we had before and we're also going to tell the eleventy what layout to use really only we only have one layout at the moment we call it index will change that lets call it base doors and JK and we'll change that over here as well so now we have this index file that has this content just play with our formatting a little and these variables at the top that will pass through to their to the site generator okay that's looking good let's say let's make another page as well now let's just copy this and we'll make it about about page about this oops this page for you still the same layouts and I'll tell you what I'm just going to I'll copy something over rather than having you watch me type too much HTML okay a little bit information so now we've got these two pages which are both kind of inheriting and populating this this template when we run our when we run our script now at the moment we don't have a lemon tea doesn't know where to find these things so what we can do is we can actually add some configuration here again I'm just gonna copy and paste this in and I'll walk you through what it is so this is the format for eleven teas configuration file and in essence really all we're doing here is we're setting these values we're setting we're telling lemon tea which directories you to use for the input and where to put the generated output so the input is our source source directory here we are and eleven tea will create this dist folder we can add all kinds of other bits and pieces in here and we will we'll start populating more things in here for but for the moment that's all we need so how are you actually going to go about running this eleven T command so that we can we can run our generator well let's have a look first of all at the documentation on the eleventy site now this was installed globally using this this does G argument so that meant that anywhere in the system after you installed it you BL to run the eleven T command run your build generate your site now we didn't install it that way we install it slightly differently we didn't include this global parameter so that means that it's installed within the context of this build in the context of this this site that we're creating now that's not quite as convenient because it means we can't just run the 11 T command anywhere we like in any directory but it is useful because it means that it's now packaged as a dependency here so that if any other developer comes along clones are site installs the dependencies they can run that command and it's kind of sandboxed it means that it's not a global dependency on their entire environment that's also useful if we're building the site from a different continuous integration server or build server or something like that which we're going to get to very very shortly so it means we can't just run the eleventy command like this but thankfully NPM has a nice solution for that so what NPM does is it allows us to run in this scripts property of the package.json it allows us to set up a bunch of different scripts that will run in the context of this environment so in other words if we were to run if we create something here called build which we can run with a build command and I'll replace this so I'm just kind of cannibalizing the the test script that was there is boilerplate to start with now if I if I put eleventy here like this this means that this is going to run the install package that it has in its node modules for us so that's fine that's if we run that there that should be okay we've got our configuration for eleventy we've got our our template and our our files that it should our pages that it should create so it should be that now did I say everything yep okay so it should be that if I do MPM run build which is the command we just created should now run eleventy here we go great so it's created a disk directory which is we're expecting with an about page and an index page and you can just about spot here in fact I'll show it up here it's organize things in our file structure so that this will kind of create tidy URLs for us you know the about page is actually an index file but it's put in an about folder so as we serve this from a simple stat a simple web server by default you'll get these nice kind of clean URLs which is it's just which is nice um speaking of serving it from a server that would be a useful thing to do as well and something a lot of static site generators will do is they'll bundle a very simple server in there for you as well and you can you can start using that right away so let's let's make use of that as well so I'll this is a common convention that's that's kind of cropping up will have a start command in our in our scripts property here in the package dock Jason and we'll call eleventy again here but we'll use its kind of inbuilt server so now when we run this so NPM start start is a special command in NPM so you need to type run it's this nice of concise so that's doing the same thing generated the site for us but it also then spun up a little server so now we can go directly to that so now we're serving this directly which is which is nice I think I should be able to just go to the about page great so we're building a sites we're serving it there's something wrong here though we're not seeing our message of written if i refresh that we should be getting our our client-side JavaScript re-rendering and changing things here why it might that be well let's go back and look at our code and we'll look at our tour just collapse that to keep things simple for a second and what we have here in our code is we have well there's our JavaScript that should be be running and we've got our our pages are files that eleventy is going to turn into pages for us but he actually doesn't know about how to use javascript by default it doesn't it doesn't expect to make a page a URL for that it's only looking for the kind of templates that it supports so it doesn't know what to do with this and we need to make sure that that gets a cross into our disk folder in fact you know you can see that I has not been moved across there at all so that's actually a very common common thing and it's a situation we can cater for so in our eleventy config we can tell eleventy that there are certain types of files that we're just going to want to pass straight through we don't need to make a page for it we don't need to generate things for it these are assets that we just want to pass straight through and so eleventy has a little argument pool a little command called pass-through copy and then we can tell that either files or a folder to pass through so actually what I'm going to do is others to get a bit of organized here and we'll say everything that's in there everything is in this JavaScript folder will move across so let's organize ourselves a tiny bit more and you folder J yes and then we'll pop our JavaScript in there so any other JavaScript files that we put in here are just gonna get moved across to the disk file so it's let's save that let's run it actually we're gonna do need to do something else aren't we because now this is going to be moved across to a j/s folder and I think we're just calling it yeah we need to make sure we've got the paths correct so let's do that now it's regenerated that for us let's have a quick look oh yeah that looks a bit oh I see yeah yeah our random there we go yes so we are seeing very many our messages popping up let's just see yeah our page has been updated the asset is the JavaScript asset is there and available for us something else where you might notice if we if we look at our source here is that wait what's this we didn't write this whereas this whereas this script come from and I said earlier on when we were selecting which static site generator to use I liked eleventy because it didn't give us anything we didn't ask for but hang on we didn't ask for that so what's going on here well in actual fact when we run the the serve command so when we run when we run this guy that's that's creating a little web server for us but it's also making sure that it's it watches for changes and automatically reloads when we make changes and that's only happening at when we run things through serve if we run build this isn't here this is just a little utility to help us with our development so let's make a change in let's let's see that see that happen you know right away because one of the things we might want to do is you know our base template here let's just make a tiny bit more room maybe we can add something in here so we've got a bit of navigation to go back and forth well I'll just copy and paste that in so there we go we've just got a little header with I hope a link to a home page and about page I think if we save that should generate regenerate and reload and there we are so so that's popped in and straight away so that's that's why that little utility exists now this is this is kind of nice a nicer attribute of jobs text sites as well you know we very quickly here bootstraps and into a development environment that lets us write the code see the code as it will be generated and preview it live in with with a simple web server we haven't had to configure a web server of our own it's all being packaged in with the generator and that's that's kind of a nice handy thing to help us kind of bootstrap a development environment very very quickly but how do we actually go about deploying this I mean so far in previous examples we've just been you know hands hand crafting some files and then just popping those into a hosting environment but now we've got scripts that run we've got a build that happens what we could do is we could run our our build script to generate our dist folder as we've done here and then take take these files which previously we've made manually but now we've just automated the creation of them we could take those and then put those in serving a hosting environment and that would work just fine but ideally what we can really do is we can start to lean on these processes of automation and of version control so you can actually predictably kind of create these things closer to the environment and make sure that we do things in a repeatable way one of the great things about well modern web development in general work particularly the jam stack is that we can start to use things like version control as a deployment process and start to use some of the facilities that we have managing our code changes and make those reach right the way through to our deployment process and we're going to do that now by starting to use I mentioned at the beginning that gate was going to be something we'd need for this for this example and we're gonna turn turn this into a git repository that will start start managing now before I do that I'm gonna just there's just maybe things a bit tidy here so we can see what's going on I'm gonna add a git ignore file because at the moment you know we're installing gazillions of node modules there's a lot of things that we were installing here we don't need to manage all of those in our version control that's something that can be added by the dependency kind of installation so let's just exclude that before we do anything else whoops - Dom node modules will also exclude the build assets that come from the dist directory so neither of these things need to be managed by version control but it's our source it's our configuration description of our dependencies that's what we want to manage so with that in place let's let's just create and you get repository here lovely and we can add all of the whoops can add all of the the assets that we've just created our files that we just created to be tracked oops okay so now these are these are being tracked and we can actually set up a host to watch this git repository but the moment this just Liz luck lives locally this let's make this a repository that's available somewhere public let's do that on github I tend to use this little utility hub too to help me create repositories elsewhere let's call this code camp this is a bit of a convoluted name but hopefully this will be easier to keep track of as we're we're working through examples later on so just create that repository in my github github account great that's being created now yeah so it's just tidy things up a little bit okay I don't have a readme in here which is bad form as you haven't pushed this yet the let's make okay let's push this I always forget to push it after using the command I start doing things right right from looks right from right from here so push that probably asked me to publish the master branch I will indeed so now we should have this created there we go so now we have a git repository for it and what we can do is we can have our deployment process watch for changes here and run our build right in the hosting environment so let's go back to our site that we created before look at our build settings and then we haven't got this link to a git repository and we were just dragging and dropping files in here but there's a link it now to our git repo it's just gonna ask for permission I can do a little search great found our repository so we'll link it to that it's going to look at all the branches we only have a master branch at the moment and it's made its best guess of what commands we might want to run this is notice that it's an 11 T site because it's found that dependency so it's used at conventions we know about for that but that's actually not the build command we're running we we were running if you recall we were running NPM run build to generate the site and that the folder that we then publish it created that we want to publish is the dist folder so at those settings and then we'll hit deploy and our build should have started there we go we can take a look at our build now this what's happening in this build in our continuous integration environment that we've now created here is that the same things that were happening locally the running of NPM install to grab the dependencies and the packages and install those then to run that NPM command in fact we can see NPM run build has been run which in turn is run at the eleventy command well this looks kind of familiar it's created those folders created those files and then finished deploying those and I think we should be able to then go and take a look here yeah yeah so now we have a live URL which has got both of the pages that we've created and each time we go to this our home page our javascript is running so now we've got it's very similar to where we were before but we're generating this site both in our development of the environment but also up here in our hosting environment so we've got deployments happening right here in our to put in our hosting environments as well this is starting to feel like there an end to end I could I sometimes call it and call it a steel thread of having a development environment that reaches right the way through to a production environment where we can be running the same things here locally as we're developing things and and you know building out our code seeing how things work with a web host a web server that's kind of running simply here and then running exactly the same things in a hosting environment or a continuous integration environment which will run that exact same build and then take the output and publish it to a CDN so let's just send check where we've got to so what's that jumps out well of course it certainly feels like it was we're using javascript actually now as our build our build environment we're not really using any API yet that's coming we're generating markup where we're serving things directly from the CDN still so we don't have to manage any web servers but really this is the interesting thing right so now we're running something at Build time and that's running it's the same exact thing that's running in our local development environment as is running in a continuous integration environment and then propagating the output to a CDN this is starting to feel like an end-to-end development environment and absolutely this is kind of core to what the Jam stack kind of feels like and how and how it feels to build sites with the jam stack we're gonna move on to another example now and start to flesh out more capabilities now that we've got this automation in place all right well on to our next example so example number four now we're gonna start doing some things that that finally bring in this API element so now we're gonna be building with data that we get from an API once again the code for this is in a github repository you can find that at jams tac-x for this being an example number four and and actually what I've done this is a new repo so I've created a new repository and a new site which which is is linking to that repository this is exactly the same as in example number three it's just that I've created a new repository just so we have clean starting points for each one if we go and if we go and look at a look at the page for that in fact you'll you recognize this it's just exactly what we had before with different oh yeah random isn't always as random as you'd like there we are with the different bits of JavaScript rendering it at the start it's exactly the same code exactly the same deployment that's happened so we just got a nice clean starting point for that now what we're gonna do is just refer to our example that we've been this diagram that we've been looking at throughout I'm just gonna tidy things up this is the same thing just moved over so we've got a bit more room to operate here so now as we run our build run our generator either locally in our development environment which is where we're gonna be working next or indeed once this is happening in our deployment in our continuous integration environment what we're gonna do is we're gonna pull in in data now the kind of data sources that you might expect to find there are things like headless content management systems for managing the content of the of your site there are pricing engines ecommerce engines stock levels all kinds of different content feeds around the around the web you might be pulling tweets or Instagram feeds or all manner of things news feeds will have you and the there are a number of ways you can get that visible to our users in in the browser we can either you know make a request for that API and pull that content in with JavaScript and then render it in the in the front-end or we could do what we're gonna do now and we can actually pull content in from the API at Build time included in the site as we generate our HTML pop that into the the hosting environment and then it's ready to go when the user comes on to request it so that's what we're about to do steps to do that first of all we're going to just iterate on our site generator that we've we've been using so we can start to use data in the pages and in the templates of the static site generator once we've done that and we see how that works then we'll actually start pulling data in from from an API and I'll show you the API we're going to use in just a moment and then once we've done that we also want to make sure that we're not just doing that in our development environment which of course is where we'll start but we're also doing that on the live site as its deployed so that's that's what we're about to get up to so if we pop back over to our our terminal as I mentioned I've just created a new and you copy of where we were before in a new folder name let's open that up in our now text editor see take a little look at that okay so this this should be kind of familiar we've got our source files our build assets the node modules that are installed it's just the same as where we were before and now we're going to start start adding some some content in here the kind of thing let's have a little look first of all so the existing site this is what that looks at right now and I think what we'll start doing is well add some news items here so below below this kind of a little message for me for my my daily message now there's going to be news items from the day beneath there as well so what might the the code look like for that well we can we could do that in any number of ways with us maybe consider that we might have a list item with news things and a bunch of those that's the kind of thing that we might want to to populate with real content now the way that we can do that with static site generators this is a very common model in static site generators that they will have a way of having some kind of folder which will contain data and eleventy is no different to that follows the same kind of conveyor I'm just going to create a adjacent file here called news and for that in a data folder and then that that will become then an object which is available to any one of the templates as we run our build that we'll be able to get the data that we put in here and then make use of it we can manipulate it iterate over it so I've just created this this little blob of JSON here which is an object with articles in it which is an array of these different art that these different article objects at the moment I've just got a title just so that we can see this working and start to bring this to life um let's let's change our our markup here to actually start using that of course we only need one of these it's gonna we're gonna iterate over this this will access this news object and then iterate over the things that we find in there so let's do that with some some nunchucks so for article in news is our data object and it was the particles object within that loop in fact we don't want there those tags inside there it's just a list item so we're going to be creating and then let's let's output some property of article I think we've got the title for each of those so let's just double check yeah articles title art news articles article title ok and we've used the default location in eleven Titor to find the data but I forget if it picks that up automatically so what I'm gonna do is I'm just going to be very explicit and say to eleventy that this is the location to find that data so now it'll certainly know to where to look and I think if we run our npm start I think we should get let's make sure we've got nothing room to see okay it looks looks hopeful if we look in our disks we should probably ought to see see what's been okay that's that looks hopeful so let's look at it in our in our browser okay formatting may be a little bit funky but but we're starting to iterate over data that we've got in a data file so that's all that's all fine and dandy but we really want to make sure that we're getting data from a a real a real data source at the moment this is just whatever whatever data structures we want to have here so we're actually going to start to use a remote data source something that exists out on the web now it's just - yep okay so the it's also going to use is this it's new API as I mentioned we could be using any number of things but news API is going to serve us quite well for our confirm our examples this gives a free a free service so you can get news news data yes it's a paid service if you want to be doing this more seriously but for our purposes we can make 500 requests a day we can get get various bits of news data that's gonna work well for us yeah in order to be able to use this you are going to need an API key and it's very very simple to do if you go to news API dot org hit get API key it'll give you a chance to create a little account I set mine up already but it'll give you something like this where you know it has your details and you can then easily get this API key that we'll be able to use in our requests to their API I'm not too shy about sharing this with you I can always regenerate that later on but this typically is a secret you know when it's the kind of thing that's going to give access to a privileged or a page service this is something you're going to get want to keep secret we'll talk in a little bit about how we keep that secret but for the time being we want to start pulling some of this data in News API so great it's got lots of documentation on you know the different endpoints what kind of data you can get I'm probably going to use headlines I think is a potentially be a bit bleak depending on what the news is at the time but but there's a nice API that we can we can call in to bring in some structured data that that perhaps fits with the kind of model that we're starting to build out in our HTML now what I like to do is to start exploring the AP is not in not in my JavaScript but just just writing the terminal I mean the thing that we've got here is a nice URL that we can we can query we can make it get requests on that and start to see the data that comes back it's documented here you know we can start to see the shape of the data that way you should expect to get back and in fact if we just a little look a bit further into the news API site we can see the kind of parameters we can pass in our in our URL to to get different data whether it's filtering it by country or particular category other bits and pieces and page size how many results we won't want we might want to get back this is great so we can we can start exploring the API and see what we want want to use so in fact you know I'm gonna just copy that I noticed that since I'm logged in they've automatically populated my API key which is handy I don't have to do any management of that but I can I I can start where are we there we are I can ex parte start exploring that and so what let's let's do that right here you know I can I can just do my terminal I can do a curl oops tell you what let me make sure I'm gonna speak there go to many spaces if I just curl that I'm starting to get data straight away in fact what I'll do is I'll I'll pipe that to a little utility i've got called JQ which will format format that by because since it's json data so you'll see us a little bit more easily so that's nice we're starting to see we've got this this array of articles that have sauce author title some content a date on there this looks like something that we can use in our results to replace this jason dive I've currently got manually added there so let's let's start doing that let's start using using this API as a source for to replace this data and I'm not gonna use curl directly directly in here I want to you some JavaScript for this so I'm gonna use a library called Axios which is which actually run client-side so in the brow all server-side in our development environment or on whichever hosting environment to make requests and get data for us it's nicely documented there's some examples of how to use that but before I do anything I'm going to need to include this now if you recall in our package Jason we have our dependencies and the moment we just depending on having eleventy installed we're going to add something else to that now so I'm do an NPM install and save Axios and that will go off and install the dependencies for that and it'll add that into our little area had its into our little dependencies file excellent we didn't I'm going to need that now for the time being and now I'm gonna actually start using that here I'm gonna replace this isn't Jason anymore this is actually JavaScript we can lose all of that cuz we're gonna be returning that data rather than just specifying it let's have another little look to see how how we use Axios there's some examples of how to install it like we just did some examples of we need to require that so we'll do that in just a second and we want to use this asynchronous function because we're making a request to another service and we want to wait for that response to come back before we yield it back to our static site generator I'm just gonna steal that function wholesale and let's start let's start adding this in whoops now we do need to require the Axios library that we've installed require method great now we've got that available to use down here um this URL isn't quite right let's well that's just first of all let's I think we're done with that for now nice to use the same URL that we were that we were experimenting with in our in our curl statement doesn't need to be a string okay so there's that now I happen to know that this is going to return a response object and we want the data from that response object so we're gonna do return response and this is in a try-catch so if there's an error making this this this request it will return this this error okay I think that's going to give some data that's sir let's see what happens when we when we run that so running are running our npm start again oh now what's our problem that we've got here require oh there we are have a little typo you're probably screaming at the screen as I as I typed that okay that looks a bit better so now we can see is it's telling us our build as telling us how long it took to return that data let's have a look at the the page and see what for actually and we're not seeing any data so let's see what we might be doing wrong here oh okay well we're not quite done because we're we've created this function we're not actually yielding anything from this so we need to make sure that this yields some some data back to back to 11 T so we're gonna make this isn't little asynchronous function better to use an anonymous function just fine let's see yeah that looks that looks good to me ask you have another try that it's seen my change it's picked up the change in its rerun it let's see oh there we go so now we're wielding a bunch of data it's we're kind of fortunate that the shape of the data that we were expressing in our template to start off with you know I glanced the head so I happen to know that we were going to be having a title object come back so we're iterating over all of the data that comes back and we're at the moment were just blatting the title onto the screen there's a bunch of data um let's start they start tinkering with this now first of all let's let's change the page size I don't think we're gonna want all all that much so I noticed there was a page size for parameter let's just say five of those okay so we're only getting five of those those things back and perhaps we could improve our template a little moment we just we're just outputting the title let's make this a little bit nicer let's perhaps format that with an h2 and that's let's make this a link to the actual actual document natural article rather just I'm gonna refresh myself and refresh my memory what was the format here okay so we've got title yes URL okay great - cool URL what else might we want to attack other items might we want on here I'll tell you what let's have to put the name of their yeah the source perhaps and a date I think it's good to have a date on here so we've got the source name so we'll call that so we'll get that to get to that with a particle source dot name and that's also put I think maybe a time don't publish that time looking right I think so we stopped our build running so let's let's get that running again okay so that's run successfully all right okay so now we are getting the the text of the news article from our news feed we're getting the the URL for that let's see if we take that through this should take us through to Android police which is the source of this news article try not to get too engrossed in actually reading the article let's go back the date we're not formatting that date at the moment but we can certainly start doing that all right this is starting to look like we've got some some data in a useful way this paged my kind of daily page for me it's starting to come together a little bit we're baking this HTML out at a build time I'm sure we can make some improvements here though to this to this news feed there's a few things hard-coded that we perhaps don't want we've got our API key in here now this is safe because it's server-side you know we're not exposing this in the client in the front end this is all happening at Build time but we're committing this code to our version control now so we don't really want this API key to be checked into our version control because that's gonna leak that out into the world so I'm going to abstract that out I think I can I can select it and there we go yes I see you ink that out and instead if I turn this into a template string today we can do some string manipulation in here and make this a little bit a little bit friendlier so let's instead populate that with an API key variable that we can we can place in here now where are we going to get that we could you know we could be populating that manually but but certainly we want to be able to use this in our local development environment but also we want to be able to have this run in our build environment remember we're checking this in and letting the build do this for is in the hosting hosting environment so we can use an environment variable for this so the way we can access that is through process top-end so this will have access to any environment variables in this case the one called API key at the time that the process runs now we don't we haven't declared that anywhere locally so this isn't this isn't going to work for us what we need to do is to use some kind of tool to to populate this for us locally as if it was an environment variable and we can do that using a nice little tool called dot n which is has the purpose of doing exactly what I just described so we're going to install this as a dependency as well and and start to use the structure that it tells us about here so first things first let's get this installed as a dependency I'll just quit out of that again NPM and that'll go off and install that save that into our dependencies as before that's how quick refresh of how we used that so if we just require this at the top of our top of our JavaScript file and as long as we've got a dot n file in our code it'll pick things up from there instead so tell you what before I lose the environment variable that I that I paste it into my clipboard and there it is preciously held there let's assign that to a variable rate and save that in our dot n file now this is our secret we don't a string this is our secret we don't want to commit this to our version control so I'm just going to put this also into our I get ignore file so this will not get committed it's quite nice also just to have so that other people when they're coming to use this code they know this is what what they need to populate with their own API key so I actually just duplicate that and call that got in and then we can there we go so that can get checked in so people will know to create this end file we'll document that of course so that people will know to populate this with their own key and then when we run this where are we when we run our news use file user news script will be able to get access to that data now how does it tell us to do that here we go with this so we require that and run the con config method and that should populate this in a way that we can it keeps our API key secret so let's just give that a try shall we and see see how it doing okay looks good okay great we're in good shape again so that's fine for running our build in our environment locally but we need to make sure that this environment variable is available when we run this in our build so tell you what I'll do I'm actually going to let's commit all of our changes adding we'll push our changes now as you recall from our previous example our deployment process is now linked to get so when we push our code we should see our deployments start to kick off on another deployment to happen - let's just see if that's the case freshness ok so we have another another build running here now this is going to fail because we haven't currently shared that environment variable that only lives on our local machine but let's just let the build go through it'll install any new dependencies because we've caused added a few dependencies in there but things are certainly going to fail for us yeah oh yeah we're having a having our build fail but what we really need to do is we need to make sure that our let's correct our code this environment variable which we just called API key maybe we can make that a bit more descriptive I'll do that in a second let's do it now let's do it now the school News API key just in case we end up with other api's that we want to use so change that there just change it in my sample so the reference is correct as well and of course we want to change it in our code so this is there there we go okay this is an error from when we were changing it is they're still watching but let's just make sure we are we happy in our local build if i refresh that no we're not to restart this I haven't saved my file just restart this again just to make sure everything's everything's happy okay okay we're back in good order and push this code change again just because we changed our environment variable now this is this is still going to fail descriptive and far we'll push this again so another deployment is happening but what we'll go and do is we're going to add this this API key also to our our environment up here okay so this there's a build up ready to go that will start in a second if we go to deploy settings I think we should be able to find environment okay great we can start to add environment variables so what do we call that we call that News API key and let's grab the value for that as well okay so now we have a situation where our secret is stashed away in our hosting environment and our continuous integration divert environment for the build runs but we also have it locally in our in our development environment but it's not checked into our version control so it still is still a secret for us okay let's let's see if we can see that running okay so that's it looks like that oh no okay so the so we weren't able to get the data but the build ill did still complete matching in to kick off another build let's trigger another deployment manually so now our environment variable should be there the code should be there ready to scoop up the environment in environment variable and use it and then we should be publishing publishing that to the to the build all right that's you've still completed let's have a let's have a little look okay great so now his are published version of the site getting the same data if I reload this a few times our message should should change every our house changing so our client-side JavaScript running our data source that was gathered at Build time has been there and populated our links off to the various places work that we come so we have a we have our next set of the build running ok this list at this point to take a little review take stock of what we've got to here because yeah we we we started to use data in our static site generator we were requesting that from an API and we're using that in both our development and in our deployments so this situation here this is where we are now now if you remember our API this service here our news API I think just our development version access our free access team had a limit of something like 500 requests a day were we to be recording this init with javascript in the browser the number of requests we'll be making would be coupled to the number of visitors we have how much traffic we're getting to our site you know if we have a million users we're gonna have a million requests on our data source that's that's a problem the way we're doing it at the moment is we're we're only calling that data at Build time so we've got a very light load on our data source now this is a nice attribute of pre generating as much as you possibly can and that's something I really advocate for when using a gem stack pre generate as much as you can so that you can render it ahead of time and get it ready to request not just so that it's you know we don't have to do any work for the user here because it's done in advance but also cuz it means it lightens this load on the data source um you could say well that means that this this this page is very static because we're not deploying changes very often or we're not getting changes very often from our data source but with 500 requests a day to this frankly we could be making this request and redeploying every five minutes and updating that so that's ready to go that would feel far from from static that would feel pretty dynamic if this news this news that we found here was only five minutes old likewise this probably doesn't change every five minutes we could be doing things like triggering this build to happen when the data is changed so that we only build when there's an update to show and that means that every time a user comes to this page they'll be getting the the data that was that was updated most frequently but don't need to be building all the time and there are techniques for that as well so I think that's it for for this particular example and we're still using a little bit of JavaScript client-side to that client-side rendering of that little personalized message but we're also using javascript a build time to get that query get that data from an API to get those news items pre generate those into markup that we can then deploy to the hosting environment deploy them directly to the CDN and we'll expand on that in the next example we'll start doing more request to API and start to do more things with that data still generating their markup for that's it for this example we'll move on to the next thing now I think next it's a good time to start talking about talking about this let's talk about personalization I think that this is often an area where people think you can't you can't start tackling this challenge with a gem stack site with a pre-generated site that's served as a bunch of static assets and thankfully that's that's not quite the case and we'll get into how this works um traditionally so this is again looking in our diagram of a traditional stack where we have a maybe a web server in a database running where these these things are handling the requests in real time in you know at request time the job that's been done here in a traditional stack is the web server has got its templates and whatever other logic is making its requests to get data and it's applying that data to the templates with Oliver or the logic to return generator of you and then return that back to the user in fact this operation of turning templates and data into a view or that's that's kind of what we have with static site generators now I think of static site generators as tool which apply structured data to templates in order to create views and assets it's just just a little bit different that rather than you know rather than doing it at request time instead we do it we do it here at build time we do it up front it's kind of doing the same job but it's just that we're we're pre loading that effort and I think that given that this is happening ahead of time and we're doing this before we know who the user is that's coming to a request the data I think that's why a lot of people think that you just you can't do anything other than you know one size fits all content and luckily that's not quite true it's worth as just looking for a second about about out of view at what personalization is I think of personalization and universal content has a bit of a spectrum you know is it's at one end we have content which is evergreen and good for anybody no matter who they are they all get the same content at the other end of the spectrum we have content which is being served up specifically to an individual you know you've maybe authenticated we've noticed who you are so we can serve something specific to you but in fact there's a lot of things that are in between here and a lot of sites actually lean further down this end of the spectrum than you might expect so I think of this spectrum is also containing localized content so that's content with meit which maybe has been populated specifically for people who are coming to the site from a particular part of the world we sometimes think of internationalized content as well where where it's being translated into different languages but localizations ever so slightly different this is targeting the content based on where the visitors are coming from now we don't need to know the exact individual that's coming to that we just need to know where in the world they're visiting from and what information might be useful to them but it's certainly not quite the same as universal content and then the next step in there in the spectrum is what I think of as targeted content so depending on who the person is but not necessarily down to the very specifics of who that person is so what kind of user are they are they an admin have they got rights to a particular section of the site can we then Todd content that's tailored for that their group of people if you like so you might think about roles and targeting content that way again it doesn't need to be a one-to-one relationship between the type of content there is and the individual this might be kind of batches and groups only when you get right to this very end of the spectrum where the content is very specific to an individual with Jam step we can actually we can actually address every area of this spectrum it's just a question of how much we do in the browser client-side with JavaScript I mentioned at the very beginning of this this video about the stack moving up a layer moving closer to the individual closer to the browser and that's what javascript gives us because it's a runtime that runs right there in the user's browser so using that and some techniques we can get to the point that we're delivering very personalized specific information to a user but there's a whole road to travel before we necessarily need to do that and what the next example what I want to do is I want to talk about creating some localized content as well so there is a napes of an enabler that have allowed us to do that and I talked to the very beginning again about enablers and just to recap now some of the enablers that help us with this our automation we've already started introducing automation we've got builds that run on command they're scripted they're repeatable they're predictable and we can automate their builds a number of tools and services are starting to emerge we're now we've already been using services for news api's we're hosting on a on a service that gives us continuous integration and those kind of things and there's been a huge explosion in the API economy so all of these different resources are available over API so that we can now leverage one of the key things for things like localization and personalization are the kind of services that we have now at the edge at the at the CDN the network that's delivering the content if we go back to this diagram once again you know I've been talking so far about building things ahead of time and then deploying them directly to a CDN the fact that all of our assets are there and then they're ready to go when you comes along means that with a tiny bit of intelligence at the CDN layer we can start to do intelligent things with that information with that data we can route different people to different assets that are on there and we'll come to that in a minute but I don't want to be accused of oversimplifying this versus the traditional stack you know I haven't included a CDN here anywhere so you might be thinking well this is all fine if I'm we're hearing about the power that you can do with things that are CDN we might we not just have that here as well and of course that's absolutely fair in a traditional stack often there is a CDN included as well the challenge there is that in a traditional stack when you've got a CDN as well let me expand this diagram I didn't really want to include this in my initial diagram because it it looks so complex because in sweer not selling everything just purely from a CDN but we're also serving some things from the web server which are getting data from the database compiling things either returning directly maybe pushing something some things to a CDN to be cached maybe some things have pushed directly to the CDN from Build time the the the visitor the user is making some requests with CDN some requests to our web server there's complexity here so adding a little bit of logic there impacts a whole load of the stack whereas with the Jam stack approach everything is the CDN there's there's there's no other logic to worry about for other bits and pieces behind behind the scenes here we've pushed all of our resources to the CDN so then if we do apply some some simple logic here to root different people to different assets that are there we don't have to worry about some of these things missing and and having to pass through so other bits of infrastructure so our next example what we're going to do is we are going to start generate generating some localized content and we'll we'll start building that out now the things that we're going to do along the way we're going to generate different views for many locales so we're building on the example that we had before and then what we'll start to do is we'll start to route the traffic at the CDN level to the different views different resources that we've generated in popular at the CDN then there's an extension to that what we'll start doing is we'll start automatically generating our CDN config as well so those are the things we're going to do skipped over this but let's just remind ourselves the code for this it's just a copy of where we are starting point is a copy of where we got to an example for but this is example five so you can go directly to the repo and poke around with the code if you like find that out Jam stack x5 okay so with that said let's let's get stuck in so I have created a new site for this it's exactly the same as we've been looking at before but since it's a new git repository I made a new site for it let's have a quick a quick look it looks yeah we're familiar with this now we've got our new stories in there behaving the way we are kind of expecting that let's let's start making some changes to the code so so where to begin well at the moment where we're making this request for our news data from this from this API but we do have this facility to specify the country that we want to get them useful so let's just go and take a quick look at the the docs for this and here we are this is the news API dot org site again and this is in fact the feed we're using as a country code and it supports let's look down here yeah here we are so the country parameter suppose all of these so we could we could generate a page of content for every one of these countries and then route people to it I'm just going to start with a handful of them handful of begin with because each of these requests isn't going to be is going to be another request to the API and I'm you know I'm still on the free account here in this little demo so I've only got 500 requests a day and their likelihood is that I might want to make lots of changes to this so I just don't want to be hammering the API so let's just be a little bit efficient about that but perhaps we could create ourselves a little set of countries okay so if we make ourselves Stella Raye I'll do is I think just so we can expand on this later on and put all of these in here but just for the sake of not hammering the API well we're just developing developing it we'll just we'll just use these if we look at our our existing function at the moment we're just doing this with this one request so perhaps if we take this out put this as a as its own function then we can call that for each each one of our one of our feeds so see you know what we're just going to take this whole thing so there's a sinc function - no longer anonymous and it's cool it's get news and we'll pass in the country and then we'll use that country yeah there we go now at the moment is just returning articles but we're going to want to maybe change the structure of the of the data that comes back here so that we can use it more conveniently in our in our templates so let's sir let's return a little object here and perhaps we'll have a couple of keys in here so maybe you have country and then the country that we passed in and then the date resurfaced stick with referring to those as articles then we'll go directly into the articles to get that how does that looks good pretty good to me okay and then we will call that for every one of our members of our array so let's do that this is this is gonna return a promise of this data in this structure so let's just collect these together in a promises array Newport News promises and we'll iterate over our list of countries which we have to just grab in a second so would you let's use a map for this and cool news great to make sure we have access to that let's just require our list of countries okay great should now have access to those and then once we've returned all of our data and got our got our promises let's let's get all of that so this is going to be this is going to give us a room an array of these these objects so let's let's remind you all of those together so we all need to do that once the promises of all returned to let's use rapport missed all that and their promises so when they're all returned and then what we can do is we can we'll take the news objects that we've got back so each one of those those items and what I think we'll do is we'll just concatenate all of those together into one array until this it's actually just just we'll take a look at those as we're going as well so we can just see just inspect those a little bit we're gonna return from here is all of those have an array with all of those other arrays bunched together so let's use a little trick so we'll concatenate all of the array objects that that's good I will need to prompt return this to 11 T as well see how's that looking looks pretty good just give their starts I think about so let's see if this this does give us some data back now our data's gonna come back in a slightly different shape so I think a sensible thing to do is to change our template to make sure so now we've got an array of all of these items so let's just let's just look at the first one and they in the array first of all where's this this is telling me problem I think we're probably not that's close it's just complete this may be slightly better shape okay let's give this a little run see if we are still getting data okay so we have a problem come five countries dot Jason give that another whirl okay that's looking hopeful so we consult out the shape of our data so we do have our news objects which is being passed back to eleven T for our static site generator and that's looking how we'd like it so we're getting a country member with with the country code in there and then an array of our of our objects so that's looking hopeful let's now see if we're actually saying okay great so we are looking at the first item in our data data set this is an Arabic so so good we're getting getting data the way we want now what's next well we're going to want to make a page for each one of those at the moment all we have all we have is this is this index page but really for each one of these these items we're gonna make it want to make a page for that now static site generators very very good at doing this kind of thing as well creating different different files for different sets of data so what I think I'm going to do so new duplicates our index page this call this localized because we're gonna want this to look actually the same we're not gonna use go just for the for the first item in the array but we're gonna we're gonna use a little trick which which 11c has based on pagination now a common pattern when you're working with structured data is you know maybe you've got a set of blog posts or a sort of pages you want to have a listing page that you were to rate over that you don't want to have every single one of those entries visible on one page maybe you'll paginate that so that you can have sets of 20 and page through there kind of any next page of that and eleventy has a nice model for that and you can actually use that to generate just a single single pages as well rather than listing pages so I'm into cheat by chair putting in some different frontmatter very similar to what we had before so I've just changed the title now to daily briefing because this is starting to become a page that's got a different purpose you know it's our our set of new stories to start the day and what we've got here is we're starting to use this this property of eleventy this pagination feature it's gonna say where are we going to get the data for this pagination well we've got our news collection our new set of data which we're we're generating over here now the page size if we were to want to create a listing maybe we would have 10 of those and in the code underneath with maybe iterator out of those create a listing of these pages but we're just going to have a page size of 1 so it's going to make so it's going to make a set of individual pages will have this little alias here so we can address it more easily and now we've got the chance to specify what the permalink what the address of this pages so from our news data object will it access the country so in other words this this little chunk down here and we'll we'll create that and an index file for that so this page will live at that address and then for each of the pages well this is just the same code that we had before for our index page and I don't think since we structured it the same way I don't think we're gonna you need to to change anything that should work just as it is let's let's give it a shot and see if that's gonna generate a bunch of different pages for us well yeah indeed it did so we've got now all of these different pages created and let's go and take a little look we should be able to access tonight a new so just refresh my memory what what languages does we have AE Australian as well let's have a little go for that one so there's our Australian news great we've got we've got news pages for different for different regions now um tell you what let's let's make let's make this page a bit of a listing of these so that we can more easily navigate our navigate our way around it let's change that on the about page so here you know since we have access to this news object we can start now to to make use of that so let's have just loop over that with for I don't know item in news just close that loop before I forget and then let's let's simply put a little link to the page for each one item book country let's just put the same thing here as well some country all right so now if we run this again in fact I think it's been watching us yes great so so here we are we've got pages for each of these each of these locales so um well why don't we this is looking good to me why don't we now create this great one for all of these pages you know that's that's the nice thing about structured data you know we could get this set again get the entire lot and we'll put it into our countries here we are again so if I can get there the multi-camera formatting here we go Greta fine okay missed one yeah okay so let's see I'm just gonna restart that make sure it picks up the data wash load of pages made lots of pages created if we go to our yes so we've got one for all of these now so build your page great similar themes coming up in all the news stories today but yeah there we have it so we've got we've got a bunch of different pages now we're not directing people to these specifically but there are addresses that people could get to so what's the what's the next thing how are we going to actually start to direct people at the CDN level directly to the right to the right page for them well luckily I was talking about enablers and the fact that CD ends now can have different logic lacuna you can execute neckla is no different to that I'm using that the fires are example and what we can do is we can use the redirects support as a country yeah yeah let's just look at them look at the the docs for this redirect by country or language so this is becoming more popular as something that you can access at the CDM now CD ends have traditionally been very very complicated and difficult to use or very much - I'd say a pro a pro level thing to be working on and it's often problematic for people to to configure these really efficiently the barrier to entry is coming down all the time for this and configuring the logic at the CDN level Fernet the phi is as simple as having a redirects file and then putting this kind of declarative confident here so so the way that this this works for instance this this logic is saying for any visit coming in at the root level we're gonna direct it to this path instead it's gonna use a 302 so it'll do a redirect but this is only true if the country is Australia or New Zealand so we can start serving localized content this is actually exactly what we want so why don't we make one of those ourselves so let's go back to our code so let's let's create a redirects file but rather than typing that for each one of these let's generate it automatically we already have this object we're using a static site generator that changes data into interviews let's let's make one also for creating our redirects so let's say it's a redirects njk and what we'll do is we'll say we'll ask it to create the file in the right place using this permalink oops property which is gonna be conseguido X that's the name of the file we want to create so the pattern then is any traffic that comes into the the root of the site we're gonna want to redirect that to a country so let's say that's a GB for instance index dot HTML that's whether the content is served and we're gonna want to do that with could do that with any response code that we want in the examples there it was using a redirect I'm actually gonna use a rewrite instead so I'll just do with it a 200 so the URL for the user will just stay exactly the same but behind the scenes I'll be serving the content from that resource but we'll only do that if the country equals GB so that's that that's the form that we want but we won that fur for every every item so that's for every country so let's now let's do that programmatically we've got this access to know all of the items in in News know in yes in news that's our news object close that loop so what we want to do is rather than rather than have GB we're gonna access the item country so we should be able to then generate this this format of redirect file with all of our entries created for is programmatically at Build time so it's let's get there give that a whirl okay looks like that's done its thing so check this out yeah there we go so you have an entry for each of these things we could actually change clean up the white space a tiny bit in fact there's a couple of other things I might just add here so let's just do this just to clean up the white space we don't get those empty rows in between but there's another couple of things I'm going to do here so since we're gonna create a page for every country one of these should probably be to the default rather than having an index page so I'm actually gonna I'll delete the index page now so we're not gonna need that we're gonna serve every every one of our views for one of our localized generated pages it's just it's just fewer things to to generate and what we'll do is we'll set a default here or like a fullback I'm just gonna pop over back to the docs for a second because what we can have is we can also use this format for serving custom 404 pages now strictly speaking we should probably create a different 404 page for every language localized into the language or into the into the locale the translated perhaps into the correct language for our purposes that I'm just going to use this as our way of generating a fallback or rather routing people to a fallback page so it when that the way the rules are applied is it starts at the top and as soon as it finds a match it serves that sir that that entry but what I didn't do is I'm going to make the English at the British page be the fall back so if for any reason none of these conditions are met we'll just serve people this page instead that means I can get rid of that that index dot HTML file and we'll serve that page instead one other that we are we've generated that as well um one other thing I think we might do here is because it's gonna be difficult for me to demonstrate this to you in a second we'll will deploy this into our hosting environment and then you've kind of just have to take my word for it that if people are viewing it from different places they'll get routed there because I'm only accessing in accessing the site from one location but just for the sake of demonstration I'll we look back at the docs here go to our country and language so yeah these are the conditions if if if the locale of the visitor is detected to be one of these look one of these regions will route people there we can also do the same for language settings and I can control that a little bit more easily to demonstrate that so based on that what I'll do is I'll also create I just create one for the sake of just demonstrating this but let's repeat the French site with 200 so again we're rewriting rather than redirecting and rather than country we'll use language equals so this will look at the accepts accepts language header in their browsers in the views of US browsers and if it's if it's set to french will serve the the source from there if that's not the case it will look for the location see if it's the correct country and route them to the right place they can't find any of these things will serve the English page so I'm going to generate that one more time I wonder if I've hit Mike I know we're fine okay we're good look at the redirects page okay so our workspace has been cleaned up we've got our language option at the top we've got our 404 at the bottom this is looking good to me so what I'm gonna do let's commit these changes rewrites commit those changes will deploy them so we'll push them to our repository which in turn does a deployment and it's gonna watch that happening I go deploy it's just a little reload okay so he wasn't in building now we should see at the point that this is this has all been generated we should see that as the deployment has happened now if I will notice the redirects file it will I should really have removed my logging it will notice the redirects file set up the configuration at the CDN level we should get some kind of confirmation that its notice those yes 56 redirects rules have been processed we've uploaded all of these new files that we generated for all of our our various versions let's let's go and take a take a look at this so this should even though I don't have an index page yet we've been taken through to the to the the English version of this we should have yeah here's our listing for all of the different versions but if I change that I've got a little extension here just to make it easy to change my my language settings for the for the browser that happens it happened faster than I could I could I could I could refresh actually does that fool me so now the same URL is being rewritten to the french version of the site so we've got the the french content it's exactly the same as if I'd chosen to go directly to here thank you I don't want to translate if I change my go back to the home page if I change my language to back to English in fact I think it will happen for any other language I just default back to the English English version great that seems to be working working nicely so let's have a little little recap of what we've just done so now we've at our static site generator we've generated views for many locales and we've done that by querying for different content for the different locales our API that we're that we're requesting from supports that but we've used a static site generator to generate the views for all of those locales right away then we set up our configuration to route the traffic at the CDN CDN level to whichever of the assets that we pre generated this appropriate to the the users that are that are that are visiting the site and the generation of that that config has happened as part of the static site generation as well so it kind of streamlines that whole process for us once we understand just how that config works this feels to me like we're moving from like Universal pages across sir to localized pages and you could argue with the addition of that that language header as well that language detection starting to target particularly users as well so users who have identified themselves as wanting content in a particular language we're starting targeting people targeting content specific to those we haven't got into personalized content yet in the following example we're gonna get more into this realm a little bit but just as our a little sense check once again was that jabs Tex we're doing quite a lot of things there well yeah I'd say it certainly is you know we're using still the timing of JavaScript in the front end but really the JavaScript at the moment is being used to generate the the site make the request to that API also generate the the configuration and build up the the markup that we serve where pre-rendering all of these files we're serving everything directly from a CDN and even though we have that tiny bit of logic that it lives at the CDN we still don't have a web server to manage we've got no infrastructure that we're managing at the moment everything is pre-rendered and served directly from from the edge from a CDN so yeah I think we're we're still very much in jam stack territory okay so I think that that wraps it up for this this example we'll move on to to something something a little bit further on building on this next what I wanted to do next was start to introduce a little bit more in a client-side web we're already doing a tiny bit of client-side rendering we're only updating one tiny string from a random set of messages just to prove the point the most of what we're doing at the moment is is server-side rendering build time we're generating all of those content pages from from a content API building those out and then there is a tiny bit of client-side rendering happening just as a little embellishment but we're gonna do a little bit more now here we're gonna actually start bringing different kinds of data that maybe would be a bit more personal to the the user or bit more targeted for the particular user rather than just being at a country level so just as a little recap this is this is our situation at the moment we're pulling our content from this data source at build time generating our build propagating that to the to the the hosting environment so in the browser comes along it can request those pages and everything's ready to go then a slight change now is that we'll add a little bit more JavaScript so in the in the browser client side we'll be able to use JavaScript so interrogate API is not just in the browser but also from another data source so we'll have multiple data sources in play now so yeah we'll introduce some client a bit more client-side rendering we'll make those client-side API calls will interact with browser api's and also towards the end of this example we'll start to introduce serverless api's as well so we're going to be building our own API layer but we'll do that with serverless functions this work that we're gonna be doing in the browser we're gonna use progressive enhancement for this now I want to just talk about progressive enhancement just for a second because this is something that sometimes gets a little bit overlooked progressive enhancement is intended as a safe and performant way to add interactions to websites so that you don't have to have an all-or-nothing situation and the way I like to think of it is this I like to think of it as deciding what is critical to the experience so our in our example we might decide that the news is critical it's a news page so we want to have the news there without any dependencies so this is all pre-rendered so when the browser comes along there's very little work to do we'll get that HTML and we're able to just display it so we'll deliver as much of this as possible using as little as possible so there are very few dependencies for the the user's browser and their device in getting that that to experience that we've decided on then after that we detect what supported features there are in the browser and enhanced the experience where possible so in the example that we're about to work on the kind of things that will detect in terms of supported features are the ability to get the user's location from the browser api's and then on the basis of having that enhancing the experience to add in our case we'll add some weather information for the user's location so we'll be doing this all with this progressive enhancement approach so doing as much as possible early and then just enhancing for the less critical pieces as an enhancement where those are available ok so let's get into the example this is example number six for client-side API calls once again the the code that we're going to be building out that's going to be a to github repository which you can get to at find that at Jam stack x64 exercise 6 there are a few are the links and resources in this in this example as well and those will be all on the github repository so let's let's take a little look before we dive into the code I want to actually just introduce you to the services we're going to use I'll catch you up a tiny bit while while you blinked between between the last demo in this demo I've done the same thing again I've copied the previous example into a new repository and I've set up a new site which is pointing to that repo but it's exactly as in fact let's just open it up so exactly as as we left it we've got the different pages of the different languages and I'm serving by default the the British version there but what we're gonna do is we're gonna we're gonna add something some more content in here so before the new section we're gonna add some some weather information which is specific to me to where I am and we're going to use a couple of different things for that we're going to use another freely available API this is open weather open weather don't open weather map to org again these links are will be in the repository so if you want to follow along there you can get access to those there as well once again this is an API that you can certainly pay for and if you're going to be using it in production that's exactly what you should be doing but for for our purposes for a demonstration we have there is a free tier that gives us access to some API is that we can we can start querying same kind of pattern to to the news api's who are using before you'll need to just register get an API key that then you were able to use in requesting things from the API there's all kinds of things that we could be using from from the API that's available to us I'm just going to use the current weather data and let's just look at the API for that there's a bunch of different things that we might be able to do we might be able to query for it based on the city name or city name state state also using country or a city ID what I'm gonna go for is I'm gonna use geographic coordinate so we'll be using long to Juden latitude so we can the format of there so we pass in a lat long and s and an API key and then we'll get this sort of data back so we'll be able to start to use this data to embellish and enhance our our site with some information about the location in order to be able to do that we need to be able to get the users that long information and to do that we'll be using javascript to talk to a browser API now this is a browser API called geolocation and there's a method on this API called get current location which is exactly what we need just popping down to the bottom here on on on the MDN documentation site this has got great browser compatibility but we're still going to use some progressive enhancement just to check that it's available just because it's good practice whenever you're using an API like this just to make sure that you're you're using something that's available to whoever comes along to access it a little note as well that this requires HTTPS now we need to be making secure requests to our web server to be able to do lots of things that are interacting with browser api's this is for purposes of security and privacy and so we need to be serving this over HTTPS fortunately the environment that we're serving this from this is HTTPS by default and wherever you're hosting your sites from this is something to look for making sure that you can support a secure protocol for serving your site's so much of the modern web depends on HTTPS and it's just good practice to have that in place but we don't have that currently in our local development environment so I'm going to just comment in a second or two about how to get that set up but let's just have a little look further at what using the geolocation API looks like well here we are we can can make a request to the Geo code to your location API ask for the for the current position and then we've got and then this this method accepts a couple of parameters a success handler and error handler and we can pass in some options as well so the second I'm going to steal this wholesale but before I do I just want to talk a tiny bit about making sure that we can we can view this locally in our local development environment without without worrying the fact that we need we need HTTPS so I'm just going to pop over I think to so I'm gonna over back to so his our new our new project I knew or I'm you know our new folder which is copy from our previous project I'm just gonna open up the code editor as has we've been doing all along this should be familiar from our previous examples but the one thing we're just going to change to start with is our eleventy config you'll perhaps a call that we're running this script to build things we're running our eleventy script to build things when we're developing locally we're running this start script which runs eleventy serve this is the thing that watches for changes starts a simple web server and then refreshes sings for us internally that's using something called browser sync and by default we haven't got that set to serve things over HTTP now we can we can change this reasonably simple it simply there's a couple of steps to that so let's look at the eleventy config for this thankfully eleventy does support passing in some configuration for browser sync so I'm going to do that now I'm just gonna paste this in from where I had it before so this is another method that lives on eleventy set browser set config and we can pass in some various options here where we're passing in something for HTTP which is an object that les is defined where our key and our certificate are these are these are both resources that I've set up previously so that I could have HTTPS running on my local environment it's probably just a bit out of scope of this this tutorial to talk about setting that up but in terms of configuring eleventeen this is or will have to do but you are gonna need to generate these things and trust those on your environment first of all so what I'll do is I'm going to drop a couple of links into the readme of the github the git repository for this project so we ought to step through those things and make sure you've got this this up to speed I'm just gonna save that and make sure I'm able to use that as we go as we go forward so now if I with these things in place and assuming that you've you've created your your certs and you've set up this configuration now when I but now when I when I start my it's on my little development server I'm hoping what I should see as I should see that the URLs for this yeah we have some HTTP set up so now when i when i open up my when i open on my page i can i'm serving that over HTTP so this is secure so now this means that I'll be able to use those facilities within these facilities here to get access to the the geolocation API so let's let's do that next let's start adding from JavaScript to this one I actually just I'm gonna steal this this is too good not to not to steal and then change back to our code at the moment we're just including this this one bit of JavaScript this is all the client-side rendering we've got just appending one of these strings we're gonna do a little bit more than that now so let's create another file here let's call that weather and so I'm just going to stop my stop my browse my my automatically builds happening for the time being just paste all of this in we don't need these options these are we can have defaults I think the default options will be fine so I'm just gonna simplify those by taking those out but we do want to call this just geolocation API to say get current position and and if if we succeeds then we'll start to get things like the latitude and longitude and just lock those out it's gonna save that now we haven't included this in our in our page anyway yet so let's see I think just on our localized this is this is fairly rudimentary way of of including the JavaScript this is fine for our purposes we might think of having some kind of build mechanic to munch these files together or perhaps to create different packages and deliver those differently but for our purposes this is absolutely fine I'm just gonna call that weather safe that I think that should be there should be enough to get us Taylor started what I'll do before we continue them is I am just going to just trim down the number of pages we're creating because I'm just conscious about how much we're hammering the API making these 55 requests every time we reload so I'm just going to reduce reduce this down let's let's take a bunch of these out there we are we're only making a couple of requests to the API now we we could certainly be doing something a little bit more elegant here such as caching that data the data that's returned after one of these requests and keeping that as another data file and while we're in development mode we might be just hitting that directly rather than requesting anything from the API at all but our being a bit lazy in this example and just sticking with what we've done and not adding that that complexity for now but just for the moment I'll just make these two these two requests okay let's let's start this status up so if we open up our site oh well first of all we're getting a message that we can't get the asset at the root of the site and that's correct because we we deleted our index file we deleted that and we were sending everything directly to the correct localized page so we don't have that logic happening here in our dev environment we've only we've only implemented that up at the CDN so if we go directly to our our page now I tested this a moment or two ago so it hasn't prompted me for the location approval you can see here actually I've allowed that already so if we go to our looks if I could go to a console we should see yeah there we are so we're starting to look out our our console data great well that's that's our that's our first step that's that's a good first first step I think it's important though that we just make a small change down here and we talked about doing progressive enhancement to make sure that we're not using features that maybe not every browser has navigator dot geo location has really good support but nonetheless is is pretty good practice to just test for that and we'll only make this request and go off and do this this piece of activity if if this is supported there's a few other bits and pieces along the way that we'll do to make sure that we're not we're not doing anything that will appear broken as we try and do this but that's a that's in kind of first step whenever we're using browser features such as this okay so um so the moment we're getting our coordinate data our lat/long but we just we're just spitting it out to to the console let's make use of that now let's just go and take a little look to remind ourselves about how the weather API uses this let's go back to the documentation for coolness here we are so this is the this is the request that we're going to want to make so let's let's pop that into our code so so let's just capture that first of all our URL that we're gonna use is the protocol in and we've got a few variables actually this is kind of helpful we might as well just use that as is and API key fact if we we can call these there any pause and you'd okay because that way we don't need to do anything else with these these are torn fabric you get rid of this and to make this request what we'll do is we'll use fetch for this fix this URL and then take the response let's just transform that Jason okay okay and then with that what we're gonna do with that that data yes well for the moment let's see what see what this data looks like that we're getting back from the API okay looks looks good let's also make sure we've got now I've got that stashed somewhere okay that in and let's see see what our browser is telling us as we as we give this a look great okay so we're getting data back from the API let's have a little look at the shape of it okay so it's it's got our long city into the name of city and district Arsenal but yes that is indeed where I am in in Great Britain weather we've got mainly cloud description broken clouds an icon there as well that seems about right temperature 280 all that seems a bit warm I guess these so it's returning the data at the temperature in Kelvin which I don't usually use but that's I guess we can we can probably transform that into Celsius that let's just double check let's see if we can find yet a great metric let's let's do that so that we don't have to speak Kelvin okay let's have a little little inspect now whether there we are temperature six degrees it's very precise okay great well we're getting some data that we can now we can now make use of so let's let's now get it into let's get it into the site as let's go back into a page your template that we're we're we're using it so here's is where we're displaying our own news articles I once again I'm just going to I'm just gonna stop that automatically rebuilding just for the moment has to be a bit more descriptive in here let's put an h2 in here for use in your country let's have another conversation up here where with perhaps whether yeah you what are we gonna have let's let's think there's the just go back and have a quick look at the data oh it's trying to try to reconnect to our live reloading but we don't have that going now so we've got the name for the city we've got temperature the bits and pieces okay yes let's get those let's get those in so give these a place to be displayed start with the city have maybe three or four of these cities have a temperature say the main kind of status and maybe a bit more of a description let's start start with with those and let's populate those you know whether so so you know want to do this rather than logging this out I will leave the logging just for the moment but let's let's start depending this - to the site say this one was tax content it cools and then we'll grab from the data first one was the name I think for the city it's just like a few of these what did we have we had temp we had the main we had the description this was the main dot temp and this was in sorry cool this is a weather object weatherizing a riff some reason there's an array here of blue there are different states but we're just going to grab the first one let's grab first one and the manor description okay [Music] okay see see how this looks see if we're starting to get content flowing in there's another little reload okay so you could see there's a bit of a flash of unstyled content or you know unpopulated content rather while we're making that request and going off and getting the data but here we are we're getting our data into the site it's not super super beautiful to look at but it's descriptive and it's it's particular to me in my environment let's put just like this a tiny bit nicer degrees see if that's correct now something else that we might want to do since we were now we're trying to use progressive enhancement here we're trying not to to make a call to this unless it supported but we do have now this this thing on the page the whole time so why don't we why don't we actually rapper in a div and we'll give their idea of whether and what perhaps give it will style it initially it will hide this it's a hidden class and this in our template that has the CSS are minimal CSS is add the hidden class here display:none great and then what we can do is we can we can remove that can remove that class once we've populated all of these things so only if the request only so first of all only if this is supported will we make the request at all and then only if we successfully get the data back populate at all will we remove that that class list great so now if these things aren't supported at all we won't we won't be will be thinking we've got a failed page nice oh no I didn't get my escaping right okay that's sir it's just just trying try Darrell eNOS see what how we how we get on here okay that the job I thought I'd need to escape that fine all right so what status are we in here then now we've got pre-generated news information that's coming there's been localized for my for my country and then this has been enhanced with some weather near me from a client-side API call now I could obviously be styling this up and these could be some iconography and what-have-you but we're just trying to prove a point at the moment however we do have but you have a little bit of an issue in the our this is our JavaScript that is being executed in the client we've got our API key in here we're making an a request from the client to this API which is which is sending our API key you know over the wire and it's coming down you know coming down in the code for the to the browser so anyone could inspect that anyone could see that really we want to we want to squirrel that away we'd rather have that somewhere so I private now this is exactly why very often will introduce a server we won't want to be sending these kind of requests directly from the client we want to be doing something like this from a server and even when it's something as simple as this kind of an API request we might end up introducing sir bill server logic just so that we can we can create a proxy or we can have this code being executed there so perhaps what we should do is we should take this request away from the client and let's let's create this in a server but we don't want to do it we don't want to introduce a server lest you des use a service function for this we could certainly proxy this request through a service function so that we don't need to be sending the API key in in the wild as it were so how could we how could we do that well the easiest thing to think about here would be to create a a lambda function and then write our JavaScript in there fortunately we can we can do that reasonably simply with with notify nullify functions what I'm gonna do is I'm gonna I'm gonna make a new folder here I'll call it functions I'm gonna create a JavaScript file in there called with an API look J yes and if we go through this process and we deploy this to notify and tell notify that this is a service function this will put it to Amazon Web Services has a lambda function and they're set up all of the rules to do like the API gateway and all of the permissioning on our behalf so we'll get an endpoint that we'll be able to just hit and run this and this won't be running in our environment anymore it will be running as a service function the question is are our service functions Jam stack but you know perhaps we'll come to that at the end when we review about know whether everything we did was was Jam stack or not but for the moment let's let's let's write our service function I'm actually gonna cheat here and I'm just going to copy and paste in a function already written here we go now this is going to look very familiar first of all Axios we were using Axios at the very beginning when we started pulling in their whereabouts is it in our data in our news data here we are we're using Axios we're making this actually as request to some feed there we're gonna use the same thing here in our service function we can use Axios and then we'll make a request to it a few things that maybe look a little bit different to what we've seen before well well first of all we've got where it exporting this handler function and this is the function signature for a service function we're using this asynchronously because going to await the response from this this Axios get requests the weekend when we call a function this way we get access to things like the queries for doing parameters and we can set a callback and what-have-you so what we'll do here is we'll we'll construct our URL we'll we'll want to put our lat/long just as we were doing client-side in our javascript we're going to pass in our weather API key now once again as we did before when we were requesting our our news API we were using a an environment variable there we'll do exactly the same thing here as well so we'll pull out the lat/long from our query string parameters populate our URL and then we'll make a request to access to that URL using Axios await that response and where we get the response will proceed we'll send our response fire a callback in the body of our response sending our data back and we'll just stringify that so it comes back as a string response for the client to handle that's all there is happening here you know it's it's ten or twelve lines something like that when it's all all there and included we don't need to add another dependency because we're using a dependency that we already included in our package JSON and when we deploy this to net if identify will we'll kind of zip all of this this code up with any of the require that it might have any of its dependencies and deploy that all all for us but we need to tell it to do that and add another file in here called Fi and this is gonna have a few bits of configuration for us based on what we want that the fight to do when it deploys the site for us now here's a bit of boilerplate the time that I've already created so this is gonna happen at Build time you might recognize these from when we set up our site in the first place we told notify what command to run when we want to build and which directory to publish can actually pop that is this in here so we wouldn't need to populate that manually in fact what I'll do is I'll I'll add this to the code repository so if you're cloning this and getting a site running you won't need to populate this but what we also need to do is we need to tell that the Phi that's turnout Phi that we've got some functions that we'd like it to deploy for us as well and telnet if I where to find those and I put those in source and I used underscore so that lemon tea would ignore it and then functions that should I should do that I think okay so when we deploy that we're going to end up with a URL with weather API in the URL that we'll be able to to make our request there instead of instead of making our request directly to the open weather API so let's let's make a change there in fact we're not gonna need this but I will I'll capture that and I will add it to our dot in file so we got two two to use that at least keep track of it like this just to be good semi documentation and we'll want to change our client-side API okay so we can now be rid of that what's the URL that we're going to understand where we are let's do away with one of this so this is actually going to be relative to the the root of the site we're serving from and that if I has this little convention where any functions that you deploy live in a functions folder and then the file that we call it will become the name of the will become the path so we call that weather API so yep now we're still passing the lat/long through as we should but I think from here on in we won't need a skivvy units okay so we can stop this building for the moment so I think we should be in good shape there I don't think we're gonna need to change anything elsewhere we're now sending the the data to notify functions to get the response doing exactly the same thing with the response when we get it that's sir let's give this a shot this let's add all of our changes beta and API all of these things will push those and let's go and let's go and watch watch things happening at the build just refresh this okay so let's see how things a building should be able to see things like the the functions being packaged up in our API being created for us so it's getting its dependencies I am still caching as still logging out the the data as I said I'd remove it I will promise I'll do that in a second but we're only at the moment on your quest in a couple of different pages here we are so function directory found so it's found our functions directory and it's using a utility called zip it and ship it which packages up all its dependencies and creates the functions good that looks so let's go and preview our deployment and as our news pre pre generated in there oh and there's our there's our data now it did again it didn't ask me for permission full disclosure I tested early a little bit earlier on so we I've already granted the permission to to get location on this URL but this new deployment that seems to that seems to be working nicely you should just have a couple of pages let's make that change are just just for the sake of tidying up after ourselves I did say first of all yes replace all of those and where was that logging here we are take that a little bit of logging out that's just been pestering me this entire time okay now we'll commit that all pages push that to our repository which of course will trigger another deployment and we should be we should be just about done look at our deploys a new deployment running should be reasonably fast because we haven't got our cache - we have got our dependencies to install they're being cached it restored from the cache there we go all of our pages being made without all of that logging our function being packaged up and sent sent across to where it needs to go post processing finishing up let's go look at the side ok great so I should now be able to go to any one of these as got to the Italian page see the Italian Italian News weren't translate and even though we've got the little the Italian localized content we're getting the weather specific to me and you'll notice that this this headline this title wasn't presents until ever all of their the data was that ready to render let's look at it on another page if we can Canada oh it's happening very quickly so the URL is the data is being returned quite quickly now um there's just ugh just sent to check this the the code that is coming down the wire now we don't have we don't have any any secrets in here we're not sending any secrets down the wire and at the point that we we request the request the data if we look at the with the network requests happening yeah so here's our net worth will requests being made to our API our API being served by service function and there's no there are no secrets in here so this is this is safe now excellent we're in much better position so let's just review for a moment let's just think about what's what's happening happening now now we've got a site that we've built where we're pre generating a build time whole host of pages based on data that we're getting from a third party API we're baking out different pages for each of the different locales at at build time and we're populating those are all to a CDN then when a browser user comes along in their browser they're making a request for that that content they're getting the data back instantly and getting the the news information correct for their location because the CDN has decided which bit of content to send them which file to serve them back and then once they've got that we're using progressive enhancement with JavaScript to say does the browser have access to the ability to to look at location data and if it does request permission from the user to access that and once that is being granted make a request to another API which is actually going to a service function that we've created ourselves as a proxy still without any web servers involved returning that data and then enhancing the the view in the in the client with that data we're in a position that we're using server-side rendering for the meat of it but clients own rendering for some progressive enhancement and calling those different api's so where does that leave us you know in terms of Jam stack yes we're we're pre-rendering these files were serving them directly from a CDN and although we've got an API that we've now created ourselves granted it's just a proxy but it's still an API service that we're now maintaining as a function we're still doing that without having the requirement to run a web server so I think even with all of those things happening was that was that Jam stack well yeah absolutely it was um it's worth thinking I think for a moment about the kind of types that the kind of sites that could use this kind of in this kind of set up and this kind of flow you could well imagine that the kind of page that we're projecting with all of the the information that we know ahead of time could be things like product pages where we want to make sure that search engines can easily get to them very quickly get to the data very quickly and then we might be embellishing through client-side API is things like latest prices or stock levels or those sorts of things or even starting to add authentication for the user and a shopping basket all at this level but based on product pages which have been built out ahead of time our service functions Jam stack I think that sir may be debatable because if we look at this definition of jam stack this is talking about pre-rendering files and pre-rendering assets service functions aren't really pre rendering those are happening out request time but certainly they adhere to this part they don't mean that you have to introduce a web server or manager web server I'd maybe say that strictly speaking service functions aren't Jam stack but certainly there they are the jam stacks best friend and they are a big enabler for me or to build this this kind of architecture still being able to have API is that you you can create without needing to introduce servers and infrastructure and all those kind of things okay I think that wraps us up for this this example probably about time for a bit of a recap of what we've gone over so far so what what did we cover well let's let's look just for a minute just to just to the examples that we've we've created you know along the way what did we make we've evolved one one site from very humble beginnings just a simple static site just a single HTML file to begin with served as a static asset and indeed having a very static experience but we've we've evolved that so much further than having a static experience you know we started to use a small amount of JavaScript in the client to to and some content admittedly to start off with very very simplistic but manipulating the Dom with JavaScript aqua in the clients of client-side rendering in a very simplistic form all served as static assets though then we moved on to adding some templating in an abstraction with a static site generator so we were able to run a very similar mechanic mechanic at Build time to what a traditional website and web server environment would do per request but we're doing it for every every page every route at Build time thanks to this static site generator which allows us to apply templates to content which has been abstracted away to generate a site that we can place at a CDN for very very efficient web hosting and we moved on to having content which we source from an API rather than just as part of the code base so that at Build time we could make a request to a content API pull that content in and populate a page again applying that to our templating so that we could generate as many pages as we needed from the source of content that we had as an external API from there we we moved on a bit further having localized content all again rendered at Build time so that we could generate a pool of of resources each one localized potentially in future internationalized for the different languages different locales that might come to visit the site deploying that to a CDN and then letting the CDN apply the logic of which file gets served to which user based on their conditions whether there have their languages set to a certain language or if they've got if they're arriving at the site from a particular place in the world and then finally we added more client-side rendering and started to target the content to the user based on a query to the browser api's and then to content api's that were third-party content api's these things happening at request time client-side has a progressive enhancement to the key content that we pre-rendered ahead of time and served up as a localized set of content so who travelled a long long way Hoover over the course of these six examples the site we've built looks very visually simplistic but it starts to demonstrate the different aspects of an architecture that can be driven with a jam stack site and it shows us the different forms of rendering and serving things that we could have you know with we've seen that a jam stack site yes is made up of JavaScript API is a markup but not all of them need to be present in order for a site to be Jam stack the key isn't in having all of things these things there this really describes kind of the enable as the letters move from a static experience to something way way more dynamic the thing that all of these sites have got in common is that yes they're they're created to be fast and secure sites but they're they're delivered by pre rendering the files ahead of time so that we can serve them directly from a CDN perhaps with a tiny bit of intelligence and logic there to elevate them even further but critically we don't have to have a web server we've removed the requirement to manage a web server of our own so that we've just got a far simpler hosting environment and a far simpler deployment experience and development experience which all really should be in the betterment of a good user experience we've created an environment which is far easier to reason about you know our deployment process is coupled to our version control and our process of building things rather than coupled to the complex infrastructure needs there underlie the system this kind of environment and this kind of flow is far easier to reason about I'd argue and when really work where with concerning ourselves with for the most part is how we build how we generate these pages so that they can they can deliver exactly the experience we need in the browser you know there's so much craft these days in front-end development that it's nice to concentrate our effort on building out the the site and the code for the site that lives in the browser without having to worry about how it spans lots of different complex infrastructure and has to be hosted across these different assets and and pieces of the hosting infrastructure everything is built and pushed to the CDN so that we can we can evolve that and use our version control all the way through to the CDN and our hosting environment we can still be building api's and we can have third party api's or in-house api's api's that we're using but the beauty is that these are decoupled these are no longer part of the same monolithic in infrastructure so now we can have teams building out our api's that are purely building out our special source our services that make our make our product and our applications distinct from from our competitors that can be decoupled from the experience that we're building in the front end so that we can have different teams building to their specialisms and evolving the the site along the way kind of key enablers that we've talked about along the way I just want to reiterate again the kind of automation the tools and services and this blossoming API economy really elevate things from where we used to be you know this is this is a really kind of blossoming world at the moment and you know this kind of growing ecosystem moves us so much beyond static that's why this word static just doesn't it doesn't cut it anymore we're benefiting from being able to generate static resources that we can then host in the most efficient way with the experiences we're making us so much more than static these days this economy is just exploding you know the the jumpstart ecosystem this is a visualization put together by redpoint some some time ago in fact the world is even bigger and more and more interesting now than it was when this was created but you know we've got we're already building whether we're on a traditional stack or on the lamp stack using some of these tools and and build mechanics to generate front ends but now we can use these you know uninhibited by the ecosystems a bit by the infrastructure and the development environment we can we can really take ownership of that development environment and use this kind of decoupling of the different services that we're using api's for this kind of huge amount of headless CMS's that are that are just thriving now that we're seeing that the move towards headless decoupled services and there's so many utilities that we can make use of whether that's for search or authentication or things like comments or form backends or communications or e-commerce the it's just really blossoming and there all of these services where companies are specializing in very complex involved difficult to build services so you can just get all of their wisdom and all of their services out sourced and available right into your application there are so many hosting environments and CDNs that are there for us to start to make use of built with the use of version control and the different services there that we can leverage all on top of there's this cloud infrastructure and this this huge kind of opportunity for building on top of virtualized infrastructure that that can get abstracted away as well so the whole the whole ecosystem is really thriving and it's getting getting quite exciting and the difficult thing might be is to think about well how do we how do we get there how do we even start yes we've worked through some some simple examples and we can see that building this out can be can be logically simple but you know what if we're already in a situation where we have a lot of infrastructure already how do we move from a big monolithic architecture across to starting to use the jam stack well I just want to want to close by by making the point that we we don't need to do everything at once we don't need to boil the ocean if we've invested years and years of work and lots of money on some infrastructure which is which is already in place but we want to start to take advantage of the jam stack and move things across we don't have to do a bulk move across of everything at once and I want to demonstrate that just briefly as a final kind of demo just by looking at an example now this is CSS tricks this is one of my favorite resources on the web it's an incredible set of articles of resources to learn about web development you may well have come across it and this is a wordpress site and it's it's fantastic I really am a big fan of it the CSS tricks already has started to build one or two resources with the jam stack this is a site about web development and design conferences it's a set of resources managed as an open source repository on the github site it lives on its own subdomains so it's kind of abstracted away from the main WordPress WordPress site and interestingly its it's using the same the same static site generator that we've been using in our demos and it's served from in this case it's actually so from meta Phi's hosting environment I've got a little extension here that shows me when something's served from that environment so this is a pre-rendered jam stack site that it's very happily on its own subdomain next to CSS tricks main site this is a very common approach when you want to start to introduce some aspects of your site that lend themselves well to being pre generated when this is a great example of that but should we want to actually start and I'm not suggesting that CSS tricks are on this path but let's just use this as a as a prominent large wordpress example if we wanted to start to introduce parts of this site that we're served instead of from WordPress or some other legacy infrastructure big monolithic infrastructure perhaps how might we start going about doing that well I want to show you a little demo well where I'll I'll build out a version of this where I'm just going to start to take over certain parts of the site and we've done we've already actually looked at some of the mechanics that we'll need to do this I've created this this tiny little example demo site and I'm gonna use this as a source of of what we're gonna demonstrate just as this little file demo and what we're going to do I mean you can see the only resources that are in this site which we're going to clone and create as a new site of our own in just a second and there's only two assets there's the readme which is just just for here so we get a little button to make it easier to deploy and a redirects file and we've seen one of those already we were generating that ourselves with our build now this redirects file only has one entry in it um something I perhaps should have mentioned sooner while talking about redirects is unless you force these rules to happen they will only occur if the route that we're looking for doesn't resolve to a resource a statically built out resource so we can force that by just using an exclamation mark adding bang to the rule but otherwise a static asset will take precedence but in this case we know we don't have anything else in the site at all is just you know there is no HTML that's just our redirects and the redirects says unless there's a static asset to satisfy the request all requests from the from the root will be rewritten we'll use a proxy to rewrite any one of those who require requests to this destination it will go to the CSS tricks existing site and then we'll use this splat to take whatever the wild carded request was and pass that through that's all that we're doing so let's let's actually let's just make it let's make a new site from this so doing what we've what I've been doing behind the scenes many times before during these demos just creating a new site I'm gonna cool that free code camp proxy demo just for the sake of having a repository name that we can we can identify so this is now cloning that little example repo into a new repo that I can then make some changes to as well okay so that cloning is done and now it'll kick off a deployment this deployment should happen pretty pretty rapidly because there are no assets to deploy to a CDN all it's doing is adding this one redirects rule so let's let's take a look at what that looks like if we go to our site now well it looks exactly like the existing infrastructure it looks so exactly like CSS tricks this request has gone via neckla Phi it's gone via the CDN that we've we've configured and all of the pages being served from our new site from this this new this new domain that we've created this subdomain of course we could have this as a as a custom domain as well all of the all of the resources all of the pages all of the assets are being served in exactly the same way but we don't we don't currently have any any any code of our own that we're serving so let's change that let's let's perhaps take over this home page and start to make changes an example what I'm going to do I'm just going to steal it let's just do a view source on the page and we'll copy all of that and perhaps we'll change this this headline so let's go back to let's go back to to our repository about repository so this is our new repository that we created it's just a clone of the one that was there before but now let's let's create a new file let's start to build build out a file well now we're not having any complex build infrastructure here we just we're manually creating a file here we are so why don't we change why do we just change something so that we can see we're serving our own site free code camp demos go ok and now we'll we'll save this by committing this new file there we are we've so now our site has this now we might be building this out with a much more complex build or you know something similar to what we had before but for the moment just have this one this one index file and if we go back across to our new site we should see if I just refresh the deploys page we should see ok we've got a new a new deploy that's been done we've uploaded one new file so now when we go to the site our home page should be ok so we've we've taken over this home page now so now we're serving this page with our new index.html file this this resource was was a hit when we went to our CDN and the traffic went there all of the assets that are on here is still being served in the same places all of the following pages are still served from the payment the same places those aren't a hit on our CDN so those are being proxied through so you can start to start to see start to imagine that just with adding things like redirect rules so that you can decide where you route your traffic to you can start introducing layers of jam stack sites in front of your existing infrastructure really really quickly I think that's incredibly powerful and it kind of shows that you know we don't need to try to boil the ocean the first step doesn't need to be a giant leap we can gradually introduce jam stack sites alongside our our existing infrastructure and that's incredibly liberating when we're starting to look at either the move from one bit of infrastructure to another or introducing a new model I'm really excited about the prospects of building things ahead of time and letting the CDN manage the manage the serving of those for me in a way that I don't have to manage so I think let's just leave with with a link a bunch of resources you've you've been through now all of these six examples each of these examples has its own repository that you can inspect look at you can clone you can deploy yourself so you can experiment with it as well and those all live at find that out Jam stack x1 through to x6 there's also a link for free code camp find that jump stack FCC which is a set of links to all of these resources and a few other bits and pieces along alongside you might also be interested in seeing that there's a book about Jam stack so myself and one of the co-founders that notify have written a book about web development on the jam stack and you can find that out jumps back book and finally you know if you want to ask more questions and get in touch with people who are building things with the jam stack now talking about Jam stack and all things to do with this new way of leveraging the jam stack ecosystem discovering API is learning about all the different systems and bringing that all together there is a slack as well as an open slack where you can join the conversations find out things about things like the Jam stack conference and and different meetups that's find that at Jam stack slack so these are all good resources to take a note of the one in particular is the four slash FCC or you'll also find all of these other links and what-have-you so that's it I hope that was useful those links are all there ready for you to explore so if you want to go and experiment with any of the the demonstrations that are there you can clone those repositories deploy them for yourselves start tinkering with the code and exploring how to use those and also please do come and join us in the jam stack slack there's lots of good conversation in there links were with we're there on the screen a moment to go and you can find a link to all of these things to find that at Jam stack slash FCC so that's all thanks for watching you

Channel: freeCodeCamp.org

Views: 137,908

Keywords:

Id: A_l0qrPUJds

Length: 210min 55sec (12655 seconds)

Published: Tue Mar 10 2020