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