Placeholder Image

Subtitles section Play video

  • everyone.

  • I'm six and I'm happy to be sharing this Walk through with you.

  • I learned what there myself through Freak Oh, Cap three years ago, and back then, I actually struggled a lot with getting my projects online at first through Cloud nine.

  • And then Hiroko and I only found nullify a year later and realized the deploying and scaling is a lot easier with the jab stack approach, especially with modern front and frameworks like react in view.

  • So this is the video Siri's I wish I had when I started 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 going to start with the main ones first, the ones that you really need to know.

  • So we'll talk about nullify edge and how nullify is actually a CD and first hosting solution.

  • And that's why it's fast and secure and how we can upload and deploy without using any the other function audio nullify just deploying Street to see the end.

  • Next, we'll look into nullify build and how nullify hooks up to your get repose and continuously deploys from them.

  • So you have version control for your sites, but also it helps you generate your sights from static sites or any interest for maximum performance.

  • We understand the build process, especially how to debug it, as well as to manage the build environment with environment variables as Wells injects your tokens and secrets at Bill time.

  • Then we'll talk about nullified Dev, which helps you developed locally so you don't even have to deploy.

  • This is entirely within your local machine and the, and the idea is to make it a lot easier to test serverless functions together with your local dev environment with hot reloading as well as anything else that you might need to simulate your real production environment.

  • Then we'll take a look at 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 Zapp here or a service function or other sort of Web hooks, and we'll show you how to do that in simple HTML as well.

  • A single page Japs and static site generators.

  • They were going to take a look at nullify identity, which helps you add authentication and authorization to your site, and this could be very useful for absent you commerce solutions.

  • And in particular, you can use a dropping widget so you don't have to call it up to you.

  • I or you can use something lower level that actually gives you the core functionality, and you can code you're you on top of it.

  • We'll also talk about authenticated functions and how nullify identity and service functions Work's work really well together as well as other things that you might want to do.

  • Son of people that you're working with, my actually be nontechnical users.

  • And you might want to edit content without going straight into source code.

  • And that's why I know if I has a very wonderful open source project called Nullify CMS, and we'll talk about how to set it up as well as what it does so you can validate for yourself if you want to use it or use any of the other.

  • Head of CMS is out there.

  • We're then gonna talk about Nelle.

  • If I add ons, which are all the other functionality of nullified.

  • It 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 service ID analytics.

  • That would be very useful for your site as well as the Adam Marketplace.

  • When l If I starting, have Adam partners that include fauna D B, which helps you add a database to your jobs.

  • Excite.

  • Lastly, we're gonna talk about the Notify FBI where you can make your own nullify client.

  • For example, if the CLI and the U Y of nullify aren't exactly fitting what you need nullifies.

  • Platform was entirely documented, and you can go make your own client on top of it.

  • And a lot of users have and finally will end with pointers for learning more about nullify and jab stack and where you can get help if you run into trouble.

  • So hopefully that's a good overview of what we're gonna be doing today and let's start diving in.

  • They're a 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.

  • And so is the fundamental concept of Jan Stack.

  • So Nelle, if I started life as a company called bit Balloon and by balloon, was a simple service where you could drag and drop like a folder on your desktop, drag it onto bit balloons, web you y, and have it be deployed immediately onto a CD en.

  • And to this day, that is now if I drop.

  • And so that is the fundamental concept of nullifying that everything that you deploy to nullify aesthetic assets and nullify takes care of deploying it on a CD en so all the points of presence around the world so that your users get them as quickly as humanly possible.

  • Now, Big Balloon eventually became Nell.

  • If I and then we dropped a bit blue and angle.

  • So if you go to the Euro bar and you type in big balloon dot com, you simply get redirected to act on nullify dot com slash drop.

  • Here you can do a simple dragon drop of your built sight, Not the source code.

  • The build site.

  • Um, and you screw 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 nullify actually even gives one to you.

  • So just go see the Donald A demo.

  • SaiPan, that balance zip file.

  • And you can literally just drag and drop a zip file on two.

  • That drag field and you see how quickly it deploys.

  • There's no editing there.

  • It just deploys.

  • Live to alive, Euro, and you can scroll around.

  • I mean, I really don't think there is a fastest solution to getting something online.

  • You literally drag and drop it.

  • And the whole thing just deploys for you on a CD en.

  • So that's the fastest solution.

  • Now, I'm also going to 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.

  • Um, I'm gonna choose my favorite editor.

  • I use V s code.

  • It doesn't really matter what you use, but here in GS code, I can just drop drag and drop the file from my file explorer to V s code.

  • And now I have that project open.

  • And I can surf around and look and look at the index dot html, for example.

  • And this is a standard HTML sight.

  • Nothing.

  • No frameworks, nothing.

  • And I'm just gonna edit some of the texts to see how it shows up in instantly the poise changes.

  • So not receiving it.

  • Um, and and so I've edited that sight.

  • And now I can actually choose to compress that site and zip it up again to a zip file.

  • Um, 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 Dragon 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 hit to refresh that site, it's uploaded with the new changes.

  • So that's an L.

  • If I draw, you can always access the previous deploy with the with the unique euro.

  • So if you click down in here, you can access the previous deploy.

  • You can't even roll it back so you if you want you can just say published Deploy.

  • And now, when I refresh this original euro, refresh it.

  • It goes back to the original version because every single deploys immutable So you can always roll back something if you need to.

  • We don't expect you to drag and drop every time.

  • So the next method I'm gonna cover is using the nullify cli.

  • This is a pretty big topic that actually deserves a separate video.

  • But here we're only gonna use another feisty alive to deploy.

  • So I'm gonna go back to the folder that I had, which which I'm anything in the final in.

  • And I could call up the terminal in V s code.

  • I already have the nullify cli installed, But if you need to, you can run in P m install Louisville Gotta fight bashed Eli, and that will install for you.

  • I'm running in Nephi version of to dock 12.

  • You can run nullify status to check If your long did I am and you can run log in knows I log in.

  • If you're not.

  • Now I'm gonna edit my HTML again to indicate that I'm using enough.

  • I'm deploying from the nose.

  • I see a lot.

  • I'm just gonna say it nullifies your life rules.

  • So we'll see that if we should see that if we deploy, So don in here, I'm gonna write a little fly deploy for brevity because this is a lot to type.

  • You can actually use NTL and we'll see what we get.

  • So the first thing that tells me is that this folder isn't linked to the site.

  • Um, I don't I haven't existing site that I that I want to link to, uh but we'll avoid that for now.

  • And just create a new site and we'll do the linking leader.

  • So we're creating configuring your sight.

  • They will ask you to pick your teams more.

  • It's likely that you'll just have one or two teams.

  • So just pick the appropriate team and then you can pick something like nullify demo site.

  • Now it's asking you for the deploy path.

  • In most cases, you can just go with whatever suggested, but we'll talk.

  • You will tell you how to how to configure this leader.

  • And so now it's uploaded all of these pieces of information and actually showed you what it's done.

  • It's always given you a girl where you can actually go check it out.

  • So here, because I've only I've only chosen nullify deploy by the fault it deploys to a draft.

  • You are so you can see what it looks like in production before you actually push it to Master.

  • If you're happy with this and you actually want to push it to master, just run it will find deployed dash, dash Prague.

  • Um and that's that does exactly the same.

  • Thing is now if I deploy but it pushes it directly instead of a draft, your ally pushes it directly.

  • So here we have a live europe.

  • So if you click this, uh, we should be able to see the CLI rules on the means on the main euro instead of the draft Europe again remember that each of these deployments is immutable, so you can roll back to it or give uh, give this as a link to a friends or colleagues for reviewing whatever content or co changes.

  • You notice that the keys prompting me for a deploy path if you want to actually just hard coat that they're a few different ways to do it.

  • But the way that I would recommend is to create another find out Tom will file.

  • So I'm gonna exit out of this process, and I'm gonna create a number five.

  • So this is an example nullify dot com O that I have just saved my copy of my clipboard manager.

  • Um, we're gonna comment this out for now on, we're just gonna focus on the publish directory.

  • So the published directory is the directory that we want to zip up and send out to the Cdn.

  • Nullified, uh, down and hear me.

  • I usually use this folder, but here I'm just deploying the root folder so we can just say dot Run, Notify the plate prod and, uh, e no longer being.

  • And I'm no longer being asked about where my published deploy path is.

  • Um, of course, I can move all of the assets into a published holder.

  • So something like this just and I can move all of the assets.

  • Yeah, so now it looks a lot cleaner and I can build from a source code.

  • So then I would have to change my published directory accordingly to the distant folder.

  • So I only published anything inside of this, and anything outside of this does not get, and I can run that good.

  • Now, at Nellis, I we actually really encouraged 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 that I haven't explained yet is the dot net lo Fi folder.

  • It really is just a simple little Jason file that stores where you have linked what site you've linked the project too.

  • So, for example, if over here I run nullify status, you can actually see not just my log in information, but which site this particular folder this particular project has been linked to.

  • So it says, Don't hear another fireside info, and it gives me all that stuff and you can.

  • You noticed the side idea is an exact match state, not Jason.

  • So obviously this dot nullify folder, it's pretty helpful for know if I see a light to understand what, citing fling, too.

  • But I mean, I'll be so hopeful for an open source projects, for example, where people down within your repo might not have access to the same site.

  • So checking that in my confuse them However, actually checking that in for a team project is probably pretty handy, eh?

  • So that people don't have to set up their own sites.

  • It's really up to you, but I personally generally getting more.

  • You know, Sex holder.

  • It really depends on use case whether you do that.

  • So I've gone and getting 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 see you get you could have it get commit.

  • So files you become a better message than I have.

  • Um, And now we have No, we have to set up the remote nullify works with good lad bit bucket and get up.

  • Obviously, I am most familiar with get, huh?

  • So I'm gonna use that, But feel free to use whatever get provider care about.

  • So notify What am I calling?

  • I don't what a sight.

  • And it's like here so I can copy that.

  • You're all just say get mowed origin.

  • And now I have that went up?

  • I can actually say it.

  • What?

  • Plaster.

  • So that when I refresh over here, I can see that I push my set up to get.

  • So surprisingly, we have gone through two of the methods and we're actually well set up to do continuous deploy to notify.

  • Uh, 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 sights that I have currently.

  • But you can also quick new site from get, can choose to set up continues deployment from one of these providers, obviously.

  • And I can select that repo that I just So you know, this over here that it reads wth e nullified out Tom all file that we've made.

  • And it's also created some other options that you might want to look into a swell.

  • We'll talk about the bill command when we get to the building.

  • So we're just gonna hit deploy site, and it's really is that simple?

  • So this employee 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 direct local development to get home from good hug pulled into Let's have a look at what continuous deployment workflow looks like.

  • So I'm gonna go over to my employees view, and then I'm also going to go to my project.

  • I'm going to say I'm gonna make some edits as well.

  • So I'm going to say into new was Appointment is the best because it is.

  • I'm going to get dog again, commit meaning two and get pushed origin Master.

  • That's just an alias that I have set up Oakley.

  • So that's going to deploy Street to get home, and that's gonna kick off.

  • They build in here.

  • And that's just an underlying secret about how Notify works is to automate visit.

  • So now So now that there's no bill time, So it just basically deployed immediately and, uh and so now when I hit back to the original site goofy Austin A e, I can see best over and get home.

  • I can also refresh and see my change done in here, and that's continuous appointment.

  • The idea that you're deploys update in lockstep with you're get.

  • 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 re fresh, he goes back to the original 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.

  • Okay.

  • So again, this is a get alias just for me, Teoh, be a little bit quicker than my actions.

  • So now when I see this update coming in, it actually has built on 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 texts 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, boy.

  • And only then you'll see the new text you pushed to get so a lot of the secret around how this is done.

  • It's basically setting up internal build hooks.

  • You can actually set up your own build hooks down in here in the settings, and it just gives you a euro.

  • You can use the trigger rebuild.

  • So let's ever look at how that works.

  • So I can give is a name, for example, demo Good.

  • And you can give it a branch to build here.

  • I only have master, but you can imagine building matches and you can save it.

  • And that gives you a build hook with which to use.

  • So now I'm going Thio Oh, and there is a very useful curl command, so I can actually taste that it.

  • So that's head over to deploy section and I'm gonna bring up my terminal copied from the build hook section.

  • So I'm gonna see that I fired this off.

  • And now if I wait long enough for a refresh, I can see that a new hook has been triggered by the demo people use build hopes for all sorts of things.

  • For example, you can go too if this and that and trigger builds on a tweet, for example.

  • Or you can set the scheduled job from zap here or any other KRON service to build every minute, every day, every hour, whatever suits your build process.

  • For example, one of my co workers, so hawk sir, have actually built a clock, said you wash my nullify dot com.

  • This isn't a dynamically updating JavaScript.

  • 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 notes, I don't tumble configured correctly.

  • Then you can also set up a one click deployed to nullify button.

  • That's pretty easy to get to get going.

  • So I'm going to go to my get Hub directory that I've set up in the course of this video.

  • I'm gonna copy that Euro.

  • I'll head to the Deploy button docks on nullify dot com and not just paste that in here.

  • And that will configure various things like the mark down snippet html l'm sniff it if you use own But here I'm just gonna copy a mark down.

  • What that helps me do is paste it directly into my read me So you can say things like that point to nullify done in here So I'm gonna commit this again.

  • Knew Deploy Thio Nullify Don't push to master And now when Every fresh I get this nice the point to nullify But so it's nice to display on your docks, especially for open source boiled plates and projects because what that enables people to do people who are not you.

  • It's a click that button and get that when click deploy experience.

  • So, for example, here it says, I have to get home.

  • I'll give this a different name boy to nullify, and it's going to set up a site and set up that continues deployment and 40 repo Um, all in the process of one click.

  • So whoever's working on there new site and get the benefits of this latest site from you.

  • But then they also have a fork with which to start work up.

  • So that's what the deployment nullify button.

  • This is just a streamlined process.

  • Um, it's useful for open source boilerplate authors.

  • And so now we're done talking about ways to deploy things on nullify notice that we haven't talked about build because that's a different stage of the deploy cycle where you may have to send the Bill 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 air things where there's nothing to cover because you got it by the fall already.

  • But it's good to be aware of what you get for free.

  • So the first thing you notice is that you get https by default.

  • So that's a more encrypted protocol.

  • Were not susceptible to a man in the middle attack and best of the best practice for modern websites.

  • By default, you also get deployed previews.

  • So I'm gonna do a little demo with our devil site.

  • I'm gonna create a new branch.

  • You say new features example, and I'm going thio Edit that in here.

  • Awesome feature.

  • And I'm going to see that.

  • Yeah, so there pushed on and get origin you feature, and then I'm gonna go create a PR.

  • I'll get home.

  • So I've been working on the branch.

  • Haven't awesome new feature.

  • Leave a comment.

  • These birds created full request and we'll let its performs in check.

  • But you can see that automatically some things happen that you may not necessarily having a normal sight.

  • 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 Colbert.

  • Sometimes if you're using, for example, it's that Excite generator.

  • You may want to check out if pages or redirects or change so you can click on their details and brings you into Nelle.

  • If I were, you can look at Look at what pages have changed in particular, and that should be exactly what do 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 back.

  • So that's a very nice work flow from previewing the new feature before you merge and then merging it once you're happy and having your customers see if their default to know about is that nullifies a seedy end by the phone.

  • So all of your deploys a distributed to the nearest went to presence.

  • This isn't documented everywhere because the list keeps changing.

  • But as of as of the time of this recording, the regular free tier gets a few locations.

  • Frankfurt sing for San Francisco, New York, Sao Paulo, it's Cindy and the Enterprise.

  • Terry gets a few more locations.

  • The place also atomic, which means that nullify waits until all of the files are published before pushing everything to production.

  • Um, so that your customers never see like 1/2 updated site, no matter when they when they hit.

  • And it also has instant rollbacks, which means that invalidates the cash globally whenever you do a rollback, for example, by clicking an old deploy and kicking published.

  • 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 asset optimization now.

  • This is not on by default, but it's so easy to turn on that I can't resist telling you about it.

  • So if you head over to the site that we've been published and you look into the sources, you see that we've actually not optimize this site for performance.

  • This is obviously a super spy on site, so it doesn't matter, but you may need you may want to have this on a larger site.

  • So, for example, we could modify the CSS, or also if we had any JavaScript files, we can also modify that and do a bunch of other hygienic things to clean up the way that we optimizer 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 anymore said are vested optimization and click save.

  • And the last step to do in this process is to head over here at re trigger t.

  • So that will introduce asset optimization into the post processing step, which is after you've uploaded all your files.

  • And now when I refresh my sight, you can see that the structure of the site I mean it looks the same on the html aside.

  • Point of things.

  • But the CSS is now men ified.

  • 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 the folks.

  • There may be others that I have uncovered.

  • I just wanted to highlight some of these, and the last part of the deploy section is going to be about customizing the u.

  • R L the remains that your customers see.

  • So the first thing to try is to not stick to the auto generated ones that have been assigned to you, but just to customize what that looks like.

  • So over here I'm going to say something I can go to deploy sittings.

  • That's a general on change the site name.

  • So over here, I can say, Ah, no, my job demo.

  • So now when I click over here has a more ergonomic site name, but it is still on the dot notify dot com domain.

  • Another feature and wanted to highlight is what happens when you want to customize the internal whirl architecture within your sight.

  • So, for example, that's create an about us page and have that show up.

  • So I'm gonna create about that each year, 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.

  • Um, and I'm gonna change the master and could be this you about a speech.

  • And plus it's a master.

  • I can say I could hit 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, Um, and get a 44 It's not found.

  • So what do we do about that?

  • So one of the ways we could handle this is to add in a reader x file.

  • So there's some guides as to how to how to do that over here.

  • Well, we'll just show you inside of code, so I'm just gonna add it underscored reader X file.

  • And this basically just tells you where to redirect from into.

  • So, for example, with people talking about us, we drive people to about so again, I'm gonna commit this, and I'm gonna push to mess.

  • So now when I head to this about us, it's gonna redirect to about Let's do it again about us 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 for a four page.

  • So that's also do that.

  • I'm really set up for four and no, Hey, and I'm also gonna send a redirect.

  • That's a catchall.

  • So how you do a catch?

  • All redirect is you just literally.

  • It's a start.

  • You drag people into the 44 So if you imagine in a single page app, you might want to send people to index because then the single pay jack might redirects people to the right area.

  • But here, we're gonna send people before.

  • So now, when every fresh it actually we dress the 44 on literally in Europe, except for about us, which still works.

  • So the reader it's only run when there's no corresponding HTML or other static acid, too.

  • Use three people using John Skip and requesting Jason files.

  • Do you know that sometimes you may accidentally, uh, hit a redirect and get back in html when you actually meant to request something in Jason.

  • So just be careful about that and be aware that you're parsing as Jason and those that will typically solve yours.

  • Now, of course, when you're getting your site up to production, you're probably also gonna want to use a custom domain.

  • So let's head over to settings to domain management section.

  • Here's what you can configure your custom To me.

  • Notify offers free custom domains.

  • That doesn't mean it buys the domain for you.

  • But if you already have a domains bought somewhere, for example, from Google the means 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, Wilkins just say whatever sex that I Oh, that's that's my own site and I can click verify, And if it it's already owned by me, I can say yes.

  • Adam mean, um, see what happened.

  • So my sight already currently uses this.

  • If it's a sight that hasn't been set up, you know, you can also said that if you if you have a domain that you want to buy, you can actually buy it through nullify, um, and you can actually buy it through nullify.

  • And now I will buy it for you, and you can paint identify with that and to send 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 set up that's said to be the primary domain.

  • Uh, and everything just redirects to that primary domain.

  • I also have nullify managed ness, and that's, uh what?

  • No, if I use is uh huh and that's an extra service and nullify provides to do to add extra features.

  • But anyway, so here's how the deities panel looks.

  • If you have a custom to me and said, you can also enable at P V six.

  • As always, customize your Dennis Records and named service.

  • Know that you can manage all your domains on this team level after no final com slash teams, that's your team.

  • Slash 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 Nelle if I when you're deploying, therefore methods of deploying.

  • We started out with five historical method which is dropping, dragging and dropping.

  • Then we used to see Ally to do a manual deploy.

  • Then we also linked It's linked our people up to get hub.

  • Then we set up continues to play from get hub so that every time you push to get home you'll get a new deploy and that is continuous deployment.

  • And finally we set up the deployed an elephant button on our read me so that open source project can clone are Rebo and deploy and one click.

  • We also took a little look at the defaults that are provided out of the box for nullify.

  • We get free https also call it S S O.

  • We also get free deploy previews, Same deal you can also yet branch deploys which I do not cover in this video.

  • But they're kind of the same thing just for different branches.

  • We also talk about nullifies they see the end, how they're distributed among various points of presence How nullified applies air, atomic, meaning they all deploy every single file to production at once and as well as providing instant rollbacks from a network control angle.

  • We also talked a little bit about turning on asset optimization, so this is not on by default, but it's pretty much one click.

  • And unless you have some bugs that are not compatible with this, you should always have it on.

  • And finally we talked about notify and custom domain.

  • So most things are hosted on the accustomed Notify sub domain.

  • But sometimes and sometimes you want to do redirects around what the internal your l structure of your pages are we covered that as long as how to do catch ALS for four fours.

  • We also covered how the link up cups that custom domains as well as a little bit about nullified the NS.

  • And how, if I can manage a de ns for you if you choose to have it, you can also set up Branch deploys for Manage Dennis if you're using nullify dinner, so that's the scope of deploying and nullify and in other videos will cover the other sections.

  • But if you've anything about any questions about deploying, please let me know.

  • Cheers.

  • In this video, we're gonna be covering part two of our series on the fire and specifically focusing on things that you should know about building and the continuous deployment aspect.

  • So there's drill into that a little bit more.

  • We're gonna cover build tools instead.

  • Excite generators.

  • We'll cover what build sittings are what the bill but is build stages different things that are done during the build.

  • What concurrent builds are and how you can cancel builds to keep under your current limit some bilge watches that people commonly run into as well as what to think, what to do when things go wrong.

  • We'll end with a discussion about environment, variables and the things you can do to set them in nullify to change the deployment environment to exactly what you need.

  • First, let's have a little discussion of bond that defined build tools nullifies strongly supportive of bill tools.

  • In fact, one of the founding feces of nullify is that static site generators are the next big thing, and that basically came from tracking statistics on static site generators and seeing that people wanted to use them to deploy to our cdn.

  • But they're manually doing it, and we wanted to build in a continuous deployment tool to help them build deploy their sights in fact, I strongly recommend watching this talk.

  • They notify CEO Matt Dillman because it really explains the benefits of the jam stack compared to what came before it.

  • But anyway, we're here to learn about the bill process.

  • So the first thing to understand about the bill process is that you can always do local builds.

  • You may not need continuous appointments.

  • 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.

  • Thio nullify until you're happy that you can turn continues appointment back on.

  • Let's take our existing site that we've been working on from part one, and it's add a build process to it.

  • So right now I have this folder, which is a disc folder, and it's got a bunch of index HTML files and let's say I want to add some Java script to it to write some interactive component.

  • What I'm gonna do is I'm going to add the bart, the parcel bundler, so that would be our first.

  • I have to initiate initialize the package.

  • Stop, Jason.

  • Um And then I have to add the parcel bundler.

  • And while that's going on, I can also install reacts we have done because I'm gonna use that as well.

  • So here.

  • We're not using a static side generator, but we're using using a bill process.

  • And the Cenex originator is just a massive.

  • 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 its source, and we're gonna build from the source to the desk folder.

  • And remember that the full the fuller that we ultimately published is the dis folder.

  • All right, The next thing I'm going to try and do is I'm going to go toe this source folder.

  • I'm gonna add a new folder called Index Gs, for example.

  • I'm gonna paste in some pre prepared reacts code, and I'm going to go to index dot html and add script that I d those abs and then I'm gonna add a script tag bottom saying spirit source.

  • So now when I run yarn parcel so or index start east, you know I get a nice local server where I can see the results of my code says hello from react, and I can actually click interactive, But so I know that I've added some Java script to my static site.

  • So this is wonderful news.

  • Um, 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 M p m scripts.

  • This is obviously optional, but it's pretty common toe set this up because it's easy to run.

  • So I'm gonna put in my command again source index, you know, And I'm going to introduce a bill command as well.

  • So this just has a boat again.

  • You can use any process.

  • You don't even have to use a JavaScript uh, bill tool.

  • But this is just an illustrative idea to bring you through the top.

  • So now when I run your own build, it's gonna execute this command and run parcel build, and that builds to the distant folder.

  • And remember that this folder is exactly what we're gonna ship to nullify to verify that a dis folder has built successfully.

  • Can you serve?

  • This survey is a seal.

  • Either you can install and that sirs files locally and you can see that you're your code is running in production.

  • The difference between this old version and this one said this is running reacts in development mode, and over here we're running reacts in production.

  • So that's how you can tell that you're building fronting locally.

  • So as long as you can develop and build locally, you may not need continuous deployment because it's not your debugging things and making sure that your JavaScript code is even valid.

  • This is a perfectly fine way.

  • You don't have to use notify, but what Nell a site does for you is starts to do that Automation steps.

  • So basically, the idea is that you would not be checking in your dest folder.

  • You would just be saying you'd just be adding that to getting actually, and you only have the source folder in your code.

  • That's the one happens when we push our latest changes to get we can see that all build has failed because this time we don't have a dis directory anymore.

  • Remember, we added that to get ignore because we're not 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 braces to build setting.

  • Really, there's only two places to set your build command.

  • The first is in your deploy settings that's edit our settings over here and add the bill command yarn run, Go!

  • And we're still going to deploy from dist!

  • And we'll save that.

  • You can use the base directory if you have a sub folder.

  • For example, if you have the model people set up so number of the Bill Command set, we're gonna have to go back to deploys and rerun the deployed again.

  • You can see that I'll build is not successful, and in particular you can see that we're now executing the user command urine running build, which is the one that we did.

  • And it's showing us running the build during the output of the build and then saving a bunch of dependencies and deploying site from dist.

  • So over here, if you want to check out the deploy, 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 building for yet.

  • So that's all well and good.

  • But there's a second week to set Bill Command, and that's it.

  • Never find out.

  • Tom, this is a higher priority grant.

  • 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 building so this can take any form.

  • Previously, we set yard run bill, 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 and build demand, and I'm gonna push it to the master and that will kick off the build again in Nell.

  • If I notice that this time there is a special message, put it over here saying there's different Bill Command detective going to use the one specified in the tumble file your own build versus yarn run built.

  • So you're on run build is the first command that we set in the user interface.

  • And your build is the second command that we actually set in nullified out.

  • Thomas O.

  • This is hire presidents because that's the single source of truth for all the notify settings that you ever wanna build.

  • So I personally encourage people to use notified autumn.

  • Oh, but you may find it easier to onboard beginners with, uh, the web you are.

  • 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 case.

  • So overall, that's a very gentle introduction to build settings.

  • It wasn't too hard, but really, once an operation over here is the core of nettle five, which is the build bots.

  • And that's something that we're gonna dive into a little bit in this next section.

  • So what we're gonna find out about the bill but is to read some of these documentation on the site.

  • It goes into a little bit about the origin of the bill, bought 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 but is basically a doctor container.

  • Our CTO usedto work a doctor, and so we're very familiar with this technology, and it gives us a lot of nice security and reproduction capabilities that is very helpful in creating continuous deployment service like metal.

  • If I.

  • So let's check out what the doctor 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 develop your own doctor builds.

  • There's different versions of the build images that are available so the legacy sites will have the trustee version.

  • You should not run into that.

  • If you're watching this video, and the current sites have thes e nial build image.

  • And that's, uh, the more current of to date version.

  • You can see the branches accordingly.

  • There is ongoing work on new a new version of the bill, but so by the time you watch this video, there may be a new version available, but hopefully I'll also have a new video out by then covering that.

  • But Basically, you should be aware of that.

  • You can actually pull down the production, the exact same doctor image that nullify run to your local environment so that you can test your builds in case something is going wrong in this whole build logic.

  • And it's also open source, so you're welcome to contribute.

  • But again, I want to stick to the high level if you know that there's a bill, but 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 cash.

  • So nullify builds are not entirely stateless.

  • They actually we actually cash things for a performance.

  • Improvements.

  • Everything is stored in a nullify cash directory, and in fact, you can.

  • You personally can use a build script to save face and cash, dissed them and decide whether it's a build things they're not based on the cash.

  • You may write your own and 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 Thio 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 def ce between updates?

  • And if there is a need to update the cash, then you run the cash up again.

  • So a simple thing like that can actually cut down your build times by a lot by skipping the steps of building things that are unnecessary for you to build.

  • Then it will install then a bill.

  • But it was the second stage.

  • It starts installing dependencies.

  • The dependencies here are not just your, you know, pack mpm dependencies, but also your known versions.

  • It will check wth ee dot n v m versions.

  • For example, it will check your ruby environmental.

  • You're using a Rubies that excite journey to relate Jekyll, Peachtree, Hugo so on and so forth.

  • E even has python go.

  • Ah, 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 started in cash Basically anything that you can do in a typical bash environment, you can do you know, if I, um then we get to the actual bill process.

  • That's where we run your bill Command, if you have one.

  • Obviously, we did the first part of the video entirely without a bill 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 authorizations that we do for delivering to our cdn.

  • Then we're going to deploy the site firm, the this folder again.

  • This is from the full, that air you specified in your nullified out normal or somewhere else.

  • Um, we're going to save the dependencies for the next build, and we're gonna all put a manifest you can't see over here.

  • But there's a manifest of what has been produced so that we can do gifts 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 Bill.

  • So that's the long That's the high level overview of the build stages.

  • Things happen in the sequence, and I think if you know the where your issues are.

  • If your debugging and build, um it will help.

  • You will help us a lot in helping you and all around.

  • Do you miss defined Nell?

  • If I buy a lot.

  • So the last thing that we should cover before getting into the gotcha section is concurrent builds and canceling builds.

  • So the idea here is that anything contributor built right, I can be pushing a commit to get, or it could be triggering deploy over here.

  • Or I could be triggering a deploy from a build hook that we talked about in the previous video.

  • So over here, have a bill hook that I can just be calling randomly, and so they now have two concurrent deploys.

  • So what's happening right here is that I only have a maximum of one concurrent employ.

  • So this is building, and this is waiting.

  • Sometimes I actually do want to just skip this step because I just want to go straight to the most recent bill because I know that's the one.

  • And so I can just quicken clicking here and cancel the deploy.

  • So once I canceled a deploy, I'm no longer, I'm using that concurrent deploy, and now I have the next one and cute.

  • So I just have to wait a little bit, but already it's starting to build.

  • So that's the That's the rough idea, if you want to have for a one for a single person workflow.

  • One concurrent build is probably enough, but you may want for a team you may want to look into multiple concurrent build so that you don't hold each other up.

  • Canceling the build is as simple as just killing the doctor process, and that's that's all.

  • It so as long as nothing.

  • So this lies.

  • Everything is failing.

  • Every single builders 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 recover.

  • Some Gotsch is that people typically run into.

  • In fact, this is probably the most difficult part of learning that life I, which is learning how to use a continuous deployment environment.

  • In fact, we have a whole place in the docks dedicated to build.

  • Gotsch is.

  • So if you have any issues, just make sure toe have a read of all of these and see if that matches your situation.

  • So some of the common watches that I wanted to highlight is first of all, the 15 minute rule.

  • Basically, if you're build takes longer than 15 minutes, nullify might cut it off on the free tier.

  • If you're a customer or you have some sort of special case, you may get in touch with support to extend that up to 60 minutes or higher.

  • Um, next, you also have to think about permissions and FBI secrets.

  • Sometimes you're builds, particularly if you're using a Gatsby or next template that requires a A p i ke.

  • Otherwise it will fail to build.

  • Then you may need to provide those FBI keys in order to build build stuff.

  • We'll have a section at the end about environment variables and where you can set them.

  • Lastly, I also want you to be careful about what folder you're deploying, so make sure that when you have a dis folder, you're actually building to the DIS folder.

  • Sometimes people just aren't aware of what folder t

everyone.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it