[Music]
foreign
[Music]
everybody this is Joshua from
stacksweaver today I want to talk to you
about my new stack cloudflare Dev tools
that I just released
a lot of you may ask what is cloudflare
devtools and how will this help me with
my websites
first let's start off with what is
cloudflare cloudflare is a Content
delivery Network that serves up cached
versions of your website to users around
the world if you have a server in the
United States and someone is browsing
from England cloudflare will actually
serve up cached content from a local
server in England allowing for faster
speeds on your website for those of us
who utilize a CMS based system to edit
our websites struggle with cloudflare is
making changes to your site while the
cache is active when you go to change an
image that's already been on your
website you won't see those changes
reflected immediately cloudflare will
still serve up the cached version of
your image this is why cloudflare has a
tool called development mode by turning
on development mode you bypass their
cache for three hours allowing you to
make changes and see them instantly on
your website
now I'll turn this back off here on this
website now you'll see here on this
visit edmunds.com website that in the
last 30 days they've had 30 000 unique
visitors
4.08 million requests and you see here
that they have 168 gigabytes cached and
a total of 239 gigabytes sir that means
that there was 239 gigabytes of requests
to my web server that was not served by
my web server but served by cloudflare
instead this means that cloudflare saved
me 239 gigabytes of bandwidth from
impacting my server performance this is
an amazing feature to have to allow my
web server to host more websites without
being overrun by requests my stack
allows you to turn on cloudflare dev
mode from your website without having to
log in to cloudflare themselves great
example of this would be the visit admin
site that I have here I don't edit the
content but somebody else does this
would allow them to turn on dev mode
without logging into my cloudflare
account this is why I made cloudfire Dev
tools let's have a look at the visit
admin site here you'll see here in the
admin they actually have a turn on dev
mode button for cloudflare Dev mode if
they're admin logs in and needs to make
edits they just click the button to turn
on devmob and you'll see here that it
turns on
and if we refresh the page over here on
cloudflare you'll see that devmode has
indeed turned on
all of this was done from the back end
of their website not requiring me to
help them out with it now what's also
cool is there is an additional button
that comes within the stack which is
Purge cache so this allows them to press
this purge cache button and the purge
cache get initiated and it will actually
clear out the cloudflare's cache of your
domain
if you're doing a lot of updates you
know you first you come in turn on dev
mode
and then from there you can make all
your changes do everything you need to
do then you can go and Purge cache and
then you're good to go
but here is an example of what comes
with the cloudflare dev tools it
actually has three child Stacks allowing
you to customize how you want the data
to show up on your website
the first stack is the dev mode status
so this will either say on or off if we
turn this on you'll see here the status
says it's on if you refresh the page it
will refresh with the current status on
or off so this could be on a multitude
of pages at the top in the admin so as
you browse from page to page it will let
you know what the status is and then you
could have the button Elsewhere on the
page or maybe in a settings page same
with the purge button the second child
stack is the dev mode button this is the
button that allows you to actually
toggle development mode on cloudflare
simple thing you just click it and it
changes
and then it comes with The Purge cache
button so all of these can be run in one
stack right on top of each other or you
can have multiple stacks on the page and
put these where you need them to be
there's some cool customizable features
built into Cloud for devtools first of
all there is classes that are added to
the status button and to the toggle
button based on the status of cloudflare
Dev mode so if it's on you can Target
the on status via CSS and you can Target
the off status of via CSS this allows
you to colorize them or change the look
of them based on their status
how about we set this stack up from
scratch on stacksweaver
search for cloudfire devtools in your
stocks library and drag it onto your
page
whereas to get the initial setup done
we're going to need an API key a Zone ID
and a worker URL so let's get started
to get an API key we're going to go back
to cloudflare
now we're going to go with the
assumption that you've already set up
your domain with cloudflare this is not
going to be instructions on how to do
that you can check out cloudflare's
website to get that instructions
to get an API key you're just going to
click your profile on the top right and
then click on my profile and API tokens
what you need to set up with your API
token is these two settings here so I'm
just going to quickly screenshot this so
we have access to this
so we need Zone settings and Zone cache
Purge
so let's create a new token
and we're going to go custom token
so we're going to call this one
Stacks waiver
so we're looking at Zone
and we want settings
Zone settings
all right
edit
and we also need
Zone
cash Purge
perch
and then just continue on to summary
this looks good so we're going to create
token now that we have the token we're
going to copy it back to our stack in
rapidweaver
now we're looking for the Zone key now
we're using stacksweaver.com so we're
going to click back here
home go to stackswaver.com
if we scroll down here we have a Zone ID
and copy that
paste that in
and then we need a worker URL
so if you go like back on the cloudflare
go up to your dashboard and if you
scroll down here to workers and pages
and go create application
and we're going to go create worker
and it's just going to say hello world
but we're just going to say you know
this
is
uh test
and go deploy
now we're going to click on configure
worker now what we need out of this is
this domain so we're just going to copy
that out
I'm going to put that right into the
worker URL just going to button here
there was a mistake with this URL you
have to ensure that you start with https
at the beginning colon slash slash that
needs to be included
as well as at the very end you need to
have the following slashes as it says
right below just make sure you have that
slash at the end and HTTP at the
beginning
so now that we've got these three set up
we can press setup complete
and then we need to show the cloudflare
worker code and hit preview
now on my site here it is actually hard
to see the code just because I have my
site in dark mode but if you see in here
there is this box that shows up with all
the code you just hit command a and
select all and copy all of that code
and we're going to copy that code and
paste it into the cloudflare service
worker
if you head back to cloudflare
and do a quick edit
on your worker
and here you're just going to select all
and paste in the code from the stack
and you're going to go save and deploy
so you see here it was last deployed a
minute ago we are all good to go
all right so now we can go back to edit
mode
turn off the show Cloud for code and now
we can start building out what we want
this to look like
so first thing we're going to add here
is a status
and then I'm also going to add a button
and I want to add The Purge
perfect so now we have all three here
and inside of the dev mode status we
actually have some options for setting
label classes and the status classes so
the label is the stat the word status
here
and the status is what pops up
when you it checks for status whether
it's on or off
now if you want to change the language
out
on the stack we have the ability in the
primary cloudflare stack
so you'll see here that you can change
what loading means status
you know if Dev mode is on if dead mode
is off
to turn it off or to turn it on so in
this case I'm actually going to do some
customizing so here
we're gonna go where it says status and
we're actually going to say
staxweaver.com
and then
for on I'm actually going to change this
to
Dev mode on and Dev
mode off
perfect
and then turn Dev mode off or turn Dev
mode on and Purge cache that's all
perfectly fine
all right so let's go back to status now
what's really cool is if you're using
Foundation this supports the utility
classes that you can get out of
foundation so for instance I want my
label to be in H5
maybe an H6
and I'll do my status as an H6 as well
so now you see here that it's actually
taking on an H6 formatting just by
adding in those utility classes
now as for the button I want this to be
a small
and I want it to be radius
or maybe a large
no let's go smell
and the same thing for The Purge cache I
just want that to be small and have a
radius
perfect let's have a look at that
I don't think small is small enough so
maybe let's do tiny
yeah Tiny's good
perfect
so now we've got the status all set up
so now let's look actually at the button
so there is some information here on the
special classes that come with this
button stack
you see that it says CF button targets
just the button
CF Dev status button on targets the
button when Dev mode is on TF status
button off targets the button when the
dev mode is off
and then you have some options here to
preview Dev mode on in Dev mode off this
is for is allowing you to have a look at
the different button statuses what they
look like when they're on and off so
right now it's set just for blue that's
the standard so if we actually bring in
some swatches
and I want to Target let's see here the
background when it button is off so
we'll Dev mode status off
that Bunch button off and then we're
going to choose a color
and we're going to go with
for this
Dev mode is off we just want it to be
green
now because of that we also want to
change the font color
and we want it to be black
so green means it's off so cache is
working everything's good
now we want to work on the other button
if the status is on
if we go back here we'll copy the
status is on add another background
now see here that
turn Dev mode off is red
we have a look at that
I'll show you what the buttons would
look like so the green of course means
that Dev mode is off which means cache
is working and turn Dev mode off is red
because the current status of it is on
so with this
if the status came back that Dev mode
was off you'd get green buttons good to
go
and then if it came back as the mode is
on you'll get a red button that says to
turn it off now let's look at
customizing the status stack let's do
the same thing that we did to the dev
mode button let's turn on the preview
for Dev mode on and off so we can see
what that looks like but we're going to
change the font color
when Dev mode is off we want it to be
green
and now we're going to customize it when
it is on
now we've customized the off and on
statuses of the status as well as the
button now what I also want to do is I
do want to have this the stack on the
dashboard when I sign in I'm just going
to copy the stack quickly
and go into my admin dashboard
and if we have a look at my website
on the dashboard I want it right up here
in the admin area
I'm going to paste this in
and what we're going to do is duplicate
this column
and delete that out
let me drop this in now I don't want to
actually change any of the
I don't want the button or anything here
I just want the status on or off now I'm
just going to go back and grab our
swatches
maybe if Dev mode is on let's make this
a little bit different of a color make
it Orange
yeah let's do that on the other one as
well
those changes there we'll just do a
quick preview
see what this would look like
let's do a quick publish and see how
this looks
now we're just going to empty the cache
before we refresh the page
and let's see how the stack looks
so we're just going to load up the
settings page and see if it is working
and we can see here Dev mode is off and
if we press the button Dev mode turns on
and we can verify that just by
refreshing the cloud fire page and we
can see here that of course Dev mode is
now on
now if we want to see the status we put
on the dashboard we'll just go to the
dashboard and refresh and we'll see that
Dev mode is also on
and if we want to double check that the
status will function we can turn Dev
mode off manually refresh and indeed Dev
mode is now off just for fun I'm just
going to change some of the language
settings in here
and it's going to instead of it saying
sex waiver I want to say Dev mode and I
want it to say is on or is off and with
those changes here you see that Dev mode
is off
and if we want to go change that we head
over to settings
go down to our admin
and we can go turn Dev mode on all of
this will happen instantly and this
saves you from having to log into
cloudflare to toggle this mode you can
now just do it straight in from your
website
and of course after you've made all the
changes to your website you just click
on The Purge cache this will initiate
the removal of the cache on your
cloudflare servers
I hope you enjoy cloudflare Dev tools if
you have any questions reach out on the
community or email me at support
staxweaver.com
[Music]
foreign
[Music]