hi everyone i'm six and i'm happy to be
sharing this walkthrough with you
i learned web dev myself through free
code cap three years ago and back then i
actually struggled a lot with getting my
projects online at first through cloud9
and then heroku and i only found netlify
a year later and realize that deploying
and scaling is a lot easier with the jab
stack approach especially with modern
front end frameworks like react and vue
so this is the video series i wish i had
when i started it out i hope you enjoy
so i kind of break down the overall
structure of these series into nine
parts don't worry they're not all
equally long but we're going to start
with the main ones first the ones that
you really need to know so we'll talk
about nullify edge and how nullify is
actually a cdn first hosting solution
and that's why it's fast and secure and
how we can upload and deploy without
using any of the other functionality of
nullify just deploying straight to the
cdn next we'll look into netlify build
and how netlify hooks up to your git
repos and continuously deploys from them
so you have version control for your
sites but also it helps you generate
your sites from static site generators
for maximum performance we understand
the build process especially how to
debug it as well as to manage the build
environment with environment variables
as well as inject your tokens and
secrets at build time
then we'll talk about nullified dev
which helps you develop locally so you
don't even have to deploy this is
entirely within your local machine and
the and the idea is to make it a lot
easier to test serverless functions
together with your local dev environment
with hot reloading as well as anything
else that you might need to simulate
your real production environment then
we'll take a look at netlify forms and
this covers the use case where you think
you may need a server but actually you
just want to have some basic form
submission capability like a comment
system people leaving a contact form or
even file uploads and then you want to
do some basic automation with that with
zapier or serverless function or other
sort of web hooks
and we'll show you how to do that in
simple html as well as single page apps
and static site generators
then we're going to take a look at
netlify identity which helps you add
authentication and authorization to your
site and this can be very useful for
apps and e-commerce solutions and in
particular you can use a dropping widget
so you don't have to code up the ui or
you can use something lower level that
actually gives you the core
functionality and you can code your ui
on top of it we'll also talk about
authenticated functions and how netlify
identity and serverless functions works
work really well together as well as
other things that you might want to do
some of the people that you're working
with might actually be non-technical
users and you might want to edit content
without going straight into source code
and that's why netlify has a very
wonderful open source project called nfi
cms and we'll talk about how to set it
up as well as what it does so you can
evaluate for yourself if you want to use
it or use any of the other hello cmss
out there we're then going to talk about
nullify add-ons which are all the other
functionality of nullify that doesn't
really fit in the other buckets above
but are still very useful and you might
want to use them on certain occasions
and in particular i want to shout out
nullify and analytics which are
unblockable server-side analytics that
would be very useful for your site as
well as the add-on marketplace where
nullify is starting to have add-on
partners that include faunadb which
helps you add a database to your
jamstack site lastly we're going to talk
about the netify api where you can make
your own netify client for example if
the cli and the ui of netlify aren't
exactly fitting what you need nullifies
platform is entirely documented and you
can go make your own client on top of it
and a lot of users have and finally
we'll end with pointers for learning
more about nullify and jam stack and
where you can get help if you run into
trouble
so hopefully that's a good overview of
what we're going to be doing today and
let's start diving in
there are a few ways to deploy to
nullify now nullified drop is not the
most important way but i find it useful
to explain this first because it helps
explain the history of nullify as well
as the fundamental concept of jam stack
so netlify started life as a company
called bit balloon and bit balloon was a
simple service where you could drag and
drop like a folder on your desktop drag
it onto bit balloon's web ui and have it
be deployed immediately onto a cdn and
to this day that is netflix drop and so
that is the fundamental concept of
nullify that everything that you deploy
to nullify
is static assets and nullify takes care
of deploying it on a cdn to all the
points of presence around the world so
that your users get them as quickly as
humanly possible now bit balloon
eventually became netlify and then we
dropped the bit balloon angle so if you
go to the url bar and you type in
bitballoon.com you just simply get
redirected to
app.netify.com here you can do a simple
drag and drop of your
built site not the source code the build
site
and you can scroll around to look at the
features we're going to cover all of
this in the rest of this video if you
don't have a sample site nullify
actually even gives one to you so just
go to the downloaded demo site button
that downloads a zip file and you can
literally just drag and drop that zip
file on to that drag field and you see
how quickly it deploys there's no
editing there it just deploys live to a
live url and you can scroll around i
mean i really don't think there is a
faster solution to getting something
online you literally drag and drop it
and the whole thing just deploys for you
on a cdn so
that's the fastest solution now i'm also
going to try to edit this site i'm going
to unzip that zip file into a folder
and then you can look around you can see
all the assets like a typical site
i'm going to choose my favorite editor i
use vs code it doesn't really matter
what you use
but here in
vs code i can just drop
drag and drop the file from my file
explorer to vs code and now i have that
project open and now i can surf around
and look and look at the index.html for
example and this is a standard html
site nothing no frameworks nothing and
i'm just going to edit some of the text
to see how it shows up and
instantly
deploys changes so now i'm saving it
and and so i've edited that site and now
i can actually choose to compress that
site and zip it up again to a zip file
and now i can go back to
that deploy page and if i want to update
that site i can just go down to the
deploy section and drag and drop
just like i did to initiate that site so
i just drag and drop it and now it's
uploading and now it's published and
when i click on it and i hit to refresh
that site it's uploaded with the new
changes so that's netlify drop
you can always access the previous
deploy with a with a unique url
so if you click down in here you can
access the previous deploy
you can even roll it back so you if you
want you can just say publish deploy
and now when i refresh this original url
and i refresh it it goes back to the
original version
because
every single deploy is immutable so you
can always roll back something if you
need to
now we don't expect you to drag and drop
every time
so the next
method i'm going to cover is using the
netlife cli this is a pretty big topic
that actually deserves a separate video
but here we're only going to use the
nullified cli to deploy
so i'm going to go back to the folder
that i had which which i'm editing the
file in
and i can pull up the terminal in vs
code
i already have the nullified cli
installed but if you need to you can run
npm install
global notify dash cli
and that will install for you
i'm running a netify version of 2.12
you can run nullify status to check if
you're logged in
i am
and you can run log in now if i log in
if you're not now i'm going to edit my
html again to indicate that
i'm using the i'm deploying from the
notify cli so i'm just going to say
netlify cli
rules
so we'll see that if we should see that
if we deploy
so down in here i'm going to write
netify deploy for brevity because this
is a lot to type you can actually use
ntl and that would work
and we'll see what we get
so the first thing it tells me is that
this folder isn't linked to a site i
don't i have an existing site that i
that i want to link to
but we'll avoid that for now and just
create a new site and we'll we'll do the
linking
later
so we'll create and configure a new site
they'll ask you to pick your teams uh
more it's likely that you'll you'll just
have one or two teams
so just pick their appropriate team and
then you can pick something like
netlify demo
site
now it's asking you for the deploy path
in most cases
you can just go with whatever is
suggested um but we'll talk you will
tell you how to how to configure this
later and so now it's uploaded
all of these
pieces of information and actually
showed you what it's done as well as
given you a url
where you can actually go check it out
so here because i've only i've only
chosen nullified deploy by default it
deploys to a draft url so you can see
what it looks like in production
before you actually push it to master
if you're happy with this and you
actually want to push it to master
just run nutlify deploy dash dash prod
and that's that does exactly the same
thing as nullify deploy
but it pushes it directly instead of a
draft url it pushes it directly to
so here we have a live url so if we
click this
and we should be able to see the cli
rules
on the main on the main url instead of
the draft url again remember that each
of these
deployments is immutable so you can roll
back to it at any time or give
give this as a link
to a friend or colleague for reviewing
whatever content or
code changes
now notice that it keeps prompting me
for a deploy path
if you want to actually just hard code
that there are a few different ways to
do it
but the way that i would recommend is to
create a nullified.tamil file
so i'm going to exit out of this process
and i'm going to create a nullify.com
so this is an example netlify.commo that
i have just saved
on my copy of my clipboard manager
um we'll go we're going to comment this
out for now
and we're just going to focus on the
publish directory so the publish
directory is the
directory that we want to zip up and
send out to the cdn of netlify
down in here uh we i usually use a dist
folder but here i'm just deploying the
root folder so we can just say dot you
can run nullify deploy prod
and
i
i'm no longer being
and i'm no longer being asked about
where my publish deploy path is
um
[Music]
of course i can move
all of
the assets into a published folder so
something like publish
list
and i can move
all of the assets
here so now it looks a lot cleaner and i
can build from a source code directory
so
then i would have to change my publish
directory accordingly to the disk folder
so i only publish anything inside of
this and anything outside of this does
not get
and i can run that accordingly now in
netlify we actually really encourage
using version control and we call it git
centric workflow so what i'm going to do
is i'm going to initiate git so get in
it
now you notice one new folder that was
created that i haven't explained yet is
the dot netlife folder it really is just
a simple little json file that stores
uh where you've linked what site you've
linked the
project too so for example if over here
i run nullify status
you can actually see not just my login
information but which site this
particular folder this particular
project has been linked to
so it says down here nullify site info
and it gives me all that stuff and you
can notice the site id is an exact match
of
state.json
so
obviously this dot nullify folder
is pretty helpful for netflix cli to
understand what site you've linked to
but it may not be so helpful for an open
source project for example where
people downloading your repo
might not have access to the same site
so checking that in might confuse them
however actually checking that in for a
team project is probably pretty handy so
that people don't have to
set up their own sites
it's really up to you but i personally
generally get ignore
know the nullify folder
and it really depends on your use case
whether you do that
so i've i've gone and get ignored
i'm going to edit the content over here
so we also
reflect that
we're deploying from git this time
and
we'll see what happens with that
so now i can say git add dot
everything git commit and
show files
you can come up with a better message
than i have
um and now we have now we have to set up
a remote
netlife works with
gitlab bitbucket and github
obviously i am most familiar with github
so i'm going to use that but feel free
to use whatever git provider
care about
so
let me find
what am i calling it if i drop that
site
and
here
so i can copy that url and just say git
remote add origin
and now i have
that linked up i can actually say git
push
plaster
so that when i refresh over here i can
see that
i've
pushed my site up to get so surprisingly
we've gone through two of the methods
and we're actually well set up to do
continuous deploy to nullify
and
i'm going to show you what that looks
like
right now
so
if we go to
the wi-fi home
page these are all the sites that i have
currently but you can also click new
site from git
you can choose to set up continuous
deployment from one of these providers
obviously i choose github
and i can select that repo that i just
created
so you'll notice over here that it reads
the nullify.tamil
file
that we've made
and it's also created some other options
that you might want to look into as well
well we'll talk about the build command
when we get to the build section
so we're just going to hit deploy site
and it really is that simple
so this deploy should be done pretty
quickly and once you click that site
you should be able to see nullify from
git
directly as
pushed from our local local development
to github and from github pulled into
netapp let's have a look at what
continuous deployment workflow looks
like so i'm going to go over to my
deploys
view
and then i'm also going to go over to my
project
i'm going to say i'm going to make some
edits as well so
i'm going to say
continue with
deployment is the best
because it is
i'm going to get
dot again
commit
change
and get push origin master
that's just an alias that i have set up
locally
so that's going to deploy
straight to github
and that's going to kick off a build in
here
and that's just an underlying secret
about how nullify works is to automate
this
so now so now it uh there's no build
time so it just basically deployed
immediately
and uh
and so now when i hit back to the
original site goofy austin 8 8
8
i can see continuous deployment is the
best over in github i can also refresh
and see my change
down in here
and that's continuous deployment the the
idea that
your deploys update in lockstep with
your git
don't forget that you can always roll
things back if you made a mistake or if
you're not ready to release something
so for example
i can publish this this old deploy
and if i head back to the site and
refresh it goes back to the original git
message
and
the
next version is still here so that's how
we launch some of our features if you
want to turn off continuous deployment
for some reason you can click stop auto
publishing
and that will stop
and now when i
make some more changes
stopped
publish
stop
again this is a git alias just for me to
be a little bit quicker in my actions
so now when i
see this update coming in
it actually has
built and deployed it just isn't
published yet you can see this little
lock icon because i've stopped auto
publishing so when i refresh my page i
haven't changed anything
in terms of the text because i haven't
published the latest update if i want to
kick it back on again
it doesn't immediately promote the
latest deploy
to the published site
because you may not want that to happen
so you're going to have to go in here
deploy
and only then you'll see
the new
text that you've pushed to get
so a lot of the secret around how this
is done
is basically setting up internal build
hooks
you can actually set up your own build
hooks
down in here in the settings
and it just gives you a url you can use
to trigger a build
so
let's have a look at how that works so i
can give this a name for example
demo
hook
and you can give it a branch to build
here i only have master but you can
imagine building other branches
and you can save it and that gives you a
build hook with which to use
so now i'm going to
oh
and there is a very useful curl command
so i can actually paste that into it
so let's head over to the deploy section
and i'm going to bring up my terminal
copied from the build hook section
so i'm going to
see
that i fired this off
and now
if i wait long enough or refresh i can
see that a new hook has been triggered
by the demo hook people use build hooks
for all sorts of things for example you
can go to if this than that and trigger
builds on a tweet for example
or you can set a scheduled
job
from zapier or any other cron service to
build every minute every day every hour
whatever
suits your build process
for example one of my co-workers phil
hogsworth actually built a clock
set your watch by nullify.com this isn't
a dynamically updated javascript clock
it literally builds every minute so now
if i refresh you can actually see the
time update accordingly
for the last method of deploying it's
more of a fun demo and not something
you're likely to use more than once but
it's handy to have around especially for
open source projects
if you have a nullified.tamil configured
correctly then you can also set up a
one-click deploy to netlify button
that's pretty easy to get going so i'm
going to go to my github directory that
i've
set up in the course of this video i'm
going to copy that url i'll head to the
deploy button docs on nullify.com
and i'll just paste that in here and
that will configure
various things like the markdown snippet
html uh and elm snippet if you use album
but here i'm just going to copy a
markdown snippet what that helps me do
is paste it directly into my readme
so you can say things like deploy to
nullify down in here
so i'm gonna commit this again
new
deploy to nullify
and i'll push to master
and now when i refresh
i get this nice the point to nullify
button so it's nice to display on your
docs especially for open source
boilerplates and projects because what
that
enables people to do
people who are not you is to click that
button and get that one
click deploy experience so for example
here it says
connect to github i'll give this a
different name
to
netlify
and
it's going to set up a site
and set up that continuous deployment
and fork your repo
all in the process of one click
so whoever is working on their
new site can get the benefits of this
latest site from you but then they also
have a fork
with which to start work on
so that's what the deployment nullify
button is it's just a streamlined
process
it's useful for open source
boilerplate authors and
app authors so now we're done talking
about ways to deploy things on netlify
notice that we haven't talked about
build because that's a different stage
of the deploy cycle
where you may have to set the build
command and we'll come to that in a bit
but i wanted to spend some time talking
about what you get by default because
these are things where there's nothing
to cover because you got it by default
already but it's good to be aware of
what you get for free
so the first thing to notice is that you
get https by default so that's a more
encrypted protocol where you're not
susceptible to man-in-the-middle attack
and that's just the best practice for
modern websites by default you also get
deploy previews so i'm going to do a
little demo of that with our demo site
i'm going to create a new branch
a new site new new feature for example
and i'm going to
edit that in here
awesome new feature
and i'm going to save that
origin new feature
and then i'm going to go create a pr
on github so i've been working on a
branch
i have an awesome new feature
i'll leave a comment
please
merge
create a pull request
and we'll let it perform some checks
but you can see that automatically some
things happen that
you may not necessarily
have on a normal site
and so this is a deploy preview
basically saying that even a pr which
hasn't been merged
i can actually check out
over here where it says awesome new
feature
and it has and it gives me a label of
deploy preview
and that is a preview that i can share
with
my clients or my co-workers sometimes if
you're using for example a static site
generator you may want to check out if
pages or redirects have changed so you
can click on the details and it brings
you into netlify where you can look at
look at what pages have changed
in particular and that should be exactly
what you expect in terms of pages once
you're happy with your preview you can
merge it in
and that should also
kick off a new build on the master
branch
so that's a very nice workflow from
previewing the new feature before you
merge
and then merging it in once you're happy
and
having your customers see it the third
default to know about is that netlify is
a cdn by default
so
all of your deploys are distributed to
the nearest point to presence this isn't
documented everywhere because the list
keeps changing but as of as of the time
of this recording the regular free tier
gets a few locations frankfurt singapore
san francisco new york sao paulo and
sydney and the enterprise tier gets a
few more locations
deploys are also atomic which means that
nullify waits until all the files are
published before pushing everything to
production
um so that your customers never see
like a half updated site uh no matter
when they when they hit
um and also it also has instant
rollbacks which means that it
invalidates the cache globally
whenever you do a rollback for example
by clicking an old deploy and clicking
publish deploy so here i've rolled it
wrote the version back
and now it's instantly invalidated and i
can just refresh and see that old deploy
lastly you also get asset optimization
now this is not on by default but it's
so easy to turn on that i can't resist
telling you about it
so if you head over to
the site that we've been published and
you look into the sources you can see
that we've actually not
optimized the site for performance
this is obviously a super small site so
it doesn't matter but you may need you
may want to have this on a larger site
so for example we can minify the css
or also if we had any javascript files
we can also minify that and do a bunch
of other
hygienic things to clean up
the way that we
optimize our assets
so if we want to turn that on head over
to deploy settings
and scroll down to
post processing section
and we can click on asset optimization
and
enable a set up asset optimization and
click save
and the last step to do this process is
to head over here and re-trigger a
deploy
so
that will
introduce
asset optimization into the
post-processing step which is after
you've uploaded all your files
and now when i refresh my site
you can see that the structure of the
site looks
i mean it looks the same on the html
side part of things but the css is now
minified so this is
that much faster to deliver over the
wire and it just took you a couple
clicks so we covered some nice features
that you get by default there may be
others that i haven't covered i just
wanted to highlight some of these
and the last part of the deploy section
is going to be about customizing
the url the domains that
your customers see
so the first thing to try is to
not stick to the auto-generated ones
that have been assigned to you but just
to customize what that looks like so
over here i'm going to say something
i can go over to deploy settings go to
general and change the site name so over
here i can say
notify drop demo
sitemap
so now when i click over here it has a
more ergonomic
site name
but it is still on the dotnetlife.com
domain
another feature i wanted to highlight is
what happens when you want to customize
the internal url architecture
within your site
so for example let's create an about us
page and
have that
show up so i'm going to create
about.html
and i'm going to hollow out most of
these features
just call this
about us
and
leave the rest pretty much
okay so now i have a new about us page
and i'm gonna
change
to master
and complete this
new about us page
and push it to master
i can say i can hit to about and see the
about us page
so that's all well and good
until we tell people
to go to the about us page and they
might type in slash about us
and get a 404 page it's not found
so what do we do about that
so one of the ways we can handle this is
to add in a redirects file
so
there's some guides as to how to do that
over here but we'll just show you inside
of code so i'm just going to add a
underscore redirects file and this
basically just tells you
where to redirect from and to so for
example if people type in about us
we direct people to about
so again i'm going to commit this add
redirects
and i'm going to push to master
so now when i head to this about us
it's going to redirect to about
let's do it again about us
it redirects to about
so that's very handy but sometimes
people just type in any sorts of random
stuff
and they just don't really get a nice
experience so it's nice to set up a
custom 404 page
so let's also do that
i'm going to set up in 404 each
and
not found
okay
and i'm also going to set up a redirect
that's a catch-all
so how you do a catch-all redirect is
you just literally
hit a star
and you direct people to the 404.
so if you imagine in a single page app
you might want to send people to
index.html because
then
the single page app might redirect
people to the right area
but here we're going to send people to
the fourth
so now when i refresh
it actually
redirects to 404
on literally any url
except for about us
which still works
so
the redirects only run when there's no
corresponding html or other static asset
to
use for people using javascript and
requesting json files do note that
sometimes you may accidentally
hit a redirect and get back html
when you actually meant to request
something in json so just be careful
about that
and
be aware that you're parsing html as
json
and those will typically solve your
errors
now of course when you're getting your
site up to production you're probably
also going to want to use a custom
domain so let's head over to settings
head to the domain management section
and here's where you can configure your
custom domains
nullify offers free custom domains that
doesn't mean it buys the domain for you
but if you already have a domain bought
somewhere for example from google
domains or hover
you can actually set it up to link that
site together this is something that
other hosting providers charge for
so for example i can just say
whatever so it's not io that's that's my
own site
and i can click verify and if it it's
already owned by me i can say yes add
domain um let's see what happens
so
my site already currently uses this um
if it's a site that hasn't been set up
you can you know you can also set that
if you if you have a domain that you
want to buy you can actually buy it
through nullify
um and
you can actually buy it through nullify
and now if i will buy it for you and you
can pay notify with that
and to set it up for you here's what it
looks like for my personal domain i have
a
nullify subdomain as well as a custom
domain setup that's said to be the
primary domain
and everything just redirects to that
primary domain
i also have netlify managed dns and
that's um
what netify uses
and that's an extra service that nullify
provides
to do to add extra features but anyway
so here's how the dns panel looks
if you have a custom domain setup
you can also enable ipv6
as well as customize your dns records
and name servers note that you can
manage all your domains on
this team level uh
on app.net.com
teams slash your team slash dns
so that's the end of the first part of
this video
let's have a quick recap of what's
available to you with netlify when
you're deploying
there are four methods of deploying we
started out with notify's historical
method which is dropping dragging and
dropping
then we used the cli to do a manual
deploy
then we also linked it linked our repo
up to github then we set up continuous
deploy from github
so that every time you push to github
you'll get a new deploy and that is
continuous deployment
and finally we set up the deploy the
nullify button on our readme so that
open source project can clone our
repo and deploy in one click
we also took a little look at the
defaults that are provided out of the
box for netlify
we get free https
also called ssl we also get free deploy
previews
same deal you can also get branch
deploys which i do not cover in this
video but they're kind of the same thing
just for different branches we also
talked about nullify as a cdn how
they're distributed among various points
of presence how nullified applies are
atomic meaning they all deploy every
single file to production at once
and as well as providing instant
rollbacks
from a network
control angle
we also talked a little bit about
turning on asset optimization so this is
not on by default but it's pretty much
one click
and unless you have some bugs that are
not compatible with this you should
always have it on then finally we talked
about nutify and custom domains so most
things are hosted on a custom nutify
subdomain
but sometimes and sometimes you want to
do redirects around what the internal
url structure of your pages are
we covered that as well as how to do
catch-alls for 404s
we also covered how to link up custom
domains as as well as a little bit about
nullified dns and how if i can manage
the dns for you if you choose to have it
you can also set up branch deploys for
managed dns if you're using netlife dns
so that's the scope of deploying on
netlify
and in other videos we'll cover the
other sections but if you have anything
about any questions about deploying
please let me know cheers
in this video we're going to be covering
part two of our series on nullify
and specifically focusing on things that
you should know about building and the
continuous deployment aspect of network
so let's drill into that a little bit
more
we're going to cover build tools and
static site generators
we'll cover what build settings are
what the build bot is
build stages different things that are
done during the build what concurrent
builds are and how you can cancel builds
to keep under your concurrent limit
some build gotchas that people commonly
run into
as well as what to think what to do when
things go wrong
we'll end with a discussion about
environment variables and the things you
can do to set them in nullify to change
the deployment environment to exactly
what you need
first let's have a little discussion
about netlify and build tools nullify is
strongly supportive of build tools in
fact one of the founding theses of
netlify
is that static site generators are the
next big thing
and that basically came from tracking
the statistics on static site generators
and seeing that people wanted to use
them
to deploy to
our cdn
but they were manually doing it and we
wanted to build in a continuous
deployment tool
to help them build and deploy their
sites in fact i strongly recommend
watching this talk by
netflix ceo matt billman because it
really explains the benefits of the jam
stack compared to what came before it
but anyway we're here to learn about
the build process
so the first thing to understand about
the build process is that you can always
do local builds you may not need
continuous deployment
the problem with continuous deployment
is that it's done remotely
it's on someone else's server and it may
introduce
extra hurdles for you when you're
actually trying to just develop a new
feature
so if you're doing local development
don't use continuous deployment
just local locally build
and push stuff to
nutify until you're happy that you can
turn continuous deployment back on
let's take our existing site that we've
been working on
from part one and let's add a build
process to it so right now i have this
folder which is a dist folder
and it's got a bunch of index html files
and let's say i want to add some
javascript to it to write some
interactive components
what i'm going to do is i'm going to
add the bar the parcel bundler so
that would be yarn first i have to
initiate initialize the package.json
and then i have to add the parcel
bundler
and while that's going on i can also
install
react react dom because i'm going to use
that as well so here we're not using a
static site generator but we're using
using a build process and
a static site generator is just a
massive build process so now we've got
the dependencies installed we're going
to rearrange this a little bit so
i'm going to take this this folder and
rename it to source
and we're going to build from the source
to the disk folder and remember that the
the folded folder that we ultimately
publish is the disk folder
all right the next thing i'm going to
try and do is i'm going to go to
this source folder i'm going to add a
new folder called
index.js for example
i'm going to paste in some pre-prepared
react code
and i'm going to go to index.html
and add
a script
that id equals app
and then i'm going to add a script tag
at the bottom
saying script
source
so now when i run
yarn parcel
index.html
i get a nice local server
where i can see the results of my code
it says hello from react and i can
actually click an interactive button
so i know that i've added some
javascript to my static site
so this is wonderful news
and we need to actually make this run in
production so i'm going to cancel my
running process i'm going to go over to
package.json and make life a little bit
easier for me with some npm scripts this
is obviously optional but
it's pretty common to set this up
because it's easy to run
so i'm going to put in my command again
source
index.html and i'm going to introduce a
build command as well so
this just has a build
again you can use any process you don't
even have to use a javascript
build tool but this is just an
illustrative
idea to bring you through the top file
so now when i run yarn build it's going
to execute this command
and run parcel build and that builds to
the dist folder and remember that this
folder is exactly what we're going to
ship
to
nullify to verify that this folder has
built successfully i can use serv dist
serve as a cli that you can install
and that serves
your files locally
and you can see that yours your code is
running in production the difference
between
this old
version and this one is that this is
running react in development mode
and over here we're running react in
production mode
so that's how you can tell that your
builds are running locally
so
as long as you can develop and build
locally you may not need
continuous deployment because as long as
you're debugging things and making sure
that your your javascript code is even
valid
this is a perfectly fine way and you
don't have to use nullify at all
but
what nellify
does for you is starts to do that
automation step
so
basically
the idea is that you would not be
checking in your dist
folder you would just be saying you
would just be adding that to git ignore
actually
and you only have the source folder in
your
code
let's see what happens when we push our
latest changes to get
we can see that our build has failed
because this time
we don't have a disk directory anymore
we remember we added that to git ignore
because we're now building from a source
directory
that means that we need to run
the build command in our deployment
environment
to set up continuous deployment
so that brings us to build settings
really there's only two places to set
your build command the first is in your
deploy settings
so let's edit our settings over here and
add the build command yarn run build
and we're still going to deploy from
dist and we'll save that
you can use the base directory if you
have a subfolder
for example if you have a monorepo setup
so now we have the build command set
we're going to have to go back to
deploys and rerun the deploy again you
can see that our build is now successful
and in particular you can see that we're
now executing the user command yarn run
build which is the one that we did
and it's showing us running the build
showing the output of the build
and then saving a bunch of dependencies
and then deploying site from dist
so
over here if you want to check out the
deploy you can open this in a new tab
and check out
how this reacts code is now in
production on the production nullify
site and it's using the production build
of react
so that's all well and good
but there's a second way to set build
command and that's in nullified.tamil
this is a higher priority
command
so it actually overrides what we had
before
so i'm going to comment it out and this
is how it should look
under the build settings you should add
a command equals and then whatever
string you want to run yarn build
so this can take any form uh previously
we set yarn run build but
if you're using yarn you can also just
type yarn build and that is basically
the same command
i just want to show you some visual
difference
i'm going to commit it to git
add build
command
and i'm going to push it to master
and that'll kick off the build again
in netlify notice that this time there's
a special message printed over here
saying there's different build command
detected going to use the one specified
in the tomo file yarn build versus yarn
run build so yarn run build is the first
command that we set in the user
interface and yarn build is the second
command that we actually set in
nullify.tomo so this is higher
precedence because that's the single
source of truth for all the
nullify settings that you ever want to
build so i personally encourage people
to use nullified autumnal but you may
find
it easier to onboard
beginners with
the web ui
either way
when you read your logs you should be
able to figure out what's going on by
keeping an eye out for the commands that
you want to run
and looking for any error messages in
case
so overall that's a very gentle
introduction to build settings it wasn't
too hard but really what's an operation
over here is the core of netlify which
is the buildbot
and that's something that we're going to
dive into a little bit
in this next section
so one way to find out about the
buildbot is to read some of these
documentation on the site
it goes into a little bit about the
origin of the buildbot some default
environment settings and versions that
you may want to know about
but basically the high level concept
that you should know is that the
buildbot is basically a docker container
our cto used to work at docker and so
we're very familiar with this technology
and it gives us a lot of nice security
and reproduction capabilities
that is very helpful in creating a
continuous deployment service like
netlify so let's check out what the
docker container
environment looks like
it really is just a massive
bash file
this is entirely open source so you can
actually run it locally so you can debug
your own docker builds
there's different versions of the build
images that are available so the legacy
sites will have the trusty version you
should not run into that if you're
watching this video and the current
sites
have the xeno build image
and that's
the more current up-to-date version you
can see the branches accordingly
there is ongoing work on new a new
version of the buildbot so by the time
you watch this video there may be a new
version available but hopefully i'll
also have a new video out by then
covering that
but basically you should be aware of
that you can actually pull down the
production
the exact same docker image that nullify
runs to your local
environment so that you can test your
builds in case something is going wrong
in this whole build logic
and it's also open source so you're
welcome to contribute but again i want
to stick to the high level
if you know that there's a build bot you
know that you can reproduce it you know
that it does a number of different
things but at a high level you should be
aware that
there is a cache so nullified builds are
not entirely stateless they actually we
actually cache things for performance
improvements everything is stored in a
netlife directory and in fact you can
you personally can use a build script to
save things in cache
diff them
and decide whether to build things or
not based on the cache
you may write your own scripts or you
can use
open source tooling like this one from
david wells called catch me outside
which is pretty clever
i do like the name a lot
but basically it helps to think about
how's you to think about
checking where do you store things in
cash
how should you handle a cash update and
then checking for diffs between updates
and if there is a need to update the
cash then you run the cash update again
so a simple thing like that can actually
cut down your build times by a lot by
skipping the steps of building
things that are unnecessary for you to
build
then it will install then a build bot
goes to second stage it starts
installing dependencies the dependencies
here are not just your you know
npm dependencies but also your known
versions
it will check the dot nvm versions for
example
it will check your ruby environments if
you're using a
ruby static site generator like jekyll
php
hugo
so on and so forth even has python go
a nice grab bag of everything that you
could possibly want i even have had some
success installing haskell you can just
curl
your various environments and store them
in cache
basically anything that you can do in a
typical bash environment you can do in
nullify
then we get to the actual build process
that's where we run your build command
if you have one obviously we did the
first part of the video entirely without
a build process so you don't have to
have one if you don't need it then we
package and optimize this is an
optimization step that
may or may not apply for you but
basically this is post processing and
other optimizations that we do for
delivering to our cdn then
we're going to deploy the site from
the disk folder again this is from the
folder that you specified in your
netlife.tomo or somewhere else
we're going to save the dependencies for
the next build
and we're going to output a manifest you
can't see over here but there's a
manifest of
what has been produced so that we can do
diffs and so that we can produce images
so that we can produce summary
information like this
showing you
what
files and what
redirect rules have changed and have
been processed by the buildbot
so that's the long
that's the high level overview of the
build stages
things happen in a sequence and i think
if you know the where your issues are if
you're debugging a build
it will help you will help us a lot in
helping you
and
all around
demystifying nullify by a lot
so the last thing that we should cover
before getting into the gotcha section
is concurrent builds and canceling
builds
so the idea here is that anything can
trigger a build right i can be pushing a
commit to get or it could be triggering
deploy over here
or i could be
triggering a deployer from a build hook
that we talked about in the previous
video so over here i have a build hook
that i can just be calling randomly and
so there now i have two current deploys
so what's happening right here is that i
only have a maximum of one concurrent
deploy so this is building and this is
waiting sometimes i actually want to
just skip this step because i just want
to go straight to the most recent build
because i know that's the one
and so i can just click on click in here
and cancel the deploy
so once i cancel the deploy i'm no
longer i'm using that
current deploy and now i have the next
one enqueued so i just have to wait a
little bit but already it's starting to
build so that's the that's the rough
idea if you want to have
for a one for a single person
workflow
one concurrent build is probably enough
but
you may want for a team you may want to
look into multiple concurrent builds so
that you don't hold each other up
canceling the build is as simple as just
killing the docker
process and that's as that's all it is
so as long as nothing so as long as
everything is failing every single build
is failing the most recent successful
build actually still keeps alive so so
your site doesn't go down until we have
a new successful build
all right so time to cover some gotchas
that people typically run into in fact
this is probably the most difficult part
of learning netlify which is learning
how to use a continuous deployment
environment in fact we have a whole
place in the docks dedicated to build
gotchas so if you have any
issues just make sure to have a read of
all of these
and see if that matches your situation
so some of the common gotchas that i
wanted to highlight is first of all the
15 minute rule basically if your build
takes
longer than 15 minutes nullify might cut
it off on the free tier if you're a
customer or you have some sort of
special case you may get in touch with
support to extend that up to 60 minutes
or higher
next you also have to think about
permissions and api secrets sometimes
your builds particularly if you're using
a gatsby or
next template
that requires a
api key otherwise it will fail to build
then you may need to provide those api
keys
in order to build build stuff
we'll have a section
at the end about environment variables
and where you can set them
lastly i also want you to be careful
about
what folder you're deploying so make
sure that when you have a disk folder
you're you're actually building to the
disk folder sometimes people just aren't
aware of what folder they're deploying
to and
just thinking that through can help a
lot
and of course there's a community
nullified topic where you can find out a
lot more about faqs that people run into
on building things
so that really leads me into the
troubleshooting part of the video
basically what to do when things go
wrong
make sure to read your build logs i've
already read
the build logs with you for a number of
different build situations
make sure that you can build locally so
if all else fails
at least make sure you can do
your build command locally like yarn
build for example and make sure that
runs without any hiccups
so that this exact same thing can
actually run
in netlify
and
then also think about hidden
dependencies so for example over here
i'm using node 10.13
and over in netlify i'm using 10.16. if
there's any
indee if there's any differences that
i'm relying on
that might actually
cause some very subtle bugs so just to
be aware of that you can set the node
versions in an nvm script and it's all
well documented in the docs
next a yarn versus npm issue so for
example one of the very common issues is
relying on yarn in your build command
but then not having yarn in your build
environment and yarn is only installed
if you have a yarn lock file so if i
delete this
this will just run
this would just assume it's an npm setup
and the yarn command will not be
available so you'd need to add a yarn
lock file for the yarn cli to be
installed
and that's a pretty common issue for
beginners
basically just always commit your log
files
if you're using hugo grunt bower or any
other
environment like ruby or python
definitely head to the build settings
page to check out options for
configuring the versions of your
environment so that
you can run the version that you
actually expect
and if all else fails definitely check
out community.netify.com
where you can probably search your
question to be answered or just follow
your own question the last part of this
video focuses on environment variables
where you can set api secrets and all
other good stuff
so
basically the only place to set
environment variables as of right now is
inside the user interface so let's head
over to our site
go to deploy settings scroll all the way
down to environment and set environment
variables
my secret for example
i'm
always
i'm going to save that
and now i can access this environment
variable inside my build process
so i'm going to
go in here and actually try to add that
to my build
one way i can do that is to just add it
as a
build command as a pre-built
so over here i can just add pre-build
and by the way this is a built-in
feature of npm scripts nothing nullify
specific here
and let's commit this
so now if we open up our nullify log
again you can now see that inside our
new build we're running the pre-built
script and it echoes the
secret that i've placed inside of my
environment variables so this is handy
for
open source projects that may want to
ping
a private api for example to get some
data to actually pass into the static
site generator so you can build for
example shopify site or air table data
or anything else like that nullify
environment variables are not just for
passing in secrets to your app
you can also use them to change the
environment to vary the environment so
you can check out this list
where these are netlify specific
environment variables nullify
communicating to you so you can check
for example in process.m.netfile and if
that's true then you're inside of a
network environment amplify also tells
you what immutable url you're deploying
to the main url that you're probably
going to access what branch is coming
from if you're deploying from a
different branch the commit the build id
the context basically a lot of metadata
to figure out what the origin and meta
and meta information about your build is
so that's the first category of
environment variables which are things
that nullify puts in your environment to
communicate to you what is going on in
your environment and the next category
are things that you can set inside of
netlify's environment so that changes
the versions for example you can set the
npm version you can set the yarn version
or your ruby version go version your
java version python version
um and all that stuff and so this is
extremely variable and
it's all there for you if you need it
there also another category of
environment variables that you should
probably never touch but these are
helpful in case you need them for some
debugging or some magic internal
advanced
things i personally never use
so if you want to learn more check out
this scotch article that i wrote
detailing how to use environment
variables to pass secrets to the front
end
take note that exposing api tokens to
your front end is sometimes a bad thing
so
react view gatsby they all like to make
you prefix environment variables to make
sure that you're aware not to leak
everything over
and then a simple guide is how to change
environment variables to vary your
environment like we already explained as
well as some other poly user features
that we talked briefly about
yeah so that's
an overall guide to netlify build
in aggregate it's not too complex but
when you combine building with deploying
to nullify edge that can be extremely
powerful
and in the next video we'll cover local
dev and whatnot if i can do for you
there
see ya
we're in part three of our introduction
to netlify
and
this is netlifydev
nullified dev is the newest kid on the
block
and in fact most of it is still in beta
but it's worth talking about because
it's kind of the newest functionality
and it helps a lot with your local dev
capabilities
so the best way to find out more
information about it is to check out the
site netlify.com products dev
and this gives you a good overview about
what it does
it's a dev server that powers
a lot of the local replication of what
the netlife production platform is and
we just replicate it on your local
environment
and the reason you want this is because
remember
you want to have faster iteration cycles
and you don't want to wait for the build
bot so you want to have full control and
local replication of your builds before
you actually
deploy them so the way you get there is
to npm install in the cli and then run
the lfi dev and this has the detector
mode that will pick up any of your
static site generator projects so that
starts a full local environment it
detects and runs your site generator
makes environment variables available
from the production platform does edge
logic so your redirects will work and
then runs your cloud functions as if as
a function as a local server and we
proxy everything together and then you
can also stream live as well
so the best way to get started is also
to head to the docs um there's a talk
that you should definitely check out uh
introducing nullified dev this talk
happens to be the keynote at which
netlifedev was launched so definitely
check that out
and the other thing you should know
about the docs is that it's not the full
story the the netflix dev api is still a
little bit in flux
and so we've actually managed that on
the cli repo
and that's you have to just go to the
github nullify.li
and you just look in the readme and look
for the nullified dev docs and here you
can get actually detailed information
about usage but we're going to guide you
through it so let's head out over to our
demo site that we've been working on and
this is running parcel and it's a it's a
project that we can run so right now
what i'm going to do is i'm going to
treat this as a static site so i'm going
to act as the buildbot and what does the
buildbot do
for
building this site it doesn't run the
dev server it actually runs the build
command
right so let's actually just run the
build command ourselves i'm going to run
yarn build and that actually runs parcel
build and that generates to the disk
folder you can see over here
and so that's normally what we'd serve
uh from netify's point of view
and so now we can actually run nullified
dev so
we have that cli command lfi dev
there's that little gem icon that i'm
very proud of
and you can see that there's no dev
server detected it's spun up a server on
localhost 399 as well as a nullified dev
server
on localhost 8888
so they're two different servers and
let's see what the difference is so now
i'm on localhost 888.88 and you can see
that i have an activereact app it looks
good and that's what we've been working
with but also i can go to localhost 399.
and get the exact same thing so i also
have a live react app and so what's the
difference why do we have two different
servers and that's what you really have
to understand about nullify is that
there's a project server and then
there's a netlife dev server so the
project server is um if it comes with a
server then uh we'll use that one if not
nullified dev will spin up a server for
you and then serve from there so that's
what we've been doing just now which is
static host and it will join everything
and then output a single unified
location so localhost 888. so that about
sums it up for the build process
but we also want to preserve the
developer experience of the
live
hot reloading dev server so let's take a
look at what parcel does for hot
reloading we run yarn start and it runs
parcel source index html and then it
outputs at localhost one two three four
so that's the important port for them
for for parcel it's gonna be one two
three four for other projects that
create react app will be others but we
know that for nullified devs so we can
go into nullified automo and add that
config command so the port will be one
two three four and we can tell notified
of that
and you can see documentation for this
in the netified dev docs over there and
that's exactly what we're doing and then
we'll run the we'll add the command of
yarn start that's exactly what we just
did right we ran yarn start and then
we navigated to localhost one two three
four so we've configured nullified dev
inside of nullify.tamil and the final
piece is that we'll want to add a
publish directory this is really where
the
redirects file will be located it's not
strictly necessary but it's probably a
good idea to leave it in there i'm just
going to point it to source
doesn't really matter so now i can run
nullified dev and instead of running a
static server for me it's going to
actually start to run the parcel server
for me on localhost one two three four
i'm making an emphasis on this because
previously we ran a static server and we
just
did yarn build before running our static
server and then serving up our files
locally now we're using nullified dev to
run parcel start or yarn start
which runs parcel and parcel runs a
server at localhost one two three four
so again you'll see
that
the site can be accessed on localhost
one two three four
and also
the nullified dev server can be accessed
at localhost 8888.
so the question then becomes why bother
to have two servers it's confusing it's
seems like it's unnecessary we have
localhost
on 88.8 as well as one two three four
and the reason is because of this
diagram and this is all the extra
functionality we get to add because
we're proxying the project's original
server to 8888
and so when we're the user we actually
view that url localhost 888 and we get
all this functionality that we would get
in production for example redirects so
over here in my underscore redirects
file i have a redirect from about us to
about
and so when i head to localhost 888 i
can type in about slash about us
and that redirects to slash about and
that means that our redirects are
working locally
and that's important for people for
example in the advertising industry who
really care a lot about broken links i
also want to show you how detectors work
so notice i'm starting from an empty
folder and i'm going to create a new
create react app app that's always very
awkward to say and now when i'm done
installing notice how this is a normal
create react type folder
and
normally you'd start by typing yarn
start but
and that kicks off the react script
start script but here we're actually
going to just run nullified dev and
nullify dev is going to pick it up that
the fact that we're running a create
react app project and then it'll just
run automatically and pick it up
so that's the vision of create react app
and detectors and nullify that nullified
dev will just detect your
project and it will just run the server
automatically without any configuration
now we're going to do a quick demo of
how environment variables work in
nullified dev and you can pull down your
production environment variables to
local dev
obviously you shouldn't always do that
but it can be very helpful for debugging
and not duplicating some environment
variables so first i'm going to run a
yarn build
and because i don't have this new
project linked up to nutify i'm going to
run nullify init and because i don't
have it linked to github i'm just going
to choose the create deploy site
manually option and it's just going to
create a site instance for me that i can
deploy to
so now i'm just going to create a
netlife.tamil file and that's going to
house all the settings which i normally
would set up so first i'll add in a
build key with a publish
value of build
and the other command i'm going to run
is just nullify deploy dash dash prod
and so now because i'm just going to
publish that build folder that's all i
need to know and how now i'm deployed my
create react app app is deployed
without continuous deployment
but now i can run something like
netlify open and head to the deploy
section and head to the environment
variables section and add in an
environment variable here i'm using
everybody's favorite environment
variable my underscore secret but that's
actually not going to work in a react
app because
create react app doesn't want you to
expose every environment variable on the
front end so they have it as filtered
you must prefix all your environment
variables with react app underscore
and then whatever your environment
variable is so those are the ones that
will actually get exposed on the front
end and that's a very good security
feature but it just trips up people who
don't know that it exists and they have
to look in the docs
so now we can actually reference that
environment variable inside of our code
so here i'm just going to access
process.n
dot react app my secret
and that's going to be available
in production so typically what you do
here is you try to have a duplicate and
dot env file locally and then run that
but here when i run netflight dev i can
just or i just run nd because of my
shortcut
i it just i can just run the dev server
but then also if you look at the build
logs it also injects this build setting
of environment variables so nullified
dev goes up into my nullify instance
pulls down that secret and now locally i
haven't deployed yet locally i have
access to that production environment
variable so that's the idea and that can
be extended uh to do a lot of different
things together for example integrations
with add-on providers
i'm going to do a video on that as well
but just trivially you can
replicate your production environment
with environment variables and redirects
you can also share them live with
nullified dash
live
but that's very beta so i'm not going to
show it to you today and the other
thing that we're going to talk about is
also
not exposing your secrets so here i have
a secret that i want to work with but i
don't want to expose it to the front end
but i still have to work with it in some
form so for example like an api secret
that i want to hide somewhere right like
i don't want the user to know it because
then they can also just use
my functions
so i'm going to show you the netlife
functions create command you can type it
out as part of the cli so
obviously
we're just going to use nutlify
functions colon create
but obviously you can also use a alias
for that i use nfc and that just runs
that command
oh i don't have a functions folder so
i'm just going to go ahead and go to
nullify.tamo and add a functions folder
you can call it the very creative name
of functions but you can just really
call it whatever you like and now i'm
going to run the functions create again
and notice it created that functions
folder and now it gives me this drop
down of things i can choose from so
there's a whole bunch of pre-made
templates for you to get started
depending on your use case here we're
really just going to go through and
maybe pick something
like this hello world function that i've
picked out and that really scaffolds out
that template into your functions folder
that you've configured
by default um
identify dev gives you a folder and then
a
script under that folder
which is named the same and it follows
the
aws lambda syntax
and so now i can rename my secret to
just my secret because i'm not going to
expose it to the front end and i can
take that my underscore secret and
expose and grab it in process.emv inside
of my netlify function so here i have it
co-located with my source code but i'm
just going to say process.emv dot my
secret
and i'm just going to echo it out in a
json body response so now i'm going to
run nullified dev and that again
thinking about your mental model runs
that create react app server but then
also runs
a
netlife function server so it's under
the url.nullify function hello dash
world and now that response hello i'm
always angry that's the exact response
from the environment variables
so we've now shown you how to access
environment variables from the front end
as well as
the functions
and that's very helpful so for example
when i create a hook
or fetch data when i load my app and
when i when i load my app i can just go
back to the front end and that's going
to ping my function
and let me just open up the dev tools
over here so i'm going to open my app
and it's going to ping my function and
so it's not going to expose that
environment variable on the front end
it's going to just
ping that nullify function and the
function itself has access to that
environment variable
now obviously this is a very simple
function
and if you look at the code
it's actually we've aired on this the
side of
very simple simplicity just to show you
that
you really don't need that much to get
going
we've even included some boilerplate
like
catching
and returning a status code of 500 if
there's an error and that's just a best
practice for http status codes but here
we're going to introduce a more
complicated function and this time one
that uses
known modules dependency for itself so
again we're going to run lfi functions
create i'm going to pick the node fetch
template and node fetch itself installs
node modules with a package.json and
then it uses that as a fetch inside of
known to ping an api so this is a more
realistic
nullify function or serverless function
which proxies an api for you so here i'm
going to run i'm going to ping the node
fetch in front of in my front end and
then run lfi dev and now when i reload
my front end it actually loads that
external api and so now it's proxied so
that i can bypass
course issues for example or i can add a
secret api key or i can add several
functions i can read a database and
really just whatever you want to do in
known you can do in a node.js functions
subject to
the timeout limits so here for example i
can add my process.emv dot my secret and
if that was required by the api i could
definitely send it in there without
exposing it to my front end so that is
probably the number one support question
and now you know how to do that
i can also swap it out so for example
here i have a different api
and i'm swapping it out for chuck norris
jokes
always a good time
but hopefully you get the idea that i'm
developing all this very very quickly
inside of my local dev environment and
it's exactly the same environment as it
would be
in a service scenario i can even test it
for example if i open up a new terminal
and type nullifier functions invoke
that will give me a list of my existing
functions and i can pick that
one of the functions like hello world i
can choose whether i want to emulate
nullify identity we'll talk about this
in another video i'm going to go with no
for now
and
and that would that would basically pass
a authentication header if i need to but
here we get the mock response so
without even running a front end i can
test my my nullify function and so
that's a very good example for more
information definitely read the readme
for example for passing a sample payload
query string
as well as a file that has that payload
we do have special case event triggered
functions
we're not really going to cover that
right now but event triggered functions
are basically
hard-coded names that are triggered on
certain events like for example when
someone signs in through nullify
identity and that's useful to know
now important thing to know is to
understand what happens when i have
my nullify functions continuously
deployed so for example here in my
getting norm on the folder file i have
the known modules get ignored so
that means that when i deploy my files
in nullifies buildbot the node modules
for the node fetch
function will not be there
and that will be a problem because it
will try to require the node fetch
module and it will fail so here i have
an example of such a failure and it says
for example error could not find known
fetch module in the file
and so a lot of people run into this and
think it's a bug with nullified dev uh
it's not really it's it's also a little
bit our fault that we can make this
experience a bit nicer but really
the the solution is to make sure to
install
uh to run npm install or yarn
on each individual function folder if
you need it obviously if you don't need
it you can just put everything in the
top level node modules and that's the
standard known resolution algorithm
but one solution to you actually use is
to add netlify lambda so this is a
helper library it used to be the
predecessor to nullify dev
and that's why you see some old
information about this
but now netflix lambda is a helper
library for nullified dev
and we'll add we'll use the netify
lambda install thing and we'll just add
it as a post install npm script so now
that will run and it'll go through every
single function folder
and it will uh it will just install uh
the dependencies for every functions
folder and you can read more in the docs
but essentially this is what the success
will look like
we can see
somewhere in the docs that will have a
netlify lambda install command
being run and it will say it's
installing function dependencies and
node fetch dependencies are installed so
that's the kind of thing that we are
looking for for a continuously deployed
serverless nullify function
solution
with no dependencies all independently
managed per folder
and that's a that's a really good way to
handle the dependencies because it will
just guarantee that it's always
installed and so here you can see the
same app that we built in dev in
production and it's working exactly the
same
now if you notice um all these functions
that we've been written so far is in
node.js format with the exports.handler
syntax or module.export syntax and if
you want to use webpack babel or
typescript
you can't really do that here
without a build step right this is raw
node.js it runs under node 8 or 10
and you really need a build step and
that's where you use nullify lambda
so nullified lambda and netflight dev
have similar but overlapping
responsibilities and i wrote a lot of
docs in the readme to explain how to use
them
but basically
netflix lambda is a build tool now
that runs your nullify functions from a
source to a dist
and that's the under basic understanding
that you have to achieve here now now
this
these functions will be your source file
and you're going to have to serve or
publish the functions from a dist
folder
so so here we can actually move
everything so for example i can create a
new function folder called source
functions and i can move
this function this hello function to a
typescript function
i i can also just like rename everything
so i'm going to i'm going to add some
typescript types so for example i can
follow the docs and add babel preset
typescript
uh yarn add
d that will preset typescript and i can
also add a bunch of other
uh utilities like typescript types node
and types aws lambda and that just helps
to add typescript to my project here i'm
only going to use it for that hello
world function but you can see
everything i'm about to do so i'm adding
a babelrc file and so we're using
typescript with babel
and now in helloworld.ts i can import
the types for
importing hand the handler contacts
callback any api gateway type from aws
lambda so now i can type go through and
type everything and i can also use the
export keyword
and that's a very very handy handy way
of typing everything so now i can type
for example api gateway events for
events and contexts for context and now
each of these things have the correct
properties on them so for example if i
type event dot it gives me all those
values from the autocomplete because
of the types that are just from
definitely typed of aws lambda same
thing for context
um including an identity field which we
can use for nullify identity
and and so that's these are just very
handy ways of writing better more
correct code if you are okay with using
a build step and using typescript
and so now um we need to impose a build
command i'm going to
put it on the post build part of npm
scripts it's going to run if i land the
build source function so it's going to
build from the source functions into the
production
publish the the folder that we're going
to publish like functions hello world
and that's going to be helloworld.js
right and and that's going to be a
minified output from the source
typescript file
um and so that's what netflix lambda
does it helps you install dependencies
and it helps you build
um
from a source file to a disk file and
and so then everything can be
uh it can be run locally uh netify dev
has an understanding of what nullify
lambda is so it will run that if i
lambda build for you if it detects it in
your package script so this is what we
call function builder detectors
and that's
that's exactly how it how it's supposed
to work
so that you can run it
locally and make sure that your
scripts are up to date but then also
deploy them
with minimum configuration so that is
nullified dev uh we're gonna go to the
next part to identity forms analytics
cms all that good stuff
but thank you for
taking the time to check out nullified
dev and hopefully that helps your local
dev work
okay so now we're on to forms this is
actually a pretty big section it's one
of the most widely used add-ons of
netlify and it's meant for what it says
on the tin for form submissions
it's not a database although it does
store data
so don't try to use it as a database
because it will cost you
and also it's just not meant for that um
in terms of the data structure that it
that it offers
but it's very handy for
contact forms
uh like if you want to inquire about
prices so if you want to book a workshop
or something or
you know leave a comment
or upload a file for example for
claiming receipts or something like that
all of these are very good use cases for
netlify forms
so where to find out about the life
forms
we're gonna go over to the docs
and head to the forum section
and forms are literally
adding an attribute onto a form tag as
far as regular html goes
i do think it's a little bit more
complicated for react forms
and we'll talk a little bit about
how that works in react
but in plain html we can actually do
this pretty easily in our demo that
we've been working on so i'm going to go
over to the demo that we have
and i'm going to go over here so right
now i have all this bunch of stuff
actually i'm just going to go over to
the about so let's put the forms on the
about page so you can see right now i
don't have any forms i just have a bunch
of header and html
and then let's go over to the
drop demo site
let's see
drop
nullify drop demo sitemaster yep okay
let's go over to the forms and see that
uh here the documentation
um here's some basic info and there's
nothing here because there's no forms
activated so what i'm going to do is i'm
literally going to copy and paste this
example
down inside of the about us page and i'm
going to say this is the contact us page
because
i just like to name things what they do
so i'm going to call this contact.html
and now because i have a build step from
source to dist
i have to say yarn build
basically just following my own build
command down in here i covered this in
the previous video
and i can now deploy i like deploying
locally and not using the continuous
deployment when i'm debugging something
like a form
so that i can do the builds locally
and just be very very sure what i'm
building because sometimes your static
side generator might strip out some
values here we just really want to make
sure that we have a netlify tag
so if i refresh i should be able to see
something different i should see the
form name contact
because i specified the nullifier tag
and i should see that it's got no
submissions right now
so let's have a look at what it looks
like on
the current deployed site
i'm going to go over to the contact us
page
and here i'm going to say hello
free code cam obviously you want to put
validation on this before sending oh
well
there we go so by default it sends us to
this thank you page which it's just a
default nullify page
and you can customize that later we'll
just show you in a separate section
but you can see over here if you head to
the form section
and you hit here that you see the form
submission down in here as well
let's go ahead and attach
file submissions to this form
um
i'm going to just duplicate this and
call this file
you must have an input type of file
that's the semantic html and then we can
just call this whatever you want like
fcc file
and we'll save that
again i'm going to yarn build
and
push
using my alias for nullified deploy
so i just changed the form but because
it's the same name it's going to still
reflect as the same form
over here
and it's still reflected that but it's
got a new field here for fcc file so
let's go over here and refresh
it form two
form
at f3codecamp.com
let's pick a file
let's send a little image
send that up there
thank you submitted
and when we refresh we should be able to
see form two
and a link for the file that was
submitted so this is an image but
obviously it could be
something else as well
now this thank you page is kind of ugly
so let's actually change that to reflect
something that reflects our the look and
feel of our site
and we'll head over to the project
we'll copy over this contact html and
we'll say thank you
dot html
blah blah blah
thank you
and
take that out
all right um also going to want to
link to that somewhere or build that
somewhere
so i will just refer to that in index
html
and then the other step not to forget is
to add an action to the form so i'm
going to add an action
and i'm going to say
just head to the thank you page after
you're done submitting
okay
so i think that's ready
i'm gonna yarn build
again i'm doing manual deployments
because i don't want to wait for
continuous deployments i want full
control over everything so do not
continuous deploy
all right so i'm going to refresh and
i'm going to say try 3
potato tomato whatever
and i'm going to choose the jam reptiles
image i'm going to send that in
it's going to submit and it's going to
redirect and say thank you right or you
could redirect to the index page or
whatever
um so over here i received the
submission again
okay
so that's all
well and good and now we have a basic
working flow
the next thing you're going to want to
do is probably to do something else on
submissions so
right now when you're submitting
your forms
you don't really know about them they're
just there and you have to kind of check
for them
you can actually opt to get an email
when people submit forms to you
you can add notification
you can add slack integrations and email
or outgoing web hook to anything that is
listening for a web hook
um
so that's that's an option as well i
should probably put that in there as one
of the options but then um what i wanted
to make clear is that you can also
create functions that do whatever you
want um including form validation so
everything here is client-side
uh but what if you need to do
server-side form validation do you need
a server obviously the answer is no
because we're netlify
um and here's how to do it
we're gonna declare a function
folder down in here
i'll just call the functions folder the
very imaginative name
of functions
and we'll put that it will create that
functions folder
um i actually have a nullified dev
uh
alias for this or template for this
so i'm gonna use nullify functions
create and i'm gonna look for the
submissions
created template
so i'm going to
let notify dev scaffold that out for me
so what this does
submission created is it runs when
a submission is is being done
um and it parses that email and it sends
stuff out
we're going to dramatically simplify
this so that we can actually just try
doing something with our
event triggered function which because
this is what it's called this is a
special special name
in the docs
where it just fires when people submit
forms
um so we're gonna parse the event body
and payload
we're gonna console log it out
and that's gonna be json and stringify
this thing
um and then we're just going to return a
body
uh that reflects some measure of success
i am going to just return
something like a
status code
200
and
and actually i'm just gonna say okay
all right so very very simple function a
few lines of code and we're just logging
out what we receive and we'll see what
happens
there
okay so now we can just nullify deploy
again
notice i don't have to build the front
end because all i'm doing is working
with the functions so now it's
discovered the function and it's
deploying the function as well
if you want to see the function over
here you can actually head to the
function section
and refresh
and you can see that there's a
submission created function and there's
a log for this function
so now we're gonna
submit another form try number four
same potato potato
we're gonna submit it again but now it's
gonna fire
and and it might take a while but we
will actually see the logs here so the
idea is that everything that was
submitted you can actually access
including some nice metadata that you
can use
um
and send it off to whatever other
service that you're using so here we've
got a subscription newsletter thing
but this is literally as flexible as you
want you can obviously
set up your own slack integration on
twilio or whatever you can think of
just from the event of someone
submitting a form for you
and obviously you still have the form
data over here
so now that anyone can send in
a form to your site
the immediate question is how do we make
sure that
they're legit and not spam submissions
and that is the question of spam
filtering we're going to cover three
methods
and the first one is the best because it
takes no configuration you already have
it on by default
and that's the akismet
filtering and the kismet is what
wordpress uses for managing anti-spam
they measure it against other ongoing
spam activity and help you actively
block them it's hard to test them
because it's kind of
amorphous but
we can actually try with some of these
hard-coded names which are guaranteed to
be spam and let's just try and submit
them and see what happens
so we'll submit them over here and when
we refresh we don't see them show up in
the verified submissions because they're
over in the spam submissions
and you can review them and either
delete them or mark them as verified
and once they're verified they'll show
up
the next method we want to address is
the honeypot
so the honeypot is a security method
where
basically tricking bots into filling out
fields which humans would not see
and you can hide those fields with css
so we'll check we'll try this on this
honeypot field over here and here's how
you kind of do it in the docs but
basically if you go over to your contact
form
and let's
put in a harne pot filled i'm just going
to copy and paste this field
and
paste it in there
and so this the idea is that this will
be hidden
and we can add in a style tag for
example
dot hidden
opacity
zero
and then the last thing to do is to tell
nullify that this is a honeypot field
so anything with the name bot field is a
honeypot field so we'll just tell notify
that
and
okay
and so now
we are in build again
and netlify deploy
so the idea is that you have extra spam
prevention enabled by honeypot field
that's a new indication that it's on
and it's kind of hard to demo because it
just works but i'm going to try anyway
so let's actually just use the form
and here you can see the opacity zero
field obviously you can move it around
with css or shrink it or whatever
it doesn't really matter um but here
let's just say human at human
i'm human
and human human.com and send that in and
we should see human human.com show up
over here
it's fantastic
and now let's actually say robot
and
not totally human.com
and uh let's actually fill in that field
we're not supposed to feel it so the
idea is that as a human
you never you never see this field so
you never fill in but as a robot you're
filling in fields indiscriminately so
um i'm totally
human
all right so there's a field here
and we're going to send that in and
let's see the network
tab
and we're gonna send that in
and
and you can see in the post request that
we send that in the bot field
it's actually filled out so
that means that when nullify receives it
they know that that field is supposed to
be
screened out so
it just doesn't even show up
when you refresh
and that's one way of
spam prevention via honeypot field it
doesn't even show up in the spam
submissions just because we know for
sure it's spam great so
that's the second method and then the
third method is recaptchas
so adding a recaptcha is pretty much the
same as adding a honeypot except that it
has a different method of catching spam
and
this one imposes more work on humans but
has a higher chance of success of
filtering out spam
so
the way you do it is over here if you
scroll down to the recaptcha section
and you literally add a recaptcha field
so let's just add it in over here
to our code
and we'll also tell the form
that there is a recapture field
so this is the most secure form
there has ever been
we're going to build and deploy again so
when i refresh there's a recapture field
obviously it could be styled better but
you can kind of fill it in
and
let's intentionally fail
the recaptcha
it's just not letting me through
[Laughter]
so yeah i can't really fake being a
robot
oh no
um so it's that good that even though
i'm a human
trying to simulate being a robot
um i just have to be good enough at
computer vision to let it through and
now it's through
and i can see my my own submission
and uh yeah so it is a little bit more
annoying but that's recapture for you
and you're pretty much guaranteed that
it's not a robot
and that's also v2 so you should know
the difference between recapture v2 and
v3
uh v2 is the one with the annoying
pickings of stuff
there is recatcher of your own settings
so you can set up your own recapture
secrets over here you're using nullifies
and recapture v3 is
the new one without a image selection
it's
invisible and supposed to be low
friction and you'd have to set up set
that up yourself with javascript um but
if you're worried about user friction
this is the way to go
so we've talked about spam filtering
and
i just wanted to address one of the
important nuances that a lot of
developers face with modern javascript
frameworks and that's with single page
apps
and let's just talk a little bit about
how we're doing the form processing here
so when you deploy
you can actually see that here i'm doing
manual deploys but it's the same
principle
i deploy from my cli or from github
whatever
and once it builds and and pushes all
the html out
there's this post-processing step that
happens and that's where the forms
are detected what netflix is basically
doing is saying okay out of
all of these generated files let's zoom
out a little bit out of all these
generated files in the disk folder which
of these are html
um and it looks like this one is html
okay and let's look at all of these
fields
and look for a form field with the
nullify tag
right and then
i'm just going to scan this in as as a
form
the problem with this is that sometimes
the form doesn't exist
as a single page app
so sometimes you just have like div id
equals app
and that's all you ship for create react
app
so that's a common problem and there are
a number of ways to do this so what
happens in this scenario where there's
no form in the html is that nullify
would just tell you that
it hasn't
detected any forms and therefore it
doesn't set up the form for you on the
back end
um so you need to tell netlify that
there is a form
and so
what the trick is to that is that
instead of this div id app you can
basically take the app form field name
and
put it inside of the div id app
and then paste it in there
and so
this way nullify will scan the html
and find the find the form name set up
the fields and then react will come in
and
replace everything inside of div id app
and
you know use its own javascript created
elements that look exactly the same as
this thing so because this is really
important for people to understand we're
actually going to go through the actions
and actually do this
and just to
make really really clear
how this is done so that
when you run into your own single page
app scenario i don't care what framework
you're using the same principles apply
it has to exist in the final html and
then you can do whatever you want on the
javascript side of things and we'll talk
about some ajax form submissions as well
so over here
remember in our initial
video we actually replaced index.html
with some javascript
index.js over here i'm going to take
that out
and move it over to the contact form
so the contact form is now going to have
the javascript
and the javascript is going to look for
an id of app and say hello
from react
so let's do that
and i'm going to say id
actually
no let's let's put this put this here
div id equals app
and we'll do close div here
okay
so let's start this and let's see how
that works
so
reacts so this will be in the html but
reacts will come in and replace
everything inside divide the app
so let's head to the form
and you can see that little flash of the
form but as the javascript came in now
it became a react app
so the whole idea is that i have to
replicate
what's in here with the
[Music]
uh with the react stuff so once there's
one version of this in here in the in
the
in the html and then the other one
inside of the form
all the classes have to be class names
so
there's the form now from react right
and
if you're a gatsby or other static site
generator user
you're going to be yelling at me saying
you should probably just instead of
duplicating between html and javascript
right having the same form in both
why not just statically generate from
javascript i'll tell you what i agree
with you
so let's install gatsby and see how that
works
so yarn add gatsby
and we're going to just make a very
simple gatsby page so
add pages
and we'll say something like
my
gatsby dot js
gatsby gatsbyform.js
why not
so we'll render this and we'll export
this by default
we'll see what happens when we add a new
script
like gatsby
build
or build gatsby
you can name it whatever you like i'm
just
relying on convention
so now with gatsby installed and i have
the gatsby page set up it's going to
ignore all this html stuff it's which is
fine for me
um but i have the gatsby page set up
let's see what it built for me
so i ran gatsby build and by default
gatsby builds to the public folder not
the dist folder
and you can change that in a gatsby
config it's up to you but i wanted to
make sure to go through this exercise
because it's important to know that yes
you save the duplicate action
um from
just writing in javascript and then
letting that generate your html so that
nullify can scan the html and and set up
your form for you
but you do need to know some caveats so
um that's why i'm here
so
in the public folder this is all the
generated stuff that you're going to
deploy right
and inside of gatsby form it's generated
in index.html
and inside that index.html we see what
we expect to see which is a full html
thing with all the scripts and stuff and
that's great and the form so now if i
can read this but it's missing one
important thing which is
a very important attribute
and
if you see over here it says hello from
react
and then but it doesn't have the you
know the react code because that will be
hydrated later
and then it's got this form it's got all
the right fields except for one which is
going to cause you no amount of
annoyance until
you figure it out so i'm here to save
you that time which is it's got the
recapture field it's got the honeypot
feel it's got the action field
but it doesn't have the nullify field
so right over here
um and that's because
gatsby by default strips unrecognized
fields and that's why netlify actually
recognizes both the data dash version as
well as the non-data dash version
and for gatsby and for a lot of webpack
and like create react app and other
build tools
they wanna they wanna strip away stuff
that isn't gonna be used
as far as they know
in production so they strip away the
nullify tag
um so we need to make sure that that
does show up so i'm going to make sure
that i'm going to change this to data
nullify
and make it
true so and i'll save this as my gatsby
form in my react
page
and i'll rerun my build
and now when you see the generated html
just make sure to check that the form
does show up with the right tag
and uh
and then all will be happy
all right so we're going to switch from
gatsby
issues
gatsby and other static site generator
issues
just remember that they might strip out
some stuff and we're going to switch
back to the regular single page app
code because
that will pretty much behave exactly the
same in gatsby or in
a single page app thing like create
react app and now let's take a look at
this form and the subsequent action of
redirecting to a thank you page
um this may not be what we want in terms
of user experience like let's say we
submit this form and
it goes in notice that it redirects to a
different page
here locally it's redirecting to the
home page instead of the thank you page
because that's all we serve
but
that's still the point remains that
maybe you want to stay on the same page
so let's talk about that so if that's
what you want then you're going to have
to submit it through javascript instead
of a
default html form submission
so we're in our react app
and we're going to have to write some
submit handlers to handle that
submission
so
uh it will be something like cons handle
submit
it takes an event and we can call
event.prevent
default
and the form will have a target
and the form will be the target
of the event
and
so the the whole idea is you prevent the
default submission of the form via
regular html and then we handle
everything in javascript
um
and update the state accordingly so for
example
i can have a message that updates like
that
and i'll just make this nothing
and i'll display a message
something like
message
if not i'm going to show hello from
react
and then i'll just paste in some fetch
boilerplate so basically we have to
replicate all the
the functionality that we that we would
typically get and as well as grab all
the names of every input field and
just submit those values for this
example that i copied it's assuming
controlled values meaning that there is
some state
that you can just spread into the body
but here you can also do uncontrolled
react components
and i'll assume that you already know
how to do those so i'm just going to
fill in the rest of it by
going form that name dot value
um so email
the value
okay so then we'll have the we'll we'll
send the submission to the endpoint
and
then
on success we'll navigate
uh if assuming we we have a router
library we which we don't in this in
this setup but assuming you have a
router library we navigate
by getting by going to the attribute of
the form which is the action and so
that's a that's a kind of cheap way to
simulate that but here we're assuming
that we want to stay on this same page
after submission
so we don't actually need
this navigation and we don't need the
action the
action field as well so i'm going to
remove that just to make clear that you
don't need it so i go to down to the
forum this is only for the regular html
like after submission
uh navigation
so i'm going to delete that and now i'll
say
something like set message
success
and that should refresh accordingly
before we forget we should also
i should also mention that this encode
command
is a nice little wrapper around the form
data api inside of the browser
and you can also use this on the server
if you want just look for the relevant
npm package and that just encodes things
properly so that people know so that
notify knows it's a form
and then don't forget to wire up the
submit handler
so that's all you need for uh
wiring up the react app and so
locally we don't have the form endpoint
at the back so um we can't really test
it that much apart from just sending it
in
and then seeing that there's an error
because it's a 404 when you post that
message but we can actually build
build and deploy
so when we go to the production site and
try this out again
hello ajax
ajax at
potato.com
send it in we can actually control the
state of the forum and stay on the same
page
and do everything within react but in
the back end we can actually see the
form submission come in
it says hello ajax
so the next section is going to be about
password protection and role based
access control
and and this is this is a very very
broad base
cdn level protection
for your content for your site
and so let's look into what that looks
like so if you head into settings
and you look into access control
you can see that this is uh
available on paid plans
but what i'm going to do is i'm going to
transfer this over to a different team
so that we can actually see what this
paid plan
looks like
and now when i head to access control i
can see
this password
and i can set a password
so a simple password like password
oops
and that's a that's a nice password over
there and what that looks like is simply
a password control down in here
and so
uh especially for internal sites that
you're building for your co-workers you
can just
supply something like this
p-a-s-s-w-r-d
and have password-based access control
we actually do this a lot inside of
nullify
for
private sites
and for for more fine-tuned jwt based
access control
where you can have role-based access
control you can set the jwt secret
you can definitely check the docs for
more of that information
but basically this involves using a
third-party authentication provider like
uh off xero or octa and they can
authenticate your
jwc secrets
and
you can say only admins are allowed to
view this page and you can set it in the
redirects file
so you can limit it just to admins and
everyone else will get the 404
so that's how you do it with row based
access control
definitely hit up our support if you
need to enable this for your company
for everyone else
you can actually take advantage of the
nullify identity service which you're
going to move on to next
okay so the difference between access
control and identity is that access
control is
um restricting access from the cdn level
and identity is for a typical login
logout situation on the client side
so let's go and enable identity and
that's a pretty simple operation
we're going to go over to the identity
section and hit enable identity
and we're enabled
and that's pretty simple
and let's
now figure out how to
uh let's just play around with identity
a little bit so the best way to play
around with it is to head over to the
netflix identity widget docs and
actually go to the live demo
and let's just get a sense of what this
does before actually using it so here's
a static page
and we've got a single simple button
here we click it
and that gives us this widget that's a
modal
and we can fill in some information
or we can sign up
and log in
so let's just go through the sign up
flow six
one two three
six at plus one two three
so that's going to send a confirmation
message to my email
and i'm going to go to my email and so
in my email i get this standard thing
this can can be customized
but we're not going to go over that
and i'm just going to click customizer
or
confirm my email address
and
i'm logged in and that redirects me back
to the original page remember i have
this original page
so i can shut that instance down and
this is the one where i'm already
automatically logged in and when i click
outside you can see that in the in the
root of the page outside of the model i
can access that information now you can
also see that information on the console
i think we log it out
um and this is what's available to you
inside of javascript in particular
together with the jwt token with with
all your information and logins that
you're going to use but also uh with
things that you sign up with like
your full name
there's also
the
there's also that's a single button
where it's got sign up and login on the
same model but some in some designs you
may wish to have multiple buttons with a
sign up and log in on a different button
and
that's really just up to you how you
want to configure it it's it's pretty
configurable as well
so here it goes to sign up and here it
goes to login
and that's uh that's a pretty handy
model obviously this is entirely open
source so if you need to style it
you can actually customize the styles
yourself
but uh you know you can just fork it as
well
i'm also going to show you how we can
authenticate with one of the social auth
providers i'm going to authenticate with
google
and it's uh it's got my email
please don't spam me but then also it's
got some extra metadata from google for
example my uh avatar
so i could i could have uh rendered this
and see my see my
github avatar
okay
so that's the demo we're gonna learn how
to apply it onto our working
uh widget thing
and for that you should look at the docs
there is the script tag way and then
there's the npm way um
so we'll we'll check out the script tag
way first
i'm not super keen on showing everything
else because
if you're a javascripter you should be
able to figure it out but
maybe you might be getting stuck on
something so that's why i'm here right
um so i'm gonna do this on my index.html
page
all right and i'll drop the script tag
up here
and then add a div
down in here as well
let's just do up top
okay
so
let's try this locally
um so that is a simple button that says
log in with nullify
identity then it asks us for the
development instance so i'm on localhost
it doesn't know what uh
nullify instance
i have
so over here remember when i enabled
nullify identity i've uh it's on this
particular site so i should just take
this instance
and drop it in here
i think i need the https and then i'll
set it
so yeah that's uh
and now it's telling me it's in local
dev
and i can do the same signup and login
dance
as well
but i let's say i want to turn off that
confirmation email workflow
um
and that's that's what we're going to
cover
in terms of the setting so um
here i'm allowing sign up but i can oh i
can equally
say all right i don't want people to
sign up i want i don't want any tom
dickhary to sign up i just want invite
only signups
so um now when i refresh this project
and i try to log in it only gives me a
login option and there's no sign up
option so in order for
uh to sign people up i have to go into
the uh to the invite page
to the identity page
and invite users and then type in their
emails and then they can sign up
so that's a that's a much more sort of
locked down version of identity
obviously i don't use that too often for
demos but
when you want to
let's say invite only after
people have paid you that's uh that's
the way to do it
so i'm going to toggle that back to open
then the other the other thing i wanted
to talk about also is confirm versus not
confirmed so that's
all the way down here here's where you
can customize the templates for that are
that get sent out for email templates
but here in particular is where you want
to turn off the auto confirm so
allow users to sign up without verifying
their email address
so good
and now when i
again i refresh this locally
and i try and log in
i can now sign in
6 6
two three four five
at nullify.com
whatever let me add a plus to this
and then six
sign up
and it just logs me in directly there's
no confirmation step
so that's
good for sort of less secure
identity use cases where you just want
to
you know get people on board as quickly
as possible
and then the last thing that you want to
know about in the settings is the social
providers so external providers
there are four that come by default with
nutlify they're open issues for more you
can contribute that if you want to help
out in open source but these are things
that we set up for you and you can
obviously set up your own with via oauth
and functions
that's just going to add google
by default you can use the nullifies
version and that's totally fine or you
can use your own
app as credentials and that just
involves adding a bunch of secrets and
stuff
and
i'm gonna add in github as well
these are the two i usually use and
obviously feel free to add the other two
if you need them
but what that translates to is nullify
identity is going to read those settings
and and then offer those as login
solutions
so these don't directly redirect
back to your localhost so what happens
here is when i click this it goes to
github and then github tells responds
with
confirmation and then nutlify redirects
the user to the production site
and so that might be a little bit tricky
to test
but just as long as you're aware that
it's redirecting you to the production
site
you should be good to go from there
it also
takes this
access token
and if for example the widget was
installed on this production site the
the widget would also strip this access
token from the url
and log you in
so just so you know
you can take that access token and
swap it out
or take the production url and swap it
out for your local host so localhost one
two three four for example for here
and that will log you in
s6 and that and that's that's just the
netflix identity widget taking over for
local development
to do anything interesting with the
login information you probably want to
use javascript to do that so let's look
at how to add the nullified identity
widget to our react app so far
what i'm going to do is going to
import the react script
into index.html
and then i'm going to get rid of this
script just because now we're using the
npm imports
you can see the docs over here
on how we're going to do that so we're
not going to use the cdn based import
anymore and we can get rid of this
button
um so now if we reload we should see our
react app embedded inside of our page
and that's great
okay um and now let's uh
try and import nutlify
identity
from nullify identity
widget
uh we need to do some setup and the docs
should give you a clear idea of
um what is required you can
basically run
nullifyidentity.init
and that should basically be a good
enough setup and then we're going to
call the login function so basically i'm
going to add a new button
button
something and then that will be a login
button so let's write the click handler
handle click equals to
know of identity
dot
uh open
and that's the open modal
and then we'll register a callback
once a login event happens we'll take
the user
and we'll say some which is say some
sort of welcome like console.
console.log
welcome
[Music]
user
okay
um and now let's use that button
on click equals
uh login
all right so
that should give us a nice little login
thing but then also log out
a welcome page so let me log out again
and i'm going to log in
um and it says welcome over here twice
because there's two login events that
are firing
but doesn't matter
you can now see the full information
inside of javascript and you can render
it so for example
you can say something like
user and and
user dot
user
metadata
dot full
name
says user is not defined
oh right
um okay so in order to get access to
this user outside of the scope of the
hand the click handler you do need to
say user equals to nullify identity
dot current user
and that should give you a nice little
show up your name when you're logged in
and it will show nothing when i log out
i may need to trigger refresh
there you go
anyway so i trust that you're able to
build a full react app from there
with all the authentication pieces
definitely check out the examples inside
of nelf identity widget if you need
react review examples
and
essentially that's
what i wanted to show you i also wanted
to talk a little bit about metadata so
you see a little bit here that we're
using the metadata but i haven't really
explained it
and i guess now it's a really good time
to explain it so there's two different
two types of metadata the ones app
metadata and one is
um
user metadata and that just refers to
who can edit that information so user
metadata is
very powerful i think it's underused and
we should all use it more user metadata
lets you store essentially preferences
for the from the user and the user can
edit it and the app metadata the user
cannot edit it and it's
only available to the app developer
to to add things like
um roles and provider source of
information so like if i logged in
through github then this provider would
say github
so that's that's just to show the type
of user and some metadata about the user
from the app point of view and then from
the user point of view they can set
their own information down in there
so there's another way to to manually do
that which is
head over to the identity page and you
can also set your own user metadata
down here
and
i can just say like an admin role
for example
potato you can save that
and when i reload
i should be seeing
oh it's a little login again
i should be seeing that my app metadata
has new roles for admin and potato and
this you can gate your functionality
based on this
so the other the other thing
is you can actually
use javascript and throw in more fields
on here
and
so that would involve
that's not functionality that
nullify identity widget offers you and
that leads us to a discussion
of
go to js and friends
so what coach what nullified identity
widget is it's actually a high level
widget right that comes with its own
user interface
and it's actually an extraction over a
smaller underlying service called go
true um and here is the
go to uh where is the
here is the go through link
and this is the underlying platform on
which the user
identity service is being run
so nullified identity is kind of the
what the marketing term for the product
is but go through is the underlying open
source project
where you can run your own
authentication service
so this is written in go
not very accessible to javascript people
so then we have a library on top of that
called go to js
and go2js is a very very small library
that basically reflects
the capabilities of the gothu
functionality so
it just kind of
it just kind of reflects the
the apis of of all this and so here is
where you want to update for example the
user attributes and add
any metadata that you may want to you
may want to use
so go2js is very low level and you may
want to
write
something in between so if you this this
comes with no user interface
um and has a lot of docs done here
um
and so
choosing between something with the user
interface and certain noise interface at
a low level um there may be some in
between that you may wish for so
we also have
this something i maintain react neglify
identity
uh which is the
react bindings
for go2js and
that just provides
go2js as a react hook
as well as a context that you that you
put over your uh
your app so you just provide the context
uh provide the instance and you can use
it as a react hook
so that's a very nice way to use
um the
go2js and then if you want to bring
your identity widget
with react
you can you can then use react network
identity widget i know there's so many
libraries but these are meant to help
rather than hurt i'm just trying to show
you
how to choose between them
so this is
the exact same it's a port of null of
identity widget but because you don't
have to ship your own framework
it's a lot lighter so it's only it's
only six kilobytes
um and
it's got all the functionality of
reactant left identity
you can provide you can use your
identity as a hook
um and it has a nice user interface that
you don't have to code up and obviously
you can you can bring your own styling
if you want to um this is all
optional
for gatsby users there's also a plugin
for gatsby that just basically helps you
figure out the details behind wrapping
the identity context provider for gatsby
you don't really really need it but it's
just a nice to have
okay
so those are the ecosystem of libraries
all around authentication just trying to
make your life a little easier
but the two main libraries to be aware
of are gochujs and nullified identity
widget and then the react versions of
that if you care to use them they may
save you some time they'd certainly save
me some time
and spend some time talking about the
integration between nullified identity
and nullify functions
and it's very integrated so that's the
very very nice piece
what
we'll do here is we'll look at the
functions that we have and we'll create
a function
that
uh will be useful for our demo purposes
so i'm using nullify dev and i'm and
this is my alias for nullified functions
create
and we're going to go for the
authenticated protected function
template
and this is just a nice way to so that i
don't have to memorize how to do this i
can just fire it up and it'll just give
me a basic template that does that so
you can see here that
what is essentially doing is that
nullify places the user
if they're logged in on the context and
and then checks if the context if the
user exists if the user does exist then
then a response is off true if the user
does not exist then
the
response if a 401 and a console log
that's a little bit snarky
so the way to run this
is to have
in local development nullify dev uh
again
i have an alias and so that runs the
functions together with the front end
and so now let's test this by using
nullify functions invoke
so ntl functions
invoke
that will
let us choose the protected function
trigger
and here we can finally understand what
it means to have
emulated nullified identity
authentication headers so
uh by default we're actually passing yes
so i'm just going to hit yes
and it says data off true
which is
that's what that's what is reflected
over here
so you can develop your
functions as you go along and this will
this will live reload
and if you want to see what happens when
there's no identity actually to skip all
that uh function functionality you can
actually just pass in the name of the
function so
function
so no identity
and it says data not allowed and also
logs out no claims be gone so that's
great
for developing
and once you're once you're happy with
your
function you can actually integrate that
with your front end so here i still have
my front end uh continuing uh still my
front end going
let's
actually see how to wire it up with the
protective function so over in index.js
i have my
click handler over here
so let's
make a little ping
so
like a new click handler
and i'll click
click to equals to
and that will get the current user as
well
and
here in the user object we have this
very interesting thing called the token
and we can use this access token to
make requests
so let's make a little request over here
so
fetch
dots
so it's dot netlife
functions slash
what did i call a protected
function
and then we have to supply some headers
so headers
uh authentication
bearer
user
dot
token.xs
token
dot then
console log
so actually i misspelled that i need to
make i need to make this authorization
and i need to dot jsonit
x.json
and then i can console.log it alright
let's wire up the
button click
for this to happen
and now instead of regular dev server i
have to run the nullified dev dev server
so notice that the serverless functions
are being served on port
34567 and then the parcel server is
being served on port 1 2 3 4 and both of
them are being joined on localhost 8888
so that's the one i actually want
and if i if i go to one two three four
that it's not going to
have a working function for me because
there's no proxy to redirect the
functions so
i'm on localhost 888 right now
and i have that new button
let's call it something better like
um off
function
all right
so now when i click it let's see the
response that i get back
all right so i click the all function
it sends off to my back end which is
running it which decodes the json web
token that i
uh attach from my bearer token
and
and then i can you i can do i can do
stuff with that data
inside of the server's function
and then respond back with whatever i
want
here i'm responding with off true but
you can respond with anything that you
want
let me log out
and let's see the equivalent
response for
that all right i'm clearing all this as
well
so now i'm not i'm not logged in
and i'm going to try and
do off function ah
says cannot read property token of none
or no
that's very true so let me just say
something like
user
and and
headers so if i'm not logged in
let's see what will happen
so it says unauthorized over here so we
can have a catch for example
and it would say
you should log in
in fact you can do something really cool
and
have a little gate on this
piece of information over here so
something like x dot data
equals
not
allowed
we can just prompt for a login if not we
can just console log out
the information
so now we're not logged in and if i try
to do this function which requires a
login it's going to ping my back in and
be denied and then come back and
immediately ask for a login so that's a
pretty cool integration of serverless
functionality and
authentication
now that's not the only integration uh
there's some other integrations as well
if you check over for event triggered
functions
there's three that we're going to be
talking about that are triggered well
based on events
and
we can look for them in the functions
docs and if you scroll down to event
triggered functions you can see a whole
list of them
but i just wanted to highlight the
identity based ones because those are
extremely useful
for doing anything when people sign up
or log into your site
so we're going to try and scaffold out
an identity function just to see how
that works together
with your
function and nullify dev and identity
workflow
so i'm using nullified functions create
and we'll pick the identity signup
template and create a template like this
and it pretty much ships with a lot of
decent
boilerplate already
and one thing you'll notice is that
there it's called identity sign up and
that's a hard-coded name
these are all special names which are
recognized by nullify functions and they
get triggered
when certain events happen so
on this one identity sign up well it
happens when sign up happens and
you can you can decode or destructure
from the body
and look at the user object and then
assign different
parameters like metadata on the object
so as you're developing your event
triggered functions
i highly recommend testing it locally
first before pushing it to production
because
you might run into
bugs that you didn't catch and it's
better to catch bugs faster so that you
have
a faster development cycle
so the best way to do that is in nullify
dev
so i'm going to start up netlify dev on
one side and this will start up the
functions server and on the other side
we're also going to start up
a
function invocation so here
we're going to parse
sample data so we just need to parse in
one thing that makes this different from
normal nullify functions testing
is that it has extra information on the
user right like this user.email.
whatever
so
notify dev understands that
and has a special hard-coded uh behavior
for
these uh functions so here we're going
to say we're going to try and invoke the
netlife identity signup and instead of
the usual prompt
we're going to get
just a sample payload passed into
the function it's going to run through
that code and it's going to return
with for example here we we've passed in
a user with trustycompany.com so it's
going to pass in this is the return of
metadata of rows of editor
and
with some extra functionality as well
assigned dynamically inside of the
servers function
and you can also
test this in production
by dropping out of nullify dev
and pushing it to production so and uh
so here it would be a notified deploy
prod
um my shortcut for that is end deploy
so i will just do that so now when you
click on the site and you look at the
deploy logs you should see that
it's uploading three functions and the
third function that is being deployed is
the identity signup function
that's great so let's have a look at
what that looks like so we'll head over
to the production site that we just
deployed
and
we'll try to
have some sort of person sign in so
let's
so let's try and sign up as someone from
trust this company
actually let's just sign up as a total
stranger and let's see what happens with
that
um
stranger
danger.com stranger we already turned
off the confirmation email so i can just
put in a non-existent email it's totally
fine and i'm logged in as a stranger
uh that's totally fine now
and let's have a look at what the
metadata comes back as
so let's see the metadata over here so
we logged it out
and here we have strange danger.com
and we have been assigned the roles of
visitor and that's
in alignment with what happened with our
identity signup function which validated
the user email and said oh this doesn't
come from my company it comes from
stranger danger.com so i'm going to give
this a role of visitor so that's
something that only the app can do
and the user cannot do but the user can
supply extra metadata around
that to store some preferences or
something and that's these are all
things that they can adjust and you can
access on the user metadata object
um so
that's good let's sign out and let's
sign in as
someone from the company so employee
e8675309
and so employee at trust this
company.com so i'm just following here
so this will pass the validation and we
expect it to get an editor access
so employee whatever
so i signed up i can close this
and now when you look at the
sign in information
i have i'm employee justice company.com
and that's accordingly i've been given
better permissions as a editor rather
than a visitor
and
again i can do some dynamic
data as well and check my information as
a user
so those are event trigger functions you
can use
identity sign up to assign roles just
like we showed
you can use that to
to set up a new field in a database you
can use identity validate to
reject people from even signing up
because of some other blacklist or some
other rules that you may have
and there's identity login
for
doing things when people log in one
important caveat that i want to share
with people is that identity signup only
fires for email and password sign ups
right now and doesn't i fire for
external providers so you'd have to make
a separate trigger for that
using nullify functions
but it's relatively straightforward to
set up we have an open issue for this on
gotru
and you're welcome to contribute if you
can
but that says that's what stands right
now as to
the limitations of the event trigger
functions on lfi
okay so we already talked a little bit
about metadata management
and
and uh how that works together with
functions
so before we finish this section once
you may wish to also retrieve the form
data
after
sending it in
so there's a couple ways
to do that
one of the clearest examples is this
demo done by phil hawksworth called jam
stack comments so the this is a demo for
jab stack
comments with nullified forms and
functions
and you can leave comments here it would
get posted to a review queue
and these are all then pulled from the
forms submission data
back into the site and generated from
there
so if you're keen on that definitely
have a look at the source code
it's going to be somewhere inside this
gulp file
and you can just see that you put
together some of these
environment variables which are also
documented inside of this project
hit the right api endpoint
and then you can do whatever you want
with it
so that's the that's the rough idea
behind retrieving the form submission
programmatically obviously you can
download it via csv or other manual
processes if you want
and for further documentation you should
definitely have a look at the open api
of nutlify and that's down here and then
you can scroll down to the form section
where you can find every single endpoint
and what they offer so these are these
are very very good sources of finding
out
and building out your feature that you
desire and we'll have a piece at the end
of this series about the nullify api and
how you can build your own
notifications with this whole thing
okay
so on to the last piece of this video
which is the
paid features just to briefly mention
that they exist
and what you can do with them so the
first is branded oauth so branded oauth
is relevant to this part of the identity
settings
where you can see
site visitors can see your own app and
doesn't it doesn't have to mention
netlify remember when we signed up with
github and google to as external
providers
we use the netlife identity
app but we can actually use our own app
and do our own automation and settings
with that there's also sso features this
is alongside the role based access
control on the business plan and you can
also upgrade it individually on the
identity plan for
just nullified identity by itself the
same goes for audit logs for
checking
for understanding who's signing who's
signing in and out of your site so for
example when i go over to the site that
we've been working with i have all these
people logging in and out i can just
head to the identity audit log and see
all the sign in and out actions over
here to see if there's something fishy
going on
and lastly we're going to customize the
custom sender as well so a custom
outgoing email address so it doesn't
come from nullify.com when people want
the email confirmation
so
that's probably not everything but those
are the main features i figured i should
highlight that
if you need to for a production
application you can definitely pay for
it but
everything else that we presented is
completely free so that's pretty nice
and that's nullify identity
the best way for me to explain nullify
cms is to show it to you in action
nullify cms is an open source project
that is worked on by employees on
netlify but is completely separate as
far as technology is concerned
from netlify except for one connection
point which is the git gateway you can
use nail of sms without nutlify and
there's some documentation on that we're
just going to show why you might pick it
over some of the other headless cms
options
and the key is to understand that it's a
git based cms so there's no extra server
to pay for or maintain it's all within
your get together with your source code
there's an explanatory video here with
more details
but we're going to be going over much of
that in our course today
and so let's actually see this in action
nullify uses nullified cms of course
especially for
the blog for example so here these are
blog posts that are drafted and
published and previewed and edited all
in nullify cms
and that's uh that's a very wonderful
thing so let's take a look at how this
works internally in the
url there's a special endpoint that
we've set up called slash admin endpoint
and that gets us to the netlify cms
admin panel
and nullify cms with the gateway uses
netflix identity to log in will explain
all this
integration but fortunately you already
know what nullified identity is and this
is a very familiar widget to you by now
i'm going to sign in with my employee
email and my password
and that's and now we can see the admin
back end of nullify so we have a few
collections
named here
and uh some of some blog posts
and also you're able to see them sort of
spread out or or in layers we haven't
really set it up we just put titles on
just because that's all we need
um you can also see
workflow and media and we'll talk about
those two in turn
but let's go ahead and start a new blog
and i'm just going to cancel and so you
can see here two things there are
there's a left-hand side with a bunch of
form fields and on the right-hand side
of preview and so this is very cool it's
it's actually a full react app that
looks
exactly like a blog so let's have a
sample post test post please
ignore
lorem ipsum
i have my author picture pre-registered
so it my author picture signs up shows
up as well
and note if i change the date it shows
up
on both sides
you can select a pre-generated topic
you can add
uh
terms
i can type in some text
but then i can also
write in markdown which is very nice
for code
i can even configure custom fields like
for example this tweet field
which will show
what the tweet
looks like
described
in some metadata
there's a special field in this editor
interface where you can actually
add images as well which is not usual
for for markdown editors but you can do
that right here
and you can choose a new paid new image
to upload for example
i can upload a recent image of mine
and i can select it to be included and
that will show up in my preview
which is very nice
me
and i can collapse this and keep editing
my content down below
so all this is very nice and
uh this is especially if you're working
with
a non-technical audience but then also
just for yourself if you write a lot and
you just want a nicer editing experience
you can notice the scroll sync as i go
up and down which is very very cool
and so yeah once i'm happy i can save
and when netflipify cms that does a
couple things that actually kicks off a
pr
that sends to the
github repo of nullify.com and then it
immediately
has the status over here to check for a
preview
so right now this is in a draft mode
because i just saved i haven't published
and i can set the draft status to in
review or ready as well and that will
talk about the editor workflow but first
let's talk about this check for preview
tag so what this does in the back end
let's have a look at the source code for
the dub dub dub so you can see that
nullified bot has already created a
netify cms page
it's it's adding that file that i did in
markdown
the image that i had already was
uploaded
and you can see the deploy preview down
here
working on the build so this is why
there's a check for preview button
because
you can click this if you want and
continually check for preview
uh there's no preview yet so this is
still showing check for preview
but
this is for
basically there's basically eliminating
any differences between the wysiwyg
preview and the final article
and we'll talk a little bit about how we
can set up the correspondence between
the
in panel sort of live preview as well as
the deploy preview which is almost
basically the real thing like you know
that
based on continuous deployment once you
merge this pr in it will look exactly
like it does in the preview
once that deploy is live
you can actually see that status update
in the pr
and obviously collaborate with your
co-workers inside a pr
but also inside the cms you can actually
hit check for preview again and it will
turn into a view preview button
and when you view the preview this will
be a deploy preview with your posts
exactly as it will be
inside of
your
actual content
and you can see the entire site index
together with that
which is very nice so let's talk a
little bit about editor workflow
i'm going to head back
and check out the workflow section
so the post that i've made
is now in the draft section
together with some of the content that i
have i can delete i can publish i can
drag it through if
for example
i have a reviewer that i'm working with
or i'm just sort of working this in
progress whereas this is just more of an
icebox and once it's ready to publish i
can just take this over to the ready
section
and
either automatically publish it or
manually hit the publish button whenever
i'm ready to launch my new blog post
over in the media section we can check
on the the images that i have uploaded
nothing much else here but now let's
talk a little bit about how it's
configured how come we can up upload
both
images as well as markdown
and that's actually all in the
configuration that's contained within
the repo itself so here i'm in the back
end of the blog page
and
nullify cms has a special config file
called config.yaml
and here you basically spec out all the
details that notify cms needs to know
about your site
so we'll talk about collections later
but this is that's basically the schema
of all the content that you enter in
um but basically you i you specify your
backend your site url your publish mode
which we opted into editorial workflow
for a more fine-grained process as well
as a specifying a media folder which is
where we we want the github bot to store
our uploaded images and the public
folder which is where we're going to
serve our images from
so a lot of times
this is a nested folder so we just want
to tell another cms where to actually
expect it
so
that's the difference between the media
and the public folder
let's talk a little bit about what this
this word backend means it's a that's a
verboten word in nullify but really
we're just using one of many
configurations for
uh integration with git providers
so obviously the the one that we lead
with is git gateway
which integrates with nullify identity
we'll talk about this uh and and this is
and this has to be measured in contrast
with the others which is integrations of
github gitlab and bitbucket
so let's have a look at these back
let's have a look at these backends the
what's common among github gitlab and
bitbucket is that
all your cms users need to be directly
need to have commit access through the
authentication services of each of these
services so gitlab
you need to log in with your gitlab
account bitbucket same thing and github
the same thing
and then they can commit
obviously you may not want to give
everyone commit rights to your code you
may just want them to be able to
send in
content and let the bot take care of it
and that's what git gateway does for you
together with nullify identity and
that's the type integration there
fortunately you know everything about
nullified identity already so what i'm
going to show you is just the
documentation for git gateway
which is over here and it explains how
you can set it up if you don't want to
use netlify because this is an open
source project
and you can see all the source code
over here in the git gateway repo
so to be clear you don't need nullify
identity to work to use nullify cms it's
just
a nice to have because you want your
your publishers and your authors and
your editors to be able to review
content without being able to commit to
code and in all these other options you
have to give them commit rights because
that's how it would work
okay so that's it for our intro to
nullify cms
but we're gonna get our hands dirty a
little bit and actually set
a new thing up
from a template so that's the best way
to to start with it and i don't know if
i've been clear enough at the beginning
but
melody cms does not depend on react it
uses react for the editor
but it's amazingly tech agnostic like it
it works with hugo it was jekyll
middlemen gatsby
and that's pretty pretty freaking
amazing given that it's also showing you
a live preview
but
it is true that the largest number of
users come from the gatsby and react
ecosystem so we're going to have a look
at how to set that up
so one thing we're going to start from
is a template and that's the template
that's maintained by the the no 5cms
team i do want to pay some special
attention to the url of this template of
this deploy to nullify button
so if you watch my earlier videos you
should be aware of what the deploy to
nullify button does
but basically helps you set up a fork
here we are actually doing something
new which is
appending this at stack equal cms
flag and that just basically helps to
set up a
git gateway plus nullify identity setup
just from a single deploy to nullify
button click
which is the standard one that you see
with
any
nullify open source site
okay so
let's deploy from a template so i'm
going to click here
and it's going to set up that
one-click deploy that we all know and
love
so i signed in and now it's creating a
repo name
i'm just going to leave it unchanged
actually i already have
the same name here so i'm just going to
add a two to it but notice that uh it's
actually showing that it's going to set
up get gateway and identity as well just
because we added that little
tag at the end of at stack equals cms if
you didn't have this
you could set it up yourself just by
clicking a few buttons but this just
makes it a one-click deploy
type of situation so that's always very
handy to have especially when getting
started with something
okay so we have a new site and just for
good measure we can see that identity is
already
set up for me as well as in the settings
i can see that git gateway is already
set up as well
and that will be in settings identity
all the way down here
with the gateway services and you can
set this up yourself if you if you chose
so choose
let's actually take a quick look at what
this
one clean deploy gets us so let's
head over here so we get a nice landing
page and we've so with some content down
here
that hopefully we can customize
so some stories from a blog
and you can read more
on the slash blog and obviously here we
see that lazy loading fanciness from
gatsby
but otherwise it's a pretty
straightforward blog
that you can see
there's also a products page
that you can edit
and a contact page with nullify forms
and other form examples down below
let's take a look at what that looks
like from the source code perspective
so when i clicked that deploy to nullify
button
i also cloned that source code
and
again
in
the nullify cms world you should always
start with the config.yml file so let's
have a look at the static folder
admin route config.yamo it's pretty much
always in something a route like that
where
the final route will be
fubar.net
admin right and then it will just look
for a config.ymo
up in there
we got the backend
config file
and again just to just to note that all
this is actually in the docs we're not
really covering anything
you know new here i'm just explaining it
as i go along in words that i could
understand
so here we're setting the back end with
the gateway there's other back-end
options that we already talked about
and
then we have a media and public folder
again already explained that this is
where you want to store it inside of git
and this is where it's going to live in
the public url
and now we come to these concepts of
collections
and so we want to talk about collections
uh folder collections versus file
collections folder is actually the
easier one and folder you can think
about as just templates for your blog
right
so
when i edit
my my blog i want to be able to specify
a date
have that be broken out to your month
day and slug and the slug will be
created for me
the template key
can be given to me as well and i can
have
some other
fields like description featured posts
and you can notice that i'm using all
these widgets which are text boolean
image markdown this date time and these
are all default widgets that come with
nullify cms so
let's have a look at the widgets
and these are all the common widgets you
can see
the options available to you and some
notes on how they behave
and let's have a look at them in action
because i feel like we're still too
abstract in terms of what we're doing
over here
so
let's fire up the
page and let's go to admin
now i haven't set this up for invites so
here it's only login
so i need to let it be able to sign up
obviously you want to be very careful
with this because once people sign up
they can also contribute content
and you don't want just anyone to sign
up so let's change our registration
preferences to open
and i'll just go ahead and add like a
github
external provider as well
and as you know uh the nether identity
widget will pick that up
so now i can sign up
and or i can just also continue with
github
and i'm just gonna make a new blog post
and
just walk through that process again but
this time we're going to have the schema
open in front of us and compare them
from
side by side so
here we'll see that we have a title
the template key is hidden and this is
this determines the layout in gatsby's
perspective
um we'll look at the title and we'll try
and say lauren
if some
will have a publish date with the date
time widget there used to be a date
widget but now that's deprecated so you
always use the date time widget
that doesn't seem to display in our
template over here and we can go fix
that if we want to
the description
i can just say
fubar baz whatever
featured posts yeah make a feature post
why not
i'll check an image i can reuse the
selected image
or i'll just make my own because why not
okay chuck that in there
upload ah
choose selected
and i'll type in some text
i'll just
grab some of this stuff
click it in there maybe i'll make this a
markdown thing
okay cool that looks like some content
and tech
javascript whatever
publish it notice that i don't have
editorial workflow
set up so i'm when i publish it
immediately creates that pr it's
currently rebuilding so give me a sec
let's head to the deploys
so you saw me cancel that deploy over
there
because i just am i'm just importing
i'm just uploading the image i actually
need to build the blog
one thing that we can look at while this
is building is also look at the pr
that's happening in our project
so over here
there's no pr because we haven't set up
editorial workflow but
the
code has actually committed it directly
for me
including
that date time that i talked about as
well as the description featured posts
all those fields that we specified in
our config okay so the new site is live
and we'll go over and refresh and we
should be able to see the new blog post
and there's no date in the preview and
that's as
planned
so the other type of collection so
that's the folder collection that we
talked about over here
and that's basically
uh sending out all these templates to go
into each of these blog post folders
that have been declared
and that's that's a pretty clear
uh intuitive
way to use a cms the other way to use
this nullified cms is is as a file
collection and here we call our file
collection pages
and we've got a bunch of different pages
we've got the landing page we've got the
about page for the products page and the
idea here is that these
there will not be
repeated copies of these these are just
individual files
and we're using the cms as a way to edit
the content of these files
dynamically and nullify cms will be
smart enough to handle that
so let's have a look at how that works
on the inside
again we're going to go into the content
manager
and so
the blog as we maintained over here
has the is the folder collection
and the file collection is all these
pages which which we named over here
we head to the pages and we can edit any
one of these things so i'll just edit
the landing page
the landing page has these widgets set
up on the left and this preview on the
right which as you already saw is pretty
much the exact same
as what is in production
so we can just say notify cms is really
great
uh cms saying without a cms server
and we can blah blah blah look at all of
this awesomeness of widgets and editing
and
and wizzy weakness
this is really really hard to do i
honestly don't know how they do this
but i'm glad that they do
so let's save this
again it's directly hitting to publish
we can obviously set up the
editorial workflow by configuring that
inside of
the field over here just add a editorial
workflow field
and now when i look at the commits again
i should be able to see the latest
commit that we're updating the pages of
the title and subheading and that does
again hooks right back into nullify and
kicks off a new build
okay so that's about it the last piece
that we didn't cover is the filter field
that's
going to be very handy for
basically filtering out
by language so for example i want to
edit in english or spanish
and have different layouts and widgets
for those things those are very very
helpful as well
and probably the most common question
for most blogging situations is
needing to schedule posts because
there's no running server you need a way
to make blog posts go live at a point in
time so the natural solution is to set
your blog post date at some point in in
the future and then when
and then you and then you set up your
builds to run every day every minute
every hour or whatever it is
and once that time has passed for the
blog post to be published
then that build will pick it up
so essentially all you need to do is set
up a cron job
and zapier is a really good way to do it
so the zapier integration with nullify
lets you just use this app and you can
start a deploy of nullify sites on a
daily schedule which is pretty cool
there are other
methods to do it this article from
flaviocopes essentially tells you about
the zapier integration
with a little bit more documentation and
screenshots which i highly recommend
and those and for those who want to try
out something more serverless
without the zap without paying for
zapier you can try to set up your own
with serverless framework
and literally setting a scheduling a
publish is as simple as leaving a
comment inside of github
so that's a those are very interesting
ways to schedule posts but essentially
if you were
paying attention during the netflix
build section where we talked about
build hooks then you can essentially
fire off from any old device you can
have a raspberry pi that
sends a ping to your
build server
all of that good stuff
the last section of what we're going to
cover today is has to do with media so
so far we've been uploading media
directly to our git folder
that obviously has scalability issues
for large images and large numbers of
images
and so uh you may want to explore one of
the media partners that we have so
um
the probably the best known as cloudnary
cloudnary essentially
lets you sign up for free and then
they'll manage your images for you uh
all you need to do is
uh add a media library key to your uh
config.yml and and and give them your
cloudnary cloud name as well as your api
key and that's about it nullify will
upload there instead of your github
similar principle for upload care upload
care is another service that just
focuses on asset storing and not just
images but just
everything in general
in a similar place similar thing you
just sign up for them and then give your
public key
and lastly we'll talk about netify large
media which actually
is a git lfs implementation so you don't
store your images inside of git you
actually store it uh somewhere else in a
network large media server and then
nullify will proxy and give you the
right sizes of your
images audio video for you without
building a repository so we'll actually
talk about that in the next section on
nullified add-ons for everything else
but apart from that you should be all
set to go to
do to set up your site with nullify cms
okay now we're on to the netlify add-ons
section
this is going to be a relatively quick
section because a lot of these are just
show and tell demos
and also it's a very growing field it's
probably the absolute newest out of all
of these uh different sections that
we've covered so far
and
let's just get right into it so the
first one is netify analytics this was
just launched in june of 2019 and it's
uh server-side analytics and you can
check out the product page over here and
get a gist of
what it's talking about but the main
idea is that because of service side
it's unblockable
because we're literally
you have to serve the files for people
to
access your site and if they access your
site and if we serve the file to them
then they're definitely a visitor
and that's important because a lot of us
use ad blockers like privacy badger and
u-block origin to block our ads so
here's a way to
get past that and get real numbers but
then also avoid tracking personal
information because nullified analytics
simply doesn't accept personal
information so you can't
track it so the best way to get started
is just to go to any site that you have
and just head to the analytics section
on the top
and you can read through this and and
click to enable analytics for nine
dollars a month you can fill that out
but i already have that filled in my
other site so i'm going to go to there
it is per site
as for right now obviously work with the
sales people if you need better pricing
than that
and you can also read the documentation
for uh for more information about what
each of these numbers mean
that's going to be extremely important
so here's my own personal site i can see
total page views for the past 30 days
unique visitors and total bandwidth
views unique visitors
is an important question and welcome to
that so these are daily numbers and
these are monthly numbers
daily numbers are i had to spike on
september 14 when a big blog post go on
unique unique visitors how do we tell
unique visitors if we don't track them
and this is straight up just unique ips
and there's some pros and cons to that
with regards to double counting for
example if you're on a mobile phone
versus
on your desktop and you're on different
networks you'll have different ips and
you be counted twice
but then also you'll be under counting
people who share ips so for example in a
co-working space or a library or a
airport or something so it is by ips as
long as you're comfortable with that and
you can see the spikes here and there
you should be relatively
comfortable with what the what the
traffic numbers say about what's going
on with your site
additionally
uh something else that you you can't see
here is is that when you actually turn
it on
nullify is able to backfill in time for
the past 30 days because and that's just
because notify already has the server
logs it just hasn't set up the scripting
for your site
to spit out the analytics for you so
that has extra running costs and that's
what you're paying for to backfill you
don't you don't have to enable it and
then track
the limitation of course is that right
now it only offers you 30 days
but that is definitely something that
the team is keen on working on for
offering you more than 30 days and
rolling windows of stuff
so you might notice that unique visitors
on a daily basis and the unique on a
monthly basis
kind of doesn't add up if you try to add
every single day up and that's
intentional because these are unique
about over a month whereas these are
unique within a day so that's all
explained in the documentation and you
can definitely look at the specific
definitions of what
each of these numbers mean and there you
go that's uh that's what they offer they
offer you they can tell you
uh what the top pages are a lot of them
will be sort of service workers type
stuff but then also
you can also look at things that are
missing so for example if i forgot a
mobile icon that's a very good sign that
i should probably put it there because
people are checking stuff out on mobile
uh they're checking out for my rss that
that's or they're trying to hack me i
can also see
what's going on over there um
there a lot of some pages will get a lot
of uh bot sniffing for the wp admin uh
login page
and that's just something that we
you know being jam stack just guards
against for you and that's very nice
you may also feel you may also want to
filter out some of these
commonly requested things which are not
uh which are not relevant to your site
and that those are
function that's functionality that is
being worked on by the team
as well as you may want to offer
client-side navigation
uh because this these are only server
side these this is where people land but
then subsequent navigations for people
using front-end frameworks
aren't being tracked and again that's
another common feature request that
hasn't been implemented yet
still this is a new feature and it's
it's done very very well so the team is
very keen on working on it okay so now
we're going to move on to the next
add-on which is
has a little bit more of a learning
curve than clicking a button which is a
large media
and to explain large media i should have
to explain what git lfs is
git lfs is a way to store large files
together with versioning in git
so everything that we love about git
except that with git
one of the problems is when you store
large files in it then everyone has to
download it and it persists forever in
history and that's not very good
especially if you don't use it or access
it very much like you just want to
access it for content
so
that's why you use git lfs and that's a
that's a spec that you can just
clone install and use without nutlify
what nullified does for you is provide a
place to store it so that's where if a
large media comes in
you can see the product page over here
and
learn a little bit about how to deal
with the problem
nullify also notified large media also
comes within the concepts of image
transformations and we'll talk a little
bit about what that means
but let's uh actually check out how to
how to implement it the best way to
learn where to implement it is on the
docs
the large media page has
some information about it here as well
as some prerequisites and
it really is dependent on your cli so
we've already introduced the cli in
various sections of previous videos but
this one is is important it's a plug-in
that you just install
with the cli so now every time you add a
large media file you just have to say
get lfs track and then the path to that
media file and you can use
wall cards as well for entire folders
and nullify will just upload that to
theirs to nullify servers
when you commit
so your workflow is exactly like push
and pull
with and all that and let's have a look
at what that looks like on our demo so
demo over here has a bunch of images
with high definition
and you can see the github repo over
here and we can see how this is all set
up with git lfs in the master branch
this is the one without get lfs so if
you go into
the static folders and look for the
images and look at each of these images
they're just going to be the large
images that
that we see over here and here's some
apples
and that's not very efficient obviously
that's not very scalable this is fine
for these small examples but it's going
to be out of control pretty soon
especially with images of a few
megabytes or even gigabytes and you can
think about videos and audio assets as
well over here
so
what happens with this folder in git lfs
is
when i switch over and i head to images
and i look at one of these
i don't see i see that the file size is
286 kilobytes but i see that it's been
replaced by just a pointer and now the
pointer is just pointing to the git lfs
server which in this case is nullify
large media you can see the
corresponding
files tracked
on the large media section of your site
so head over to the large media section
and then you can see the all the files
that are being tracked as well as filter
out for
one of them if you have a lot of files
and that's very very handy and then the
other capability of nullify large media
and this is a special case for images
is that you can resize them so
there's no point serving high resolution
images every time or manually resizing
them by yourself
you could just use an api for that and
so nullify provides that api and it's
called image transformation let's have a
look at what that looks like over here
so i'm going to apply the parameters to
this and it's reduced it to a width of
100 and a height of 100 but this is a
rectangular image so it's just going to
fit to that i can also use the smart
crop parameter and that's actually going
to be 100 by 100 and it uses the smart
crop parameter we can also
make this let's say 500 on the width
and that just gives you exactly what you
want so that's a very great way to just
send over the wire exactly the subset of
of the
image that you need
and you can change the parameters
whether you need to preserve the aspect
ratio or you need to just fit exact
dimensions if you need to
you can see more details about image
transformation over on the documentation
page
especially on how to
supply the query parameters to get the
examples that you need
but it's going to be pretty
straightforward once you understand what
it does
so that's nullified large media a
relatively straightforward
large file hosting and image
transformation product
all right that is that for image
transformation enlarged media
and now we're on to even more exciting
ground which is the add-on marketplace
and this is a relatively new
part of nullify as well
which is working with third-party add-on
providers
and it's not something we really shout
about because uh there's just not a lot
of them and it's quite a new initiative
but it's definitely a growing area of
focus for netlify and if you're
interested in
working on an add-on for your company
together with netlify definitely get in
touch
but we're just going to focus on two
existing add-ons that you can use today
the first is going to be fauna db
a lot of people when they move up in
terms of use cases from marketing pages
to
submitting forms to authentication and
cms and then they at some point they
become an app and need some sort of
persistence from a database and you can
use
firebase and other databases like
mongodb atlas
through nullify functions and nullify
dev and all that good stuff
but it's easier to
onboard with an add-on that manages a
lot of the back-end syncing of
environment variables and setting up of
instances and all that um so it's all
integrated in your netify dev workflow
so here we'll talk a little bit about
fortnite fauna db so the fauna db i
think the best place to find out about
it actually is not on netlify the best
place to find out about it is on
a podcast um one of my favorites is
software engineering daily and evan
weaver the ceo of fauna talked about why
he started fauna and basically he was
one of the
early early early database engineers at
twitter and they faced scalability
problems because they were using nosql
databases well they they had to migrate
to nosql because they face scalability
problems and
so that's what fauna is a globally
distributed asset compliant
database and it has a lot of really nice
features including their own query
language
which is very powerful for some use
cases like field level authorization and
graphql first support so
the best way to start thinking about how
to use fauna together with netlify
functions is to look at some of the
announcement posts
the fauna atom was definitely in the
prototyping phase for a few months and
so in july there was this example from
david wells
talking a little bit about how to set it
up from a create react app point review
and setting up a full
serverless
databasey
full stack
fontadb enabled nullify function and
that's the demo that you can view on the
nullify repo
because it's the one done
by nullify people and you can definitely
think about the structure that you might
want for a backend for your credeps and
more recently in september of 2019 we
actually announced the full general
availability of the add-on together with
an authentication claims process
so
and so so now it's fully supported
so now it's fully officially supported
by nullify and fauna
and the way that you add it you can
definitely create it through the netlify
cli and these are the commands add-ons
create fauna and then you can claim that
instance with add-ons off and the fonda
team themselves have also worked on
a demo for you that can show off what
you can do with it and the idea of this
demo is to show you how to integrate
netlify identity nullify and fauna all
in one full stack app and obviously it's
a to do app because that's the
hello world of everything and we can log
in for example with our netlify identity
process that we know and love
and once we're logged in you can see
that we are able to create lists to do
mvc
and i can access that list and add a
list
and do everything that you normally do
with
crud
and you can still go back out this list
would be guaranteed not to be accessible
to other users
because of how fauna does field level
authentication so definitely check out
how fauna works
you can also look at their docs for for
the fauna add-on specifically or just
getting started with fauna in general
and and it's a very powerful database
for with great developer experience for
serverless jab stack users
the next add-on we're going to look into
is the very good security or vgs add-on
and vgs is a company it's not just
something that you should have
ggs is a company that solves a very real
problem of a very different nature which
is collecting your users data in a pci
and hipaa compliant way
so
there's some more information on the
docs but i'm just going to go through a
rough intro of what you should know
in case you might need this and so the
idea is that
when you're using something like netlify
forms you might become
you might be collecting some information
so let's look at this demo on the vgs
github page
and it's also linked in the show notes
and over here we can see that we're
taking a form
we've got some name information all this
stuff and we don't want this to be
submitted to us via nullify functions or
nullify forms we just want to send it on
to do for example a processing check
like a background api check
and maybe take payment through
stripe
or something so what vgs does is an
intermediary that steps in and wipes
and replaces all of these
all these fields with
unique ids those functions can then
remotely check vgs for those date that
those values none of it hits nutlify or
nullifies logging so here we've
processed a striped transaction even
though we haven't saved the user's data
from credit card or other information
so that's the rough idea of why you
might need it definitely go check out
their
introductory video
just to
explain a little bit more about what vgs
does they are very good at what they do
and they have more docs for you
on the announcement blog post as well as
on the vgs doc site itself
so definitely go check that out
okay and just to wrap up the video we
are going to talk a little bit about the
premium add-ons and these are things
that you might want to look into if your
company relies on netlify especially for
enterprises and large teams
and you might need some of these premium
support and performance add-ons and so
the best way to find out information for
that is to go to the pricing page and
just to get an idea of like the security
features the performance features
uh the different cdns uh the free tier
has a cdn that everyone uses and then
the enterprise tier has bet dedicated
cvns with more points of presence and
better performance as well as uptime
slas
and you can also specifically add
support add-ons so there's dedicated
response times and chat and support
channels as well as high performance
application delivery network features
that you might need for your high
performance needs
so all of this is available on the
pricing page and you can contact sales
for more information about that i
personally don't know too much but it's
good enough to know that it exists if
your app or site needs it and that's it
we're gonna we've wrapped up our tour of
nullify add-ons to be clear everything
else that we've discussed so far are
also add-ons it's just that there's more
to do with each of them so i broke them
out into different videos but edge build
and dev are core parts of the
platform and then each of these are
add-ons
most of them with free tiers that you
can use and add functionality to your
app but none of them are strictly
required to use nullify and you can
definitely bring other features as well
a lot of them are good partners with
nullify and sponsors of gemstack events
one benefit of being jam stack is that
you're basically the first consumer of
your own set of apis
and once you have one consumer you can
pretty easily spread to more so
if you have a web app you can spread to
mobile app to desktop app to cli and so
on and so on and so on and nullifies no
exception nullify itself is jam stack
and netlify.com is hosted on nullify.com
so in this section we're going to be
taking a look at how to make your own
netlify client and the best way to learn
that is to look at the documentation and
also to look at other clients that have
already been implemented and then you
can implement a nullified client for
whatever purposes that you need if
something that we do is not working for
you
you can make your own so the first place
to see
this in action is app.netify.com this is
always sort of the first class consumer
of
nullifies apis
and one way to tell is to go to the page
and hit the network tab and just check
out all the api responses that have been
called
you can filter for xhr over here
and you can see that we're hitting for
example like a site's endpoint
with some parameters
and
then that gets back the responses that
are
then displayed here as well as
notifications
then when you enter a site
you get some notifications it deploys as
well so you get deploys this is the
options ping
let's look at the get result and yeah
you can see all the
deploy preview stuff that's happening
over here
and so on and so forth there's a lot
that's happening and they're all done
through an api and
therefore pretty transparent to
anyone who wants to use them for other
purposes you should note that
there are authentication head tokens
that you that you might want to afford
and this would be located in your
nullify identity jwts now that you know
that the api exists
probably the best way to learn more
about it is to check out the
documentation these are
this is available on the official docs
itself
and you can check out links for go and
javascript api clients
and it's got some information about rate
limiting pagination and in particular if
you want to write your own deploy
methods
you should read some of these
information to help you figure out how
to deploy large zip files and folders of
files
form submissions
that you programmatically retrieve form
information so you can retrieve that
within a function for example and then
reference it in your page itself so it's
not a write-only
form and there are other ways to trigger
web hooks and
and retrieve files themselves without
actually serving
the
actually serving that url
the official api itself follows the open
api spec and therefore has a
programmatically generated documentation
page as a standalone and you can
actually
access this information in a structured
manner together with some sample
response shapes so you can actually
code faster for whatever use cases that
you're thinking of
another good client to look at is the
cli for nutlify or netlifedev so this is
the cli that you've been using it's
completely open source which also means
that you can also check out how to do
certain things within the cli
and use them in your own
nutify client the netlife cli is built
on top of the oakcliff
framework from salesforce and heroku
therefore there's a bunch of commands
they're all located between
here and each of these are the commands
that you run
including certain flags for example
netify functions create
that would invoke some flags over here
but you can also look at for example the
source code for nullify deploy
and that's just a single file and you
can see how the cli uses the
this.nullify and distal authenticate
instances to do things like getting
sites
and deploying
and and deploying
the sites and displaying the status of
them so all this wiring up between the
cli and the netlify api happens off
screen and it may be a little hard to
find so i'm just going to do you the
favor of pointing you directly at the
inletnify cli utils so this is a
separate package because it's used in
multiple places
in the cli utils that basically links up
the
js client which is the javascript layer
over the go client for netlify
and it wraps it inside of a oakcliff
base command
and all of this is probably foreign to
you right now but it will be helpful if
you need to dive into the code but
basically we export a base command here
and we add on all the methods like the
authentication method that you saw us
use earlier
we attached the nullify instance by
initial by initializing and
then
attaching it onto that commands instance
so this
library is useful for reusing the same
login credentials on the machine for
multiple clients so if you're logged in
on the cli and it sells desktop and
so on and you're not asked to log in
multiple times but if you want to go
down to the lowest level of javascript
dependency
definitely check out the js
client
library and this is the lowest level
library that
lets you do everything imperatively but
doesn't take care of access token
usage for you
some nice community clients that you can
definitely check out as well
there's the menu bar app from stefan
judis this is the one i personally use
so if you click over here you can
actually see the reported incidents that
have been happening recently you can
check out the different sites that
you're managing and
be notified of the deploys you can
toggle to different deploys or trigger a
new deploy you can set different
settings for the for the app and all in
all a very nice utility to have to give
you notifications of when apps are
deploying and updating
so that's a brief tour of the nullify
api you're definitely welcome to use it
and
get in touch with us if you need some
help on something that doesn't make
sense
and we are interested in working with
people to build more stuff like all of
this is open source for a reason and
we're happy to work with people to
do more things with netlify for example
a lot of people install the netflix cli
as part of their continuous deployment
process like they have their own
continuous deployment
tool chain and pipeline and then they
use network cli to just deploy the final
build assets but they don't really need
it if they understood the lower level
tools or they could just build their own
tools to do other things that they wish
they could do so nullify api is the
ultimate low-level flexible
interface if the interfaces that we have
is preventing you from building and
doing the stuff that you want to do
we made it we're here this is the final
part of the netlify series where we just
link you to more stuff that you can
learn the first part i should probably
tell you about is how to figure out if
something with is wrong with netlify
itself that is the netify status there
is a notify status.com page that is
updated whenever there is a confirmed or
reported incident and you can check out
the incident history if you think you've
been affected in one of your sites as
well subscribe to updates there's also a
twitter account that you can follow to
get more updates or just
check if you're in twitter and you can
get a link to what's going on over there
if you're not checking the status of
nullify you might probably trying to
debug something that's in your build
unfortunately a lot of
build issues are user
issues so there's not a lot that we can
do but we can at least document some of
the common gotchas
so this is actually
in our docs that we document them so
this is actually in our docs and these
are common issues that people face so we
hope that some of this
might help in terms of something that
you're facing in particular my top tip
is to make sure that you can run your
build locally and it outputs what you
expect before
you deploy it and introduce continuous
deployment to your build process for
even more self-service help you can head
to the nullify community site
where there are people helping each
other on nutlife issues as well as
related static site generator issues
and for the faqs you can
check out the common issue tag that has
been created by the support team
and these are typical typical issues
that they've run into supporting
hundreds of thousands of developers over
the past five years
if you're on a paid tier
you can have
nullify support
and depending on the tier you can have
support via email or slack
or
carrier pigeon it really depends on your
pricing plan with nullify
and lastly
if you need to check something with
netlify you can also check them on
twitter
including hiring for including getting a
job with nullify support
now i don't know about you but i
actually learned a lot from watching
talks so these are some talks i picked
out to recommend to people for learning
what nullified does and is and jam stack
is about
uh matt billman gave this awesome talk
at smashing san francisco in 2016
basically giving the founding thesis of
nullify and it's it's all about what
jabsec does and why there is a
resurgence in static site generators
chris coyer talked recently about how
the front end developers are now full
stack developers because of everything
that they've been enabled to do with the
jam stack
sarah drazner talked about how
the jam stack is a new way of joining
together
api's javascript and markup just like
the iphone it's not inventing anything
new but it's putting putting them
together in a useful new way
and you can do it you can even do things
like e-commerce with the jam stack and
it's actually better because it's faster
phil hawksworth gives a really good talk
on the agency perspective because of his
many years of experience in agency life
and how it can lead to faster delivery
times
from a waterfall cycle to a more
continuous approach
the citrix team gave an incredible talk
recently
about migrating to jam stack and netlify
with their docs team and how
their business processes and cost
savings were very very significant here
for a large enterprise use case quincy
larson and free code camp aren't an
enterprise but they do have massive
scale on on the order of millions of
users um and the and quincy also talked
about how
he serves millions of users using the
jam stack because his number one
priority is cost and scale
and that's a that's a perfect fit for
something like a jam stack
and lastly
jamon ferguson of paypal moved paypal.me
to jamstack and
recently gave a talk about it and so
this is an enterprise level talk
does not use netlify but still talks
about the benefits and
some problems with moving to the jazz
stack that he solved
so these are all very good perspectives
of real life use cases
i also learned a lot from how venture
capitalists think about think about
things so
the four places that i recommend people
go to are the andreessen horowitz and
kleiner perkins investment thesis and
netlify as well as
kleiner perkins investment thesis
redpoint and crv are also interested in
investing in the jamstack ecosystem so
if you're interested in starting a jam
stack startup you can check out their
roadmaps and ecosystems and think about
what parts of the ecosystem are lacking
crv also has another jaztac ecosystem
chart and i strongly recommend checking
that out as well and thinking about
where you fit and what you want to use
and what you want to outsource so that's
the broad landscape of jamstack there
are a couple more
resources that i want to point you to to
learn more
first is jams.conf.com this is the
premier jamstack conference organized by
netify but definitely not exclusive to
netlify there's jamstack.org with even
more resources about definitions
marketing material best practices
examples resources and stuff there's
there's a jam stack slack that you can
join at jamstack.slack.com
there is a
older
broader community called the new dynamic
and this is also a very active slack
channel
heavy bit one of the investors in
jamstack also puts out a
jam stack radio podcast with a bunch of
interviews that are really great
just in just covering the jam stack
ecosystem as well as developer
experience
and finally
nullify recently published a book with
o'reilly
on the modern web development with the
jam stack and this is a free book you
just have to give your email and
it is a pretty good read on why the jam
stack what is the jam stack and what and
what you can do with it so that's the
summary of everything that i know about
nullify hopefully this whole video
series has been helpful and it's
definitely the first iteration so i'm
keen on getting more feedback about it
and thank you for your time