Netlify Tutorial - How to build and deploy websites using Netlify

hi everyone I'm six and I'm happy to be sharing this walkthrough with you I learned whether of myself through free coke app three years ago and back then I actually struggled a lot with getting my projects online at first through cloud nine and then Heroku and I only found that lafay a year later I realized the deploying and scaling is a lot easier with the jab stack approach especially with modern front-end frameworks like reactant view 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 the series into nine parts don't worry they're not all equally long but we're gonna start with the main ones first the ones that you really need to know so we'll talk about notify 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 or nullify just deploying straight to see the end next we'll look into net Liffe I build and how nullify 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 all understand the build process especially how to debug it as well as to manage the build environment with environment variables as well as injects 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 serve less 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 nullify 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 a service 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 nullify identity which helps you add authentication and authorization to your site and this can be very useful for apps and e-commerce and in particular you can use 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 nullify identity and service 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 Neto Phi has a very wonderful open source project called notify 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 header CMS's out there we're then gonna talk about nullify add-ons which are all the other functionality of nullified 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 nullifying analytics which are unblockable server-side analytics that would be very useful for your site as well as the add-on marketplace when Elif is starting to have add-on partners that include fauna DB which helps you add a database to your Jeff Zacks site lastly we're going to talk about the net with I API where you can make your own elephant client for example if the CLI and the UI of nullify aren't exactly fitting what you need notifies 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 gem 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 it there are few ways to deploy to nullify now nullify 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 nettle if I 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 a bit pollutants web UI and have it be deployed immediately on to a CDN and to this day that is done if I drop and so that is the fundamental concept of net low fee that everything that you deploy to nullify is static assets and nullify it takes care of deploying it on a CDN so all the points of presence around the world so that your users get them as quickly as humanly possible now bit balloon eventually became net LeFay and then we dropped the bit blew an angle so if you go to the URL bar and you type in bit balloon comm you simply get redirected to app down elephant comm slash drop here you can do a simple drag and drop of your built site not the source code the built sign and you can scroll around to look at the features we're gonna cover all of this in the rest of this video if you don't have a sample site not look for actually if it gives one to you so just let see the downloaded demo site button that downloads a zip file and you can literally just drag and drop a 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'd 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 gonna try to edit this site I'm gonna 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 gonna 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 gonna edit 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 an elephant 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 if you want you can just say publish deploy and now when i refresh this original URL 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 and we don't expect you to drag and drop every time so the next method I'm gonna cover is using the notify CLI this is a pretty big topic that actually deserves a separate video but here we're only going to use another five satellite to deploy so I'm gonna go back to the folder that I had which which I'm editing the file in and I can pull up the terminal in Thea's code I already have the nullify CLI installed but if you need to you can run NPM install global notify - CLI and that will install for you I'm running an l5 version of 2.12 you can run nullify status to check if you're logged in I am and you can run login no if I log in if you're not now I'm gonna edit my HTML again to indicate that I'm using the no I'm deploying from the know if I see a lot I'm just gonna say in Elif I see a lie rulz so we'll see that if we should see that if we deployed so down in here I'm gonna write metal I deploy for brevity because this is a lot to type you can actually use NTL and network and we'll see what we get so the first thing it tells me is that this folder is an entry site I don't I have an existing site that I want to link to but we'll avoid that for now and just create a new site and we'll do the linking later so we're creating configuring your site they'll ask you to pick your team's or it's likely that you'll you just have one or two teams so just pick their appropriate team and then you can pick something like another five demo site now it's asking you for the deploy path in most cases you can just go with whatever suggested but will talk to me 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 notify 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 a master if you're happy with this and you actually want to push it to master just run nullified deployed - - product and that's that does exactly the same thing as now if I deploy but it pushes it directly the Center for draft URL it pushes it directly so here we have a live Europe so if we click this and we should be able to see the CLI roles on the mains on the main URL instead of the the draft Europe again remember that each of these deployments is immutable so you can roll back to it at any time or give give this and say a link to a friend's or colleague for reviewing whatever content or code changes you 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 will recommend is to create an elephant tamil file so I'm gonna exit out of this process and I'm gonna create a new file so this is an example nullify combo that I have just saved on my copy of my clipboard manager well good we're gonna comment this out for now and we're just gonna focus on the published directory so the published directory is the directory that we want to zip up and send out to the CDN nullify down in here we usually use a dist folder but here I'm just deploying the root folder so we can just say dot run nullify deploy prod and I and no longer being and and I'm no longer being asked about where my publish deploy path is [Music] of course I can move all of the assets into a published folder so something like 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 director so then I would have to change my publish to a tree accordingly to the dist folder so I only publish anything inside of this and anything outside of this does not get and I can now identify we actually really encourage using version control and we call it get centric workflow so what I'm gonna do is I'm going to initiate get so get in it now you notice one new folder that was created then I haven't explained yet is the dot nullify folder it really is just a simple little JSON file that stores where you've linked what site you've linked the project to 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 notify site info and it gives me all that stuff and you can notice the site ID is an exact match State Jason so obviously this dot nullify folder it's pretty helpful for now if I see Ally to understand what site is 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 the Anila 5 folder and it really depends on the use case whether you do that so I've gone and gonna go I'm going to edit the content over here so we also reflect that we're deploying from get this time and we'll see what happens with that so now I can say you get at everything get commit become a better message than I have and now we had not only have to set up a remote nullify works with good lab bitbucket and github obviously I am most familiar with github so I'm gonna use that but feel free to use whatever give provider care about so notify what am i calling it of the site pastor and here so I can copy that URL and just say get remote at origin and now I have that linked up I can actually say get so that when i refresh over here I can see that I push 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 deployment notify and I'm gonna show you what that looks like right now so if we go to that was my home page these are all the sites that I have currently but you can also click a new site from get you can choose to set up continuous deployment from one of these providers obviously I choose and I can select that repo that I just so you'll notice over here that it reads the nullifier tamil file that we've made and it's also created some other options that you might want to look into as well when we'll talk about the build command when we to get to the build site so we're just gonna 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 get directly as pushed from our local dirt local development to github and from github pulled into now let's have a look at what continuous deployment workflow looks like so I'm gonna 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 gonna make some edits as well so I'm going to say your name was climate is the best because it is I'm going to get to 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 gonna kick off a build in here and that's just an underlying secret about how nullify works is to automate this in time so now so now that there's no build time so it just basically deployed immediately and and so now when I head back to the original site goofy Austin eight I can see it's the best over in github I can also refresh and see my change down in here and that's continuous deployment that 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 and get 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 stop again this is a good 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 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 gonna have to go in here and only then you'll see the new text push ticket so a lot of the secret around how this is done is basically setting up internal billhooks 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 oh and you can give it a branch to build here I only have master but you can imagine building other batches 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 at it so let's head over to the deploy section and I'm gonna bring up my terminal copied from the billhook section so I'm gonna see that I fired this off and now if I wait long enough or I refresh I can see that a new hook has been triggered by the demo 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 the scheduled job from zapier or any other cron service to build every minute every day of yahwah whatever suits your build process for example one of my co-workers fauxhawk Seraph actually built a clock set your watch by an elephant calm this is an 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 any nullified on Taobao configured correctly then you can also setup a one-click deploy to nullify button that's pretty easy to get going so i'm going to go to my github directory that i've setup in the course of this video i'm gonna copy that URL I'll head to the deploy button Doc's on nullify calm and then I'll just paste that in here and that will configure various things like the markdown snippet HTML and elm snippet if you use out but here I'm just gonna copy a markdown snippet what the help me do is paste it directly into my readme so you can say things like that point to nullified and down it here so I'm gonna commit this again you deploy to nullify and I'll push to master and now when i refresh I get this nice deploy to nullify button so it's nice to display on your Doc's 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 and it's going to set up a site and set up that continuous deployment and for to 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 notify button is is just a streamlined process it's useful for open source boilerplate authors so now we're done talking about ways to deploy things on nella fine notice that we haven't talked about build cuz 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 a best practice for modern websites by default you also get deploy previews so I'm gonna do a little demo of that with our demo site I'm going to create a new branch you say new your feature for example and I'm going to edit that in here awesome new feature and I'm gonna save that feature pushed ah and get push origin new feature and then I'm gonna 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 create a pull request and will let us 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 murdered 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 one and that is a preview that I can share with my clients or my coworker sometimes if you're using for example a static site generator you may want to check out if pages or redirects have change so you can click on their details and it brings you in to nullify 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 here if there are default to know about is that nullify is a CDN by default so all of your deploys are distributed to the nearest points of 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 South Paulo at Sydney and the enterprise tier it 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 so that your customers never see like a half updated site no matter when they hit when they hit and it also has instant roll backs which means that it invalidates the cache Moberly whenever you do a rollback for example by clicking an old deploy and clicking publish deploy so here I have rolled it rolled the version back and now it's instantly invalidated and I can just refresh and see that old deploy lastly you also get a set 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 this 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 modify that and do a bunch of 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 asset on acid optimization and click Save and the last step to do in this process is to head over here and we trigger deploy so that will introduce acid 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 puts I mean it looks the same on the HTML site point 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 gonna say something I can go over to deploy settings that's a general and change the site name so over here I can say that was my job demo site so now when I click over here it has a more ergonomic site name but it is still on the nullifier 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 that HTML and I'm gonna hollow out most of these features just call this about us and leave the rest okay so now I have a new about us age and I'm gonna change to master and commit this knew about a speech and push it semester I can say I can hate 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 how to do that over here but we'll just show you inside of code so I'm just gonna 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 gonna commit this and redirects and I'm going to push to mess 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 sort 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 any 404 and not 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 get a start 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 so now when i refresh it actually redirects the 404 on literally an URL except for about us which the 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 in HTML when you actually amend to request something in jason so just be careful about that and be aware that you're parsing just about as jason and those that 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 headed to the domain management section and here's what you can configure your custom domain nullify offers free custom domains that doesn't mean it buys the domain for you but if you already have a domains but 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 a oh that's that's my own site and I can click verify and if it's already owned by me I can say yes add domain see what happens so my site already currently uses this if it's a site that hasn't been set up you can you know you can also set it if you if you have a domain that you want to buy you can actually buy it through nullify and you can actually buy it through nullify and now if I wall buy it for you and you can paper nullify with that and to set it up for you here's what it looks like for my personal domain I have a nullifying sub domain as well as a custom domain setup that's set to be the primary domain and everything just redirects to that primary domain I also have nullify managed DNS and that's what notify uses and that's an extra service and lfi provides to do to add extra features but anyway so here's how the DNS panel looks if you have a custom domains you can also enable ipv6 as well as customize your DNS records and nameservers note that you can manage all your domains on this team level on Abdallah final column slash teams slash your team slash DNA 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 net LeFay when you're deploying there are four methods of deploying we started out with notifies historical method which is dropping dragging and dropping then we use the CLI to do a manual deploy then we also link to 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 to nullify button on our readme so that open-source project can clone our repo and deploy and one-click we also took a little look at the defaults that are provided out of the box for Delphi we get free HTTP 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 notified applies or atomic meaning they all deploy every single file to production at once and as well as providing instant roll backs 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 and finally we talked about notify and custom domains so most things are hosted on a custom notify sub domain 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 all's for 404s we also covered how the link up comes with custom domains as well as a little bit about nullify DNS and however if I can manage a DNS for you if you choose to have it you can also set a branch applause for managed DNS if you're using nullified en er so that's the scope of deploying an Elif I and in other videos will cover the other sections but if you have anything about any questions about deploying please let me know Cheers you in this video we're going to be covering part 2 of our series on the other file and specifically focusing on things that you should know about building and the continuous deployment aspect of so let's drill into that a little bit more we're gonna cover build tools and static site generators we'll cover what build settings are what the build bought is build stages the different things that are done during the build while 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 nullifier to change the deployment environment to exactly what you need first let's have a little discussion to bombed out the fine built tools nullify is strongly supportive of build tools in fact one of the founding theses of nullify 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 notify CEO Matt Dillman because it really explains the benefits of the job 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 now look fly 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 that'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 gonna do is I'm going to add the BART the parcel bundler so that would be yarn first I have to initiate initialize the package star Jason and then I have to add the parcel bundler and while that's going on I can also install react yeah dumb because I'm gonna use that as well so here we're not using a static site generator but we're using it using a build process and ascetic site generator is just a massive build process so now we've got the dependencies installed we're gonna rearrange this a little bit so I'm gonna take this this folder and rename it to source and we're gonna build from the source to the dist folder and remember that the the full the folder that we ultimately publish is the dist folder all right the next thing I'm gonna try and do is I'm going to go to this source folder I'm going to add a new folder called index dot J yes I'm gonna paste in some pre-prepared react code and I'm going to go to index.html and add a script that ID equals F and then I'm going to add a script tag at the bottom saying skirts source so now when I run yarn parcel so or index dot HTML I get a nice local server where I can see the results of my code this is 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 gonna cancel my breading process I'm gonna go over to package Jason 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 it so I'm gonna put in my command again source index dot okay Mel 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 table so now when I run your on build it's gonna execute this command and run parcel build and that builds to the dist folder and remember that this folder is exactly what we're gonna ship to nullify to verify that the dist folder has built successfully can use serve just serve as a CLI that you can install and that serves it files locally you can see that your your code is running in production the difference between this old version and this one said this is running Reax in development mode and over here we're running Reax in production mode so that's how you can tell that your builds on fronting 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 you your JavaScript code is even valid this is a perfectly fine way you don't have to use notify at all but what nullify 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 just be adding that to getting 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 dist directory anymore remember we added that to get 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 Yaron 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 mono repo setup so now if the bill command set we're gonna have to go back to deploys and rerun the deploy again you can see that our build is not successful and in particular you can see that we're now executing the user command your on 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 it nullified tamil this is a higher priority current so it actually overrides what we had before so I'm gonna 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 your own build so this can take any form 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 gonna commit it to get add build command and I'm gonna push it to master and that'll kick off the build again in metal if I notice that this time there is a special message printed over here saying there's different build command detected going to use the one specified in the Tamil 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 nullified amo so this is higher precedence because that's the single source of truth for all the notify settings that you ever want to build so I personally encourage people to use normal but you may find it easier to on board making 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 keys 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 nullifier which is the buildbot and that's something that we're gonna dive into a little bit in this next section so one way to find out about the bill bot is to read some of these documentation on the site it goes into a little bit about the origin of the bill bot 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 bill bot 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 my security and reproduction capabilities that is very helpful in creating the continuous deployment service like net low fly 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 doctor 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 xenial 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 build bot 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 day covering that but basically you should be aware of that you can actually pull down the production the exact same docker image then nullify run to your local environments 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 pot 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 nullify builds are not entirely stateless they actually we actually cache things for performance improvements everything is stored in a nullify cache directory and in fact you can you personally can use a build script to save things in cash lift them and decide whether to build things are not based on the cash you may write your own scripts or you can use open source tooling like this one from David Wells called cash me outside which is pretty clever I do like the name a lot but basically it helps to think about house you to think about checking where do you store things in cash how should you handle a cash update and then checking for gifts 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 I will install Nana buildbot those two second stages starts installing dependencies the dependencies here are not just your you know pack NPM dependencies but also your known versions it will check the dot and VM 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 yeah 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 notify 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 you specified in your net without Tommo or somewhere else we're gonna save the dependencies for the next build and we're gonna 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 bill 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 demystify identified by a lot so the last thing that we should cover before getting into the gotcha section is concurrent builds and cancelling 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 and deploy over here or I could be triggering a deploy from a billhook that we talked about in the previous video so over here I have a billhook that I can just be calling randomly and so there now I have two concurrent 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 concurrent deploy and now I have the next one in queued 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 one 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 doctor process and that's 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 necklace.i which is learning how to use a continuous deployment environment in fact we have a whole place in the docs 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 in the common gotcha is that I wanted to highlight is first of all the 15-minute rule basically if your bill takes longer than 15 minutes notify 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 it 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 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 dist folder you're actually building to the disk folder sometimes people just aren't aware of what folder did the pointing to and just thinking that through can help a lot and of course there's a community nullify topic where you can find out a lot more about FA cues 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 bill 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 nullify and then also think about hidden dependencies so for example over here I'm using node 10.13 and over and nullify I'm using 10.16 if there's any India 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 null versions in an nvm script and it's all well documented in the docs next a yarn reverses NPM issue so for example one of the very common issues is relying on yarn and your build for men but then not having yarn in your build environment yarn is only installed if you have a yarn lock file so if I delete this this will just run this was just assume it's an NPM setup and the yarn command will not be available so you need to add a young lock file for the yarn CLI to be installed and that's a pretty common issue for beginners basically just always commit your lockfile if you're using Hugo grant 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 not nullify comm 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 gonna save that and now I can access this if I'm a variable inside my build process so I'm gonna 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 prebuilt so over here I can just add pre build and by the way this is a building feature of NPM scripts nothing nullify specific here and let's commit this so now if we open up our nullified 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 variable so this is handy for open source projects that may want to ping private API for example to get some data to actually pass into the static site generator so you can build for example a Shopify site or air table data or anything else like that now the fire environment variables are not just for passing in sequence 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 net low Phi specific environment variables nullify communicating to you so you can check for example and process that vanilla fine if that's true then you're inside of a note 4 environment if I also tells you what immutable URL you're deploying to the main URL that you're probably gonna 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 nullifies environment so that changes the versions for example you can set the NPM version you can set the yarn version or your ruby version gold version Java version Python version 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 events things I personally 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 in front-end take note that exposing API tokens to your front-end is sometimes a bad thing so reacts view gatsby they all like to make you prefix your environment variables to make sure that you're aware not to leak everything over and then simple guide as to how to change environment variables to vary environment like we already explained there's also some other power user features that we talked briefly about yeah so that's an overall guide to notify build in aggregate is not too complex but we combine building with deploying to verify edge that can be extremely powerful and in the next video we'll cover local dev and wonder if I can do for you there see ya we're in part three of our entered natla phi and this is nullified dev 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 natla v comm slash product slash 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 nullify 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 bill pot 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 nella phi dev and this has a detective 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 docks there's a talk that you should definitely check out introducing nullified dev this talk happens to be the keynote at which notify Devas launched so definitely check that out and the other thing you should know about the docks is that it's not the full story feed and notified of 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 through the github no Phi - slash Li Li and you just look in the readme and look for the nella 5f docks and here you can get actually a detailed information about usage but we're gonna guide you through it so let's head 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 what I'm gonna do is I'm going to treat this as a static site so I'm gonna act as the build pot and what does the bill bot 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 gonna run yarn build and that actually runs parcel build and that generates to the dist folder you can see over here and so that's normally what we'd serve from metafiles point of view and so now we can actually run nullify dev so we have that CLI command notify dev there's that a 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 3 999 as well as a nullified dev server on localhost 8 8 8 8 so there are two different servers and let's see what the difference is so now I'm on localhost 8 8 8 8 and you can see that I have an active react app it looks good and that's what we've been working with but also I can go to localhost 3 999 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 on bond nullify is that there's a project server and then there's a net lafete dev server so the project server is if it comes with a server then we'll use that one if not now if I devil spin up a server for you and then serve from there so that's what we've been doing just now which we saw a static host and it will join everything and then I'll put 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 and localhost 1 2 3 4 so that's the important port for them for parcel it's going to be 1 2 3 4 4 other projects that create reactive OB others but we know that for notify devs we can go into no final tamil and add that config command so the port will be 1 2 3 4 you can tell now if I do that and you can see documentation for this in the notify devdas 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 death inside of nullified 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 gonna point it to source doesn't really matter so now I can run that lo fight dev and instead of running a static server for me it's gonna actually start to run the parcel server for me on localhost one two three four I'm making an emphasis in 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 parcels 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 8 8 8 8 so the question then becomes why I bother to servers it's confusing it's seems like this unnecessary we have local hosts on a da-a-ate as well as 1 2 3 4 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 888 and so when we're the user we actually view that URL localhost 88 and we get all this functionality that we would get in production for example redirects so over here in my underscore redirects well I have a redirect from about us to about and so when I head to localhost 888 8 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 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 in and that kicks off the react scripts start script but here we're actually going to just run nullified dev and nullified dev is going to pick it up that the fact that we're running a career rack tap 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 nullify dev will just detect your project and it will just run the server automatically without any configuration now we're going to good a quick demo of how environment variables work in lfi 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 gonna run a yarn build and because I don't have this new projects link something that if I I'm gonna run nullify in it and because I don't have it linked to github I'm just gonna choose the create deploy site and manually option and it's just gonna create a site instance for me that I can deploy to so now I'm just gonna create a nella file tamil file and that's gonna house all the settings which I normally would setup so first up add in a build key with a publish value of build and the other command I'm gonna run is just nullify deploy - - prod and so now because I'm just gonna publish that build folder that's all I need to know and now I'm deployed my crate react app app is deployed without continuous deployment but now I can run something like Nell if I open and head to the deploy section and head to the environment variable 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 reactor because create react app doesn't want you to expose every environment variable on the front end so they have this filter then you must prefix all your environment variables with react app underscore and then whatever your environment variable 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 ducts so now we can actually reference that environment variable inside of our code so here I'm just gonna ask access process and not react app my secret and that's gonna be available in production so typically what you do here is you try to have a duplicate and env file locally and then run that but here when I run that lafete dev I can just or I just run nd because I'm my shortcut I just I can just run the dev server but then also if you look at the bill dogs it also injects this build setting of environment variables so now the Phi dev goes up to to my nullifier 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 to do a lot of different things together for example integrations with add-on providers I'm gonna 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 notify - - live but that's very beta so I'm not gonna 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 you still have to work with it in some form so if example like an API secret then 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 nullifier functions create command you can type it out as part of the CLI so obviously we're just gonna use nullify functions called and 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 gonna go ahead and go to nullify Tommo and add a function 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 gonna run the five functions created again and notice it created that functions folder and now it gives me this drop-down 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 mattify 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 seeker because I'm not gonna expose it to the front end and I can take that my underscore secret and expose and grab it in process T and V inside of my net low-five function so here I have a co-located with my source code but I'm just gonna say process the MV my secret and I'm just gonna echo it out in a JSON body response so now I'm gonna run nullified dev and that again thinking about your mental model runs that create react app server but then also runs a nullified function server so it's under the URL dot nullify / function / hello - 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 via functions and that's very helpful so for example when I create a hook or a fetch data when I load my app and when I when I load my app I can just head back to the front end and that's gonna hang my function and let me just open up the dev tools over here so I'm gonna open my app and it's gonna ping my function and so it's not gonna expose that environment variable on the front end it's going to just ping that nullifies 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 caching and returning in 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 gonna introduce a more complicated function and this time one that uses known modules dependency for itself so again we're gonna run our five functions create I'm gonna pick the node fetch template and node fetch itself installs non modules with a package jason and then it uses that as a fetch inside of known to ping an api so this is a more realistic nullified function or service function which proxies an api for you so here I'm gonna run I'm gonna ping the note fetch in front of in my front end and then run notify dev and now when I reload my friend and 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 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 in node.js functions subject to the timeout limits so here for example I can add my process DMV top my secret and if that was required by the API I couldn't 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 I here I have a different API and I'm swapping enough 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 the service scenario I can even test it for example if I open up a new terminal and type notified 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 gonna 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 your front-end I can test my mind nullify function and so that's a very good example for more information definitely read the readme expect 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 eventually good 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 important thing to know is to understand what happens when I have my nullify functions continuously deployed so for example here am I getting norm on the folder uh file I have the node 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 would 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 non fetch module in the file and so a lot of people run into this and think it's a bug with nullified dev 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 to run the 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 the file lambda so this is a helper library it used to be the predecessor to notify dev and that's why you see some old information about this but now notify lambda is to help our library for Anila find eV and you will ad will use the Annette will find lambda install thing and we'll just add it as a post install NPM script so now that will run and you'll go through every single function folder and it will it will just install the dependencies for every functions for there and you can read more in the docs but essentially this is what the success will look like we can see somewhere in the dogs that will have a net Liffe ilambda install command being run and you'll 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 service 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 if it was working exactly the same if you notice all of these functions that we've be written written so far is in node.js format with the exports that handler syntax or module dot 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 no js' it runs under node 8 or 10 and you really need a build step and that's where you use nullify lambda so now if I don't know if I'd ever have similar but overlapping responsibilities and I wrote a lot of Doc's in the readme to explain how to use them but basically no fair lambda is a build tool now that runs your nullify functions from a source to a dist and that's the basic understanding that you have to achieve here now now this these functions will be your source file and you're gonna 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 slash functions and I can move this function this hello old function to a typescript function I I can also just like rename everything so I'm gonna I'm gonna add some typescript types so for example I can follow the docs and add babble preset types good yarn add dash D that will preset high script and I can also add a bunch of other utility is like typescript types node and types AWS lambda and that just helps to add typescript to my projects here I'm only gonna use it for the hello world function but you can see everything I'm about to do so I'm adding a babel RC file and so we're using typescript with babel and now in hello Walt yes I can import the types for importing and the handler context callback in the API gateway type from AWS lambda so now I can type and 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 had type event dot it gives me all those values from the autocomplete because the types that are just from definitely types of a degree as lambda the same thing for context including an identity field which we can use for nullified entity and and so that's that 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 we need to impose a build command I'm gonna put it on the post build part of NPM scripts it's gonna run now if I land up build source function so it's gonna build from the source functions into the production publish the the folder that we gonna publish like functions hello world and that's gonna be hello world Jas right and and that's gonna be a minified output from the source type script file and so that's what never fly lambda does it helps you install dependencies and it helps you build from a source file to a disk file and and so then everything can be can be run locally nullified EV has an understanding of what know if I lambda so it will run that if I land to build for you if it detects it in your package scripts 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 we're gonna go to the next part to identity forms analytic CMS all that good stuff but thank you for taking the time to check out nullify 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 nella Phi 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 in terms of the data structure that it that offers but it's very handy for contact forums like if you want to inquire about prices or 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 these are very good use cases for net low Phi forms so where to find out about that low Phi forms we're gonna go over to the docs and head to the form 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 gonna go over here so right now I have all this bunch of stuff actually I'm just gonna go over to the about so let's put the forums 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 job demo site drop notify jump demo site master it okay let's go over to the forms and see that here the documentation here's some basic info and there's nothing here because there's no forms activated so what I'm gonna 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 gonna call this contact dot 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 forum so that I can do the builds locally and just be very very sure what I'm building because sometimes your static site generator mine's shrivelled some values here we just really want to make sure that we have an elephant AG so if i refresh I should be able to see something different I should see the form name contacts because I specified the notify 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 gonna go over to the contact us page and here I'm gonna say hello free code camp obviously you want to put a 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 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 [Music] Lia's for another fighter ploy so I just changed the form but because it's the same name it's gonna still reflect us 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 ahead over here and refresh it form to form at every code Capcom let's pick a file let's send a little image than 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 will copy over this contact HTML and we'll say thank you dot HTML blah blah blah thank you thank you and take that out all right so 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 gonna add an action and I'm gonna 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 gonna refresh and I'm gonna say try three potato tomato whatever and I'm gonna choose the gem reptiles image I'm gonna send that in it's gonna submit and it's gonna redirect and say thank you right or you could redirect to the index page or whatever 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 gonna want to do is probably to do something else on submission 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 hug so that's that's an option as well I should probably put that in there as one of the options but then what I wanted to make clear is that you can also create functions that do whatever you want including form validation so everything here is client-side but what if you need to do server-side form validation do you need a server obviously the answer is no because we're net Liffe I 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 I actually have another fight dev alias for this or template for this so I'm gonna use nullify functions create and I'm going to look for these submissions created template so I'm gonna let nullify dev scaffold that out for me so what this does submission created is it runs when a submission is is being done and it parses that email and it sends stuff out we're gonna dramatically simplify this so that we can actually just try doing something with our event triggered function which is this is what it's called this is a special special name in the docs where it just fires when people submit forms so we're gonna parse the event body and payload we're gonna console.log it out and it's an Emmy json.stringify this thing and then we're just going to return a body 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 know if I deploy again notice I don't have to build the front end because all I'm doing is working with the functions so now this has 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 functions section and refresh and you can see that there's a summation creative 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 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 or 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 gonna 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 your kismet filtering and Akismet 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 verify and once they're verified they'll show up the next method we want to address is the honey pot so the honey pot is a security method we're basically checking 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 hurry pot fill that I'm just gonna copy and paste this field 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 that hidden opacity zero and then the last thing to do is to tell nullify that this is a honeypot field so anything the name bought field is a honeypot field so we'll just tell nullify that and okay now we'll yarn build again and nullify 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 devil because it just works but I'm gonna 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 doesn't really matter but here let's just say human at human I'm human and human at human calm and send that in and we should see human at human calm show up over here it's a fantastic and now let's actually say robot and not totally human calm and that'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 feel so you never fill in but as a robot you're filling in fields in discriminately so I'm totally human alright so there's a field here and we're gonna send that in and let's see the network tab I'm 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 nella file 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 into Spanish submissions just because we know for sure it's spam great so that's the second method and then the third method is recaptures so adding a recapture is pretty much the same as adding a honeypot except that it has a different method of catching spam and this one it 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 recapture field so let's just add it in over here Terk code but firm and will also tell the forum and there is a recapture field mm-hmm so this is the most secure forum there has ever been we're gonna 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 that's intentionally fail the reCAPTCHA it's just not letting me do [Laughter] so yeah I can't really fake being a robot No so it's that good that even though I'm a human trying to simulate being a robot I just have to be good enough a computer vision to let it through and now it's through and I can see myself my own submission and yeah so it is a little bit more annoying but that's recaptured 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 we captured v2 and v3 v v2 is the one with the annoying picking of stuff there is recatch overview on settings so you can set up your own recapture secrets over here you're using nullifies and recapture v3 is the new one without image selection it's invisible and supposed to be low friction and you'd have to set up set that up yourself with JavaScript 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 for my CLI or from github whatever and once it built and and pushes all the HTML out there's this post-processing step that happens and that's where the forms are detected what no-fly is basically doing and saying OK out of all of these generated files let's zoom out a little bit out of all these generated files in the dist folder which of these are HTML and it looks like this one is HTML ok and let's look at all of these fields and look for a foreign field with the nullify tag right and then I'm just gonna 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 a number of ways to do this so what happens in this scenario where there's no form in the HTML is that Nell if I would just tell you that it hasn't detected any forms and therefore you doesn't set up the form for you on the backend so you need to tell nella Phi 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 scan HTML and find the find the form name set up the fields and then react we'll 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 gonna 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 dot HTML with some JavaScript index JSO ver here I'm gonna 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 gonna say ID actually no that's let's put this put this here div ID equals app and we'll look to close the dev 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 div id app so it's head to the forum and you can see that little flash of the forum 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 with the react stuff so once there's one version of this in here and if in the end of in the HTML and then the other one inside of the forum all the classes have to be class names so there's the forum now from react right and and if you're a Gatsby or other static site generator user you're gonna be yelling at me saying you should probably just instead of duplicating between HTML and JavaScript right and 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 yaar an IDI ATS B and we're going to just make a very simple Gatsby page so pages and we'll say something like my Gatsby dot J s Gatsby formed jsy not so will render this and will 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 we've Gatsby installed and I have the Gatsby page set up it's gonna ignore all this HTML stuff it's which is fine for me if I have the Cassie page set up let's see what it built for me so I ran Gatsby build and by the fall Gatsby builds to the public folder not the dist folder and you can change that in the 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 from just writing in JavaScript and then letting that generate your HTML so that no if I can scan the HTML and and set up your form for you but you do need to know some caveats so that's why I'm here so in the public folder this is all the generated stuff that you're gonna deploy right and inside a gas reform it's generated an index dot 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 read the reacts code because that they'll be hydrated later and as it's got this form it's got all the right fields except for one which is gonna cause you know amount of annoyance until you figure it out so I'm here to save you that time which is got the recapture field it's got the honeypot feel it's got the action field but it doesn't have the Nuttall of five field so right over here and that's because gatsby by default strips unrecognized fields and that's why i know if i actually recognizes both the data - version as well as the non data - version and forgets be and for a lot of webpack and like create react app and other build tools they wanna they want to strip away stuff that is it going to be used as far as they know in production so they strip away at the nullifier tag so we need to make sure that that does show up so I'm gonna make sure that I'm going to change this to data and now if I 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 and then all will be happy alright so we're going to switch from Gatsby issues it gets me another static site generator issues just remember that they might strip out stumps and stuff and we're gonna 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 crate react app and now let's take a look at this form and the subsequent action of redirecting to a thank-you page 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 gonna have to submit it through JavaScript instead of a default HTML form submission so we're in our react app and we're gonna have to write some submit handlers to handle that submission so it will be something like cons handle submit it takes an event and we can call it event prevent default and the forum will have a target and the forum 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 and update the state accordingly so for example I can have a message that updates like that you and I'll just make this I'll display a message something like message 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 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 reacts 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 value so email the value okay so then we'll have the will send the submission to the end point and then on success we will navigate if assuming we have a router library which we don't in this in the setup but assuming you have a router library we'd navigate by getting by going to the attribute of the form which is the action and so that's a that's the 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 gonna 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 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 adjusting codes things properly so that people know so that know if I knows it's a form and then don't forget to wire up the submit handler so that's all you need for wiring up the react app and so locally we don't have the form endpoint at the back so 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 comm 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 backend we can actually see the form submission come in and says hello ajax so the next section is going to be about password protection and we'll base 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 and see that this is available in pay plant 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 especially for internal sites that you're building for your coworkers you can just supply something like this the a SS wrd and have password based access control we actually do this a lot inside of nullify for private sites and 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 off zero or octa and they can authenticate your jwc secrets and you can say only Emmons 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 robust 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 are going to move on to next okay so the difference between access control and identity is that access control is 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 let's just play around my identity a little bit so the best way to play around with it is to head over to the enough 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 login so let's just go through the signup flow six one two three six plus one two three so that's going to send a confirmation message to my email and I'm gonna go to my email and so in my email I get this standard thing this can can be customized but we're not gonna go over that and I'm just gonna click customize your or confirm my email address and I'm logged in and 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 modal I can access that information now you can also see that information on the console I think we log it out 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 gonna use but also 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 log in on the same modal 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 do 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 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 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 off providers I'm gonna authenticate with Google and it's it's got my email please don't spam me but then also it's got some extra metadata from Google for example my avatar so I could I could have 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 widget thing and for that you should look at the docs there is the script tag way and then there's the NPM way so we'll check out the script tag way first I'm not super keen on showing everything else because if you're a Java Script ER you should be able to figure it out but maybe you might be getting getting stuck on something so that's why I'm here right so I'm gonna do this on my index.html page and I'll drop the script tag up here and then add a div down in here as well let's just do a top okay so let's try this locally you so that is a simple button that says login with nullified entity then it asks us for the development instance so I'm on localhost it doesn't know what notify instance I have so over here remember when I enabled nullify identity I've it's on this particular site so I should just take this instance and drop it in here I think I need the HTTP 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 sign up and login dance as well but I let's say I want to turn off that confirmation email workflow and that's that's what we're gonna cover in terms of the setting so here I'm allowing signup but I can I can equally say alright I don't want people to sign up by one I don't want any Tom Dick Harry to sign up I just wanna invite only sign ups so 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 to sign people up I have to go into the 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 to offer for demos but when you want to let's say invite only after people have paid you that's that's the way to do it so I'm going to toggle that back to open and the other the other thing I wanted to talk about also is confirmed versus not confirmed so that's all the way down here here's where you can customize the templates for that are that gets 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 an email address so good and now when I again i refresh this locally and I try and login I can now sign in six six one two three four five and now if I calm whatever I'll do them you had a plus to this and it just logs me indirectly 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 therefore that come by default with nullify their open issues forum or you can contribute that if you want to help out an open source but these are things that we Sui set up for you and you can obviously set up your own with via OAuth and functions that's just gonna add Google by default you can use them nullifies version and that's totally fine or you can use your own APIs credentials and that just involves adding a bunch of secrets and stuff and I'm gonna add it and 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 nullified entity 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 in github tells response with confirmation and then nullify 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 yes the the widget will also strip this access token from the URL and log you it 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 localhost so localhost one two three four for example four here and that will log you in s-six Edna and that's that's just the nullified entity 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 nullify down any widget to our react app so far what I'm gonna do is going to import the react script into index.html and then I'm gonna 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 to see the end based import anymore and we can get rid of this button so now if we reload we should see our react app embedded inside of our page and that's great okay and now let's uh try and import nullify identity from nullify identity widget we set up and the docs should give you a clear idea of what it's required you can basically run notify identity in it and that should basically be a good enough setup and then we're going to call the login function so basically I'm gonna add a new button button something and then that would be a login button so let's write the click Handler and I'll click equals to know if identity dot 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 we'll just say some sort of welcome like console dot console log welcome user okay and now let's use that button on click equals 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 login it says welcome over here twice because there's two logon events that are firing but it 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 user dot user metadata dot full name says user is not defined oh right 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 a 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 know if identity widget if you need reactor view 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 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 will use it more user metadata lets you store essentially preferences for the from the user and the user can edit it and the add metadata the user cannot edit it and it's only available to the app developer to add things like roles and provider source of information so like if I logged in through github then this provider would say get home 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 end 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 be seeing 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 on here and so that would involve that's not functionality that know if I've done any widget offers you and that leads us to a discussion of go true j/s and friends so what Coach what know if I did any widget is it's actually a high level widget right that comes with its own user interface and it's actually an abstraction over a smaller underlying service called go true and here is the host here is the go true link and this is the underlying platform on which the user identity service is being run so now if identities code of the what the marketing term for the product is but go true 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 true Jas and go to Jas is a very very small library that basically reflects the capabilities of the go true functionality so it just kind of it just kind of reflects the the api's 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 me you may want to use so go to j/s is very low level and you may want to write in something in between so if you this this comes with no user interface and has a lot of Doc's done here and so choosing between something with a user interface and a noise interface at low level there may be some in between that you may wish for so we also have this something I maintain react native identity which is the reactive bindings for don't UJS and that just provides go to J as as a react hug as well as a context that you that you put over your your app so you just provide the context provide the instance and you can use it as a react hug so that's a very nice way to use the go to GS and then if you want to bring your identity widget with react you can you can then use react Alif 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 nullified entity widget but because you don't have to ship your own framework it's a lot lighter so it's only solely six kilobytes and it's got all the functionality of reacting with identity you can provide you can use your identity as a hook and it has a nice user interface that you don't have to code up and obviously you could you can bring your own styling if you want to 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 so 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 our go-to j/s and nullified any widget and then the react variants of that if you care to use them they may save you some time they certainly save me some time it's been since I'm talking about the integration between nullified entity 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 we'll be useful for our demo purposes so I'm using nullify dev and I'm and this is my alias for Nell five functions create and we're going to go for the authenticated protected function template and this is just a nice way too so that I don't have to memorize how to do this I can just fire it up and it will 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 you get a response with offs true if the user does not exist then the in a 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 know if I dev 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 and that will let us choose the protected function trigger and here we can finally understand what it means to have emulated nullify identity authentication headers so by default we're actually passing yes so I'm just gonna 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 all live reload and if you want to see what happens when there's no identity actually to skip all that 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 speak on so that's great for developing and once your once you're happy with your function you can actually integrate that with your front-end so here I still have my friend and continuing step my friend going let's actually see how to wire it up with the protective function so over in index J yes 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 2 and that will get the card 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 sets dotnet Liffe I slash functions slash I what did what did I call it protected function and then we have to supply some headers so headers authentication there user dot touken access token then console.log so actually I misspelled that I need to make I need to make this authorization and I need to dot Jason it Jason 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 service functions are being served on port 3 4 5 6 7 and then the parcel server is being served on port 1 2 3 4 and both of them are being joined on localhost 8 8 8 8 so that's the one I actually want and if I if I go to 1 2 3 4 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 82 8 right now and I have that new button and it's called it something better like off function so and 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 attach from my bearer token and and then I can you I can do that can do stuff with that data inside of the servers function and then respond back with whatever I want Here I am responding with off true but you can respond with anything that you want let me log out let's see the equivalent response for that all right and clearing all this as well so now I'm not logged in and I'm going to try and do all function ah says cannot be properly took it of null of none oh no that's very true so let me just say something like user and and 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 they would say you should log it you should login 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 fair 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 gonna ping my back-end and be denied and then come back and immediately ask for a login so that's a pretty cool integration of servlet functionality and authentication now that's not the only integration 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 function stocks and if you scroll down to adventure good 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 in to your site so we're gonna try and scaffold out an identity function just to see how that works together with your function and nullified dev an identity workflow so I'm using the five 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 call identity signup and that's a hard-coded name those these are all special names which are recognized by nullify functions and their get triggered when certain events happen so on this one identity signup well it happens when signup happens and you can you can decode or D structure 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 cache 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 a dev so I'm gonna start out in that left hide EV on one side and this will start up the function server and on the other side we're also going to start up a function invocation so here we're gonna 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 dot whatever so now if I dev understands that and has a special hard-coded behavior for these functions so here we're going to say we're going to try and invoke the net Liffe identity sign up and instead of the usual prompt we're gonna get just a sample payload passed into the function it's gonna run through that code it's going to return with for example here we we've passed in a user with trust this company calm so it's gonna pass in this is the return of after metadata of roles of editor and with some extra functionality as well as sign dynamically inside of the service function and you can also test this in production by dropping out of nullify dev and pushing it to production so and so here it would be another if I deploy prod my shortcut for that is n 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 all 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 to sign up as someone from trust this company actually let's just sign up as his total stranger and let's see what happens with that stranger stranger at 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 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 comm 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 a stranger at danger com so I'm gonna give this a roll 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 this these are all things that they can adjust and you can access on the user metadata object so that's good let's sign out and then sign in as someone from the company so employee e 8 6 7 5 3 or 9 and so employee at trust this company comm so I'm just following here so this will pass the validation and we expect it to get an editor axis 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 just as 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 triggered functions you can use identity signup 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 out 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 eye 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 go true and you're welcome to contribute if you can but that says is that's what stands right now as to the limitations of the event triggered functions on nullify ok so we already talked a little bit about metadata management and and 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 full Hawksworth called gem stack comments so the this is a demo for jam stack comments with nullify 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 gonna 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 write 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 nullify and that's down here and then you can scroll down to the forum 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 will have a piece at the end of this series about the nullify API and how you can build your own no effect clients with this whole thing ok so on to the last piece of this video which is the paid features just to briefly mention that exist and what you can do with them so the first is branded Roth so branded Olaf 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 that laughs I remember when we signed up with github and Google to as external providers we use the enough identity app but we could 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 entity 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 do presented is completely free so that's pretty nice and that's nullify identity you 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 in lfi but is completely separate as far as technology is concerned from natla phi except for one connection point which is the gate gateway you can use nullify CMS without nullify 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 notify users notify 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 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 nutloaf ICMS admin panel and notify CMS with the good gateway uses nullified entity to login we'll explain all this integration but fortunately you already know what notify identity is and this is a very familiar which--it to you by now I'm gonna sign in with my employee email and my password and that's and now we can see the M in backend of nullify so we have a few collections named here and some on some blog posts and also you're able to see them so to spread out or are in layers we haven't really set it up we just put titles on just cuz that's all we need 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 gonna cancel and so you can see here two things there are there's a left hand side which with a bunch of form fields and on the right hand side I'll previewed 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 lower rim it's um I have my author picture be registered so it my author picture signs up it shows up as well and note if I change the date it shows up on both sides can select a pre generator topic you can add turns 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 the street 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 it for markdown editors but you can do that right here and you can choose a new pay 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 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 would just want a nicer editing experience you can notice the scroll sink as I go up and down it's just very very cool and so yeah once I'm happy I can save and when Elif SEMS that does a couple things actually kicks off a PR that sends to the github repo of nanofied calm 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 already as well and no we'll talk about the editor workflow but first let's talk about this check for preview tag so what this does in the backend let's have a look at the source code for the dub dub dub so you can see that Nell if I bought has already created in lfi CMS page it's and it's adding that file that I did it marked down 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 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 impanel 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 a preview once that deploy is live you can actually see that status update in the PR and obviously collaborate with your co-workers insider 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 post exactly as it will be inside of your actual content and you can see the entire site index together with that very nice so let's talk a little bit about editor workflow I'm gonna hit 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 a nice box 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 images that I've uploaded nothing much else here but now let's talk a little bit about how its configured how come we can 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've been the back end of the blog page and nullify CMS has a special config file called config dot llamo and here you basically spec out all the details that know if I see miss needs to know about your site so we'll talk about collections later but these is that's basically the schema of all the content that you enter in but basically you I you specify your back-end your site URL your publish mode which we opted into the editorial workflow for a more fine-grained process as well as a specifying a media folder which is where 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 notify 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 back-end means it's like that's a verboten word in nullify but really we're just using one of many configurations for or integration with get providers so obviously the the one that we lead with is get gateway which integrates with nullified entity we'll talk about this and this is and this has to be measured in contrast with the others which is integrations with github get lab and bitbucket so let's have a look at these back let's have a look at these backends they what's common among github get lab 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 get lab you need to login with your get lab account bitbucket same thing and get help 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 bots take care of it and that's what get gateway does for you together with nullify identity and that's the tight integration there fortunately you know everything about know if identity already so what I'm gonna show you is just a documentation forget gateway which is over here and it explains how you can set it up if you don't want to use nullify because this is an open source project and you can see all the source code over here in the get gateway repo so to be clear you don't need notify identity to work to use notify CMS it's just a nice to have because you want your popular 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 start with it and I don't know if I've been clear enough at the beginning but he'll if ICMS does not depend on reacted users react for the editor but it's amazingly tech agnostic like it works of Hugo it was Jekyll or middleman Gatsby and that's pretty pretty freakin amazing given that it's also showing you a live preview but it is true that the largest number users come from the Gatsby and react ecosystem so we're gonna 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 notify CMS 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 notify button does but basically it helps you set up a fork here we're actually doing something new which is appending this at stack equals CMS flag and that just basically helps to set up a get 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 the open-source site okay so let's deploy from a template so I'm going to click here and it's gonna 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 gonna leave it unchanged I actually already have the same name here so I'm just gonna add it to to it but notice that it's actually showing that it's gonna set up gate 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 gate gateway is already set up as well okay and that would be in settings identity all the way down here with the gate gateway services and you can set this up yourself a few if you chose so choose there'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 we start 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 is pretty straightforward blog now you can see there's also a products page that you can edit and a contact page with nullify forums and other forum 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 clone that source code and again in the NLF ICMS world you should always start with the config dot yeah mol file so let's have a look at the static folder admin route config yeah mo it's pretty much always in something around like that where the final route will be fubar nullified comm slash admin right and then it would just look for a conflict mo up in there we got the back end 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 folder collection sources 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 feature post and you can notice that I'm using all these widgets which are text boolean image markdown this state 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 the nullified entity widget will pick that up so now I can sign up and I or I can just also continue a 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 and in gatsby's perspective well 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 wage it but now that's deprecated so you always used to 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 foo bar Baz whatever featured posts yeah make a feature post why not I've taken image I can reuse the selected image or I'll just make my own because Hawaii not okay tuck that in there upload choose selected and I'll type in some text I'll just grab some of this stuff hook it in there maybe I'll make this a markdown thing okay cool and 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 that's currently rebuilding so give me a sec let's head to the deploys you so you saw me cancel that deployer over there because I just 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 its 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 coda is 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 sending all these templates to go into each of these blog post folders that have been declared and that's that's a pretty clear and intuitive way to use a CMS the other way to use this know if a 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 none of ICMS 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 maintain over here has the is the folder collection and the file collection is all these pages actually switch renamed over here we head to the pages and we can edit any one of these things so I 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 no 5 CMS is really great CMS seeing without a CMS server and we can blah blah blah look at all of this awesomeness of widgets and editing and and wizzy witness it this is really really hard to do I wanna see 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 a day editorial workflow field and now when I look at the commits again I should be able to see the latest commits that we're updating the pages of the title and subheading and that does again hooks right back in to 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 post go live at a point in time so the natural solution is to set your blog post date at some point 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 uh-huh and zapier is a really good way to do it so the zapier integration of a nullify lets you just use this app and you can start a deploy of notify sites on a daily schedule which is pretty cool there are other methods to do it this article from Flavio copes essentially tells you about the zapier integration with a little bit more documentation and screenshots which I highly recommend and those for those who want to try out something more service without the zet without paying for zapier you can try to set up your own with servlets 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 notify 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 gonna cover today is has to do with media so so far we've been uploading media directly target folder that obviously has scalability issues for large images and large numbers of images and so you may want to explore one of the media partners that we have so the probably the best-known is culinary cloud Neri essentially lets you sign up for free and then they'll manage your images for you all you need to do is add a media library key to your config llamó and since and give them your ordinary cloud name as well as your API key and that's about it now if I will upload there instead of your github similar principle for upload care upload care is another service that just focuses on assets storing and not just images but just in everything in general and a similar place and the thing you just sign up for them and then give you a public key and lastly we'll talk about an elephant large media which actually is a git LFS implementation so you don't store your images inside of get you actually store it somewhere else in an elephant large media server and then that will firewall 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 nullify add-ons for everything else but apart from that you should be all set to go to do to setup your site with nullify CMS okay now we're onto the net loaf I 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 different sections with that we've covered so far and let's just get right into it so the first one is nullify analytics this was just launched in June of 2019 and it's 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 the 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 you 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 notify 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 hit to the analytics section on the top and you can read through this and and click to enable analytics for $9 a month you can fill that out but I already have that filled in my other site so I'm gonna go to there it is per site as for right now obviously work with the salespeople if you need better pricing than that and you can also read the documentation for for more information about what each of these numbers mean that's gonna 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 use unique visitors is an important question and I'll come to that so these are daily numbers and these are monthly numbers daily numbers are I had a spike on September 14 when had a big blog post go up unique unique visitors how do you tell unique visitors if we don't track them and this is straight up just unique IPs and then certain pros and cons to that with regards to double for example if you're on a mobile phone versus on your desktop and you're on different networks you have different IPS and you be kind of twice but then also you'll be undercounting people who share IP so for example in a co-working space or a library or airport or something so it is by IPS as long as you're comfortable with that and you're 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 something else that you can't see here is is that when you actually turn it on I know if I was able to backfill in time for the past 30 days because and that's just because now if I already has the server allows it just hasn't set up the scripting for your site to spit out the analytics for you so that has extra running cost and that's what you're paying for it to backfill you know 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 clean 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 a 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 above 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 that's what they offer they offer you they can tell you 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 of mobile they're checking out for my RSS stay that that's or they trying to hack me I can also see what's going on over there there a lot of sub pages we'll get a lot of spots sniffing for the WP admin login page and that's just something that we you know being Jam stack just cards 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 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 a client-side navigation 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 gonna 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 gived LFS is get LFS is a way to large store large files together with versioning in git so everything that we love about git except that with get one of the problems is when you store large files in it and 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 and install and use without nullify what nullified does for you is provide a place to store it so that's where know 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 no if I also know if a large media also comes of any constants or image transformations and we'll talk a little bit about what that means but let's actually check out how to how to implement it the best way to learn where to implement it is on the docks 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 have already introduced the CLI in various sections of previous videos but this one is important it's a plugin 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 the path to that media file and you can use wildcards 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 I'll 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 so it's gonna 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 and get 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 that 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 notify large media is 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 gonna fit to that I can also use the smart crop parameter and that's actually going to be a hundred by a hundred 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 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 and especially on how to supply the query parameters to get the examples that you need but it's gonna be pretty straightforward once you understand what it does so that's nullify large media relatively straightforward large file hosting and image transformation product alright that is that for image transformation and large 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 winters which is working with third-party add-on providers and it's not something we really shout about because 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 nullify and if you're interested in working on an add-on for your company together with nullify definitely get in touch but we're just gonna focus on two existing add-ons that you can use today the first is gonna 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 now if I dev and all that good stuff but it's easier to onboard with an add-on that manages a lot of the backend syncing of environment variables and setting up of instances and all that so it's all integrated in your net effective workflow so here we'll talk a little bit about for a minute on a DB so the Fonda DB I think the best place to find out about it actually is not on that laughs I the best place to find out about it is on a podcast 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 he faced scalability problems because they were using no sequel databases well they had to migrate to no sequel because they faced scalability problems and so that's what fauna is a globally distributed as a 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 graph qaul first support so the best way to start thinking about how to use fauna together with nullify functions is to look at some of the announcement posts the font of Adam was definitely in the prototyping phase for a few months and so July there was this example from David Wells talking a little bit about how to set it up from a create react tap point review and setting up a full service database II full-stack fauna DP enabled nullify function and that's the demo that you can view on the nullifier repo because it's the one done by nullify people and you can definitely think about the structure that you might want for a back-end for your credits and more recently into in September of 2019 we actually announced the full general availability of the add-on together with an authentication and claims process so and so so now it's fully supported foot so now it's fully officially supported by nullifying fauna and the way that you add it you can definitely create it through the network I CLI and these are the commands at ons create fauna and then you can claim that instance with add-ons off and the fondant 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 and nullify 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 nail if I 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 fana does field level authentication so definitely check out how fana works you can also look at their Docs for for the fana 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 service jam stack users the next add-on we're gonna 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 if you treaty has 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 is some more information on the docs but i'm just gonna go through a rough intro of what you shouldn't know in case you might need this and so the idea is that when you're using something like nullify 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 fiji as for those date that those values none of it hits nullify or nullifies logging so here we've processed a stripe transaction even though we haven't saved the users 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're 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 that lafha 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 the different CBN's that the free tier has a CDN that everyone uses and then the enterprise tier has bet dedicated CBN's with more points of presence and better performance as well as of time SLA s and you can also specifically add support add-ons so there's dedicated response times and champ and support channels as well as high performance application delivery network features that you might mean 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 of nullify and sponsors of gem sack events one benefit of being Jam stack is that you're basically the first consumer of your own set of API s and once you have one consumer you can pretty easily spread it to more so if you have a web app you can spread to a mobile app to a desktop app to a CLI and so on and so on and so on and nullify is no exception nullify itself is Jam stack and nullified com is hosted on nullified com so in this section we're gonna be taking a look at how to make your own net lafay 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 notify 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 after nullify com this is always sort of the first-class consumer of nullifiers api's 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 sites 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 name I won't afford and this would be located in your nullify identity JW TS 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 in 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 or 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 e without actually serving in 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 naturally 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 Fornell Ornella fight dev 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 Nell effect client the indentify CLI is built on top of the o cliff 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 whenever five functions create that would invoke some flags over here but you can also look at for example the source code for a nullify deploy and that's just a single file and you can see how the CLI uses the this not nullify and they start 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 meta file API happens off-screen and it may be a little hard to find so I'm just gonna do you the favor of putting you directly and they let enough I CLI utils so this is a separate package because it's used in multiple places in the CLI utils that basically links up the GS clients which is the JavaScript layer over the goal client for Anila Phi and it wraps it inside of a Oh cliff base command and all 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 attach the nullify instance by inish by initializing and then attaching it on to 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 as well as desktop and so on and you're not asked to login multiple times but if you want to go down to the lowest level of JavaScript dependency definitely check out bjs client library and this is the lowest level library that lets you do everything imperative lis 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 a menu bar app from Stephan Judas 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 very nice utility to have to give you notifications of when apps are deploying and updating so that's a brief tour of the notify 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 nullify for example a lot of people install the notify CLI as part of their continuous deployment process like they have their own continuous deployment tool chain and pipeline and then they use notify 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 now if I 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 nullify series where we just link you to more stuff that you can learn the first part I should totally tell you about is how to figure out if something with its wrong with metla fire itself that is the net afire status there is a net 5 status comm 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 as subscribe to updates there's also a Twitter account that you can follow to get more updates or just check if your in Twitter and you can get a link to what's going on over there if you're not checking the status of notify you want 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 Doc's that we document them so this is actually in our Doc's 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 do 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 nullifier community site where there are people helping each other on nullify issues as well as related static site generator issues and for the FAQ you can check out the common issue tag that has been created by the support team and these are capable typical issues that they've run into supporting hundreds of thousands of developers over the past 5 years if you're on the page here 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 nullify 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 Matt Billman gave this awesome talk at Smashing San Francisco in 2016 basically giving the founding thesis on nullify and it's it's all about what a job SEC does and why there is a resurgence in static site generators Chris coiour 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 Sara Dresner talked about how the jam stack is a new way of joining together API is JavaScript and markup just like the iPhone that's not inventing anything new but it's putting to putting them together in a useful new way and you can do it you can even do things like e-commerce with the Josh 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 jams that can nullify with their Doc's team and how their business processes and cost savings were very very significant here for a large enterprise use case Quincey Larson and freako Kemp aren't an enterprise but they do have massive scale on on the order of millions of users and the in Quincy also talked about how he serves millions of users using the gem stack because his number one priority is cost and scale and that's if that's a perfect fit for something like a gem stack and lastly Jomon Ferguson of PayPal move PayPal me to jam stack and we soon you gave a talk about it and so this is e an enterprise-level talk does not use nullify but still talks about the benefits and some problems with moving to the chat 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 pcs and nullify as well as in kleiner perkins investment thesis red point and CRV are also interested in investing in the gem stack ecosystem so if you're interested in starting a gem stack startup you can check out their roadmaps and ecosystems and think about what parts of the ecosystem are lacking crv also has another jasec 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 Jam sack there a couple more resources that I want to point you to to learn more first is Jeff stat conf calm this is the premier Jeff Zack conference organized by an elephant but definitely not exclusive to nullify there's Jam stack org with even more resources about definitions marketing material best practices examples resources and stuff there is there's a Jam static slack that you can join at Jeff's I about slack calm there's a older broader community called the new dynamic and this is also a very active slack Channel heavy bit one of the investors in gem stack also puts out a gem stack radio podcast with a bunch of interviews that are really great just in just covering the jams tech ecosystem as well as developer experience and finally nullify recently published a book with O'Reilly on the modern web development with the gem stack and this is a free book you just have to give your email and it is a pretty good read on why the Jeff stack what is the job second 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 hopeful and it's definitely the first iteration so I'm keen on getting more feedback about it and thank you for your time

Channel: freeCodeCamp.org

Views: 55,576

Rating: 4.9174919 out of 5

Keywords: netlify, netlify tutorial, netlify course, learn netlify, jamstack, deploy website, web development, netlify edge, netlify build, netlifycms

Id: mT5siI19gtc

Length: 212min 20sec (12740 seconds)

Published: Thu Oct 03 2019