Deploy Websites In Seconds With Netlify

[Music] this video is sponsored by the ultimate freelancing bundle by study web development comm which gives you everything you need to start your own freelancing business including 130 page in-depth guide invoicing and client proposal templates website templates an SEO checklist and much more visit the link in the description and use the code brad 25 to get 25% off hey what's going on guys so a couple weeks ago I did a video on deploying a site to github pages okay and we use the gh-pages npm module and in that video there's a lot of comments mentioning natla phi which is another fantastic service to deploy static websites front-end front-end applications so you can deploy a react angular view and the it's a it's a fantastic service you get your free account which offers a lot and if you need more than that they do have pro accounts okay and this is not a sponsored video or anything like that I don't have an affiliate link when I find something that I think a lot of people will will find useful and it will increase their productivity you know help them deploy applications easily easily then I want to let you guys know and show you how to do it so this is nullified comm and basically there's a few ways to deploy I'm going to show you a couple different ways you can go right from your repositories so github get lab bitbucket I don't have any experience with anything other than github but you can do it like that I'm going to show you how to do that but they have other stuff that is included like server-side functions if you want to deal with AWS lambda functions and then they also have from trying to find it they have a form service so where is it right here so manage forms and submissions without any server-side code or JavaScript so a lot of people when they're getting into web development they have trouble figuring out how to just create a contact form so you have like PHP you could use but you have to have a script to handle it and send the emails and then you know what about notification and stuff like that this actually if you use net Liffe I you can just create a form and you can use the net loaf I attribute like you see here or you can do data net laughs I equals true and you can actually just submit the form and you'll you'll see the the submissions in your net laughs I admin area all right now there is a restriction on the free account I think it's yeah hundred forms per month hundred submissions per month so if you have just you know a small business website that that could be just fine if you need more than you could move up to the pro account okay and there's also spam filtering you can implement reCAPTCHA the documentation for net liffe is actually really good it's not too long but it's very self-explanatory you can also do ajax form submissions you get notifications so if someone sends in a submission you'll get notified this tells you about the usage in billing I think there is some extra charges if you want to do file uploads which makes sense because that would take up storage and I may do a video on the forms but in this video I just want to simply show you how to use it how to deploy a website or an application alright so i'm gonna log in here and you log in with either github get lab bitbucket or email I'm gonna use github and once you do that it will automatically see all your repositories so from here and also you can actually I think you could just drag and drop a zip folder of your website or your application so you don't even have to use yet I don't think but we're gonna say new site from git and we're gonna choose a service so I'm going to choose github and automatically it's gonna see all of my repositories so let's see I have some some full-stack stuff here some back-end stuff so I want to choose the modern portfolio that I used in the github pages video now here you can choose a branch I have a master branch and I have a gh-pages branch which was actually created in that so if we look at that repository the master branch has a dist folder and that's where all the HTML compiled CSS from SAS all that stuff is the images JavaScript basically whatever I want to deploy is in this dist:4 all right now if I go to my gh-pages branch it contains ever all the stuff directly in that folder that I want to deploy so I can choose to to deploy either of these branches and what I would suggest doing is creating a separate branch for your deployment for your production that way you can still push to your master branch and it's not going to affect your website okay and then when you're ready you can just push to that to the air deployment branch so down here you'll see published directory so if I were to choose master as I showed you there's a dist folder I would put distant here ok and it would deploy anything that's in that disc falter but I'm actually going to choose the gh-pages branch because it has everything right in there that way I don't even need to have a published directory all right so let's say deploy site and it should be as easy as that ok so it's a site deployment progress it's already done and it gives you a net liffe ID domain name and I'm going to show you how to how to add a custom domain so let's take a look at this I'm going to open in a new tab and there's our website we're deployed ok so that's it and if we go over here and reload it should show the little thumbnail right here and that's it and down here you'll see all your different all your deployments some statistics or whatever recent form submissions that's what I was talking about so if you have a forum people submit you can you can simply come here and you can check them so it makes I think that I think that's awesome you have server-side functions all kinds of stuff so now what I want to do I'm gonna show you how to add a domain after but now what I want to do is show you how to use the CLI tool okay because there's a CLI tool on NPM that you can install and you can deploy that way and if I go back to my my dashboard you'll see all your sites here okay so I'm gonna open up a terminal and I'm gonna open it up in my typewriter effect project and that's the last video I did where we did the little landing page that had the typing effect and if I do an LS you'll see what I have in here it's just an index.html just very simple static site with some JavaScript so what we want to do is say npm install - g4 global and then natla phi - CLI okay make sure you don't do just nella phi it's not a 5 CLI and I'm gonna get an error because I forgot sudo so let me actually just stop that and if you're on a Mac or Linux then you're gonna want to do sudo for global installations okay so that's gonna install it globally all right so once that's done we can say natla phi deploy okay so we want to authorize just asking for permission we've granted permission access can be broke please close this window and return to your terminal so we're gonna close that up let's go back to our terminal and it says no site ID specify create a new site yes path to deploy so if you had like like if I had my dist folder like if we were in the Modern Portfolio directory I would put dist or whatever but now this is just everything's in the current directory so I'm just gonna hit enter okay so it's gonna go through it's going to deploy and it says deploy is live and it gives us the the Danella Phi domain so now let's go back to my dashboard and reload and now we have this this is a crazy domain name but it is deployed let's go here and click on the domain and there we go we have another deployment so literally seconds so do so now all I have to do is do nella Fida ploy and it will instantly get deployed and I even have to create a repository I didn't have to deal with git or any of that so it's just a fantastic service now if you want to do a react application let's do that so I'm going to CD out of here I'm just going to go back to my home directory and go into dev I'm going to create a new react app so let's say I'm going to use NP X and what NP X will do is allow me to use something like create react app without installing it globally so I'll do NP x create dash react - app and I'm just gonna call this test - react alright so it should create a folder called test react with with the default react installation I mean I could have just got a react app that I had in my in my github but whatever it's just fine I notice NP X takes a little longer because it's not on your system alright so now that that's done let's just go ahead and just run NPM start just to test out the dev server whoops am i doing here I need to go into test react and then we'll do NPM start this is just going to run the dev server I just want to make sure that it worked that it works okay so we just get the the default landing page good let's go ahead and stop that and now we're gonna do a net Liffe I I'm sorry before we do that we actually have to build out our static assets because if right now if I do an LS this is the standard react structure but we want to build out everything so we just run npm run build okay and what that's going to do is it's gonna put everything into a build folder alright so now if i do an LS if i list our contents you'll see that there's a folder now called build and if i look in there you'll see that there's they the index.html and then we have the where is it the JavaScript it's in static so the JavaScript CSS everything like that is all in static so now that I have that build folder I'm gonna say nullify deploy so new site yes and then it's gonna say path to deploy and we want to make sure we do build because that's our static website you know that's that's built from react that's compiled so we want to say build all right so now says deploy is live let's go back to our dashboard and let's see let's go right here and reload and now we have this and you can see the little thumbnail let's click on that and click on the URL and there it is all right now I don't have any other I'm not using like react router or anything like that you may have some issues with with with with new with URLs so if you have like let's say slash users you may run into some issues because it's going to look for a literal users folder when in reality react is it's a single page it's gonna be a single page app so what you would do then let me just find the docs for that let's say nullify net Liffe I espy a domain yeah this right here redirect and rewrite rules and over here on the side you'll see history push state and single page apps so what what they tell you to do is to add this you actually want to add this to a file called underscore redirects okay and that file should go in your build folder so to do that let's see where are we now it's CD in to build and if your app works that's fine but if it doesn't like if you go to another page and it gives you an error or whatever going to build do touch underscore redirects and then I'm just gonna open up underscore redirects okay it opened over here let's see it's bringing over whoops what's going on why can't I pull this out I guess I can't all right so I'm gonna bring this over here you guys get a little sneak peek at my django app but in this redirects we want to put this in here so I'm just gonna go ahead and copy that and then we want to put that in there like that and save it okay and then once you do that you just want to redeploy so we'll go back and then say nullify deploy oh you know what I want to get out of this because I'm in my build directory so we want to CD back out and then do nella fied deploy and automatically it'll it'll look at the build folder because that's what we did in the beginning all right so now if we go back and reload okay so we're not going to see a difference because we have no routes or anything like that but if this were if we had other URLs to go to they should now work so just a little tip all right so those are some ways that we can deploy static websites and react apps and of course if you if you're using angular you have your dist folder view you know when you build out your static assets that's what you want to deploy so now let's work on the domain all right so I'm gonna close all this stuff and let's add a domain let's see which one should we add it to let's let's do the Modern Portfolio one so this right here what I would do is say domain settings and add custom domain and I'm going to use Traverse see app comm which is a domain name that I've registered with namecheap I'm gonna say yes add domain okay so now what I'm gonna do is go to Namecheap dot-com and I need to login all right I'm just gonna take it off the screen for a second to login I don't really know why but I will anyways cuz I know you guys can't see my password anyway and you'll probably see my username alright so bring this back and it's attach it over here alright yeah you can see my username is tech guy 1 anyway so that's that's what I was trying to hide but it's fine these are mostly just play domains anyways so I want to look for a travesty app calm which is right here alright and what we want to do is go to manage now I realize that you may not use Namecheap you might have something else but most domain registrar's at least the good ones will allow you to manage your your a records and see names and things like that so in this interface what we would do is go to advanced DNS ok and let's see this stuff we can actually get rid of this yeah we don't we don't need this stuff first I'm going to add this stuff so we want an a record and if I go to let's see documentation and there's a few different ways to do it let me just search for an elephant oh mein or net laughs I custom domain ok so I mean you guys can read through this if you want I'm just gonna try to find the place that I need which is right here ok so you can do it through there their DNS but I don't want to do that I want full control of my domain so I'm gonna do this right here I'm going to create an a record pointing to your root domain or to our load balancers IP address which is this 104 1 9 8 1 4 5 - so that's what I want to set my a rack - and right here in host you just want to put the at symbol okay meaning just the root and then I'm gonna put that address in there and I'm gonna click the check okay so in addition to that we need to add a cname so we're gonna say cname and the host is going to be W W in fact before I do that let me go back to this page my my interface and Nell Fi and reload let's see check DNS configuration maybe it's in alright nevermind maybe that just didn't hit yet but that should disappear soon for the cname record we're gonna do W W and the target is gonna be this right here okay whatever your net Liffe ID domain is yours will be different it'll be some crazy and then dotnet laughs i com so we want to go back and put that as our target like that okay so a record goes to this IP cname WW goes to whatever your net Liffe I do mean and save all right now this is probably not going to work yet because it needs time to propagate I'm also gonna get rid of this other stuff here definitely want to get rid of that all right so now all I have is the a record and this cname so if I go back here and real oh let's see okay so now you can see that those check management whatever it said that has disappeared so we should be all set traversée app calms our primary domain and then WW that version of the domain should just redirect to that okay so let's try it out I mean it's probably not going to work yet we get this HTTP that might take time to kick in let me just accept it so I'm gonna say proceed all right so there's our site and let's just check the inner pages here so these work awesome now we do have this that's not secured up here and I just did this about an hour ago and went through the same process and it didn't do this but if we go back to our overview here let's say secure your site with HTTPS so down here okay so yeah waiting on DNS propagation so once this is once it propagates fully that error should should just go away let's say verify Oh DNS was successful so let's go back HTTP traversée app.com yeah it's still doing it okay if provisioning your certificate takes longer than 24 hours contact support so it should work it should that should fix that error should go away and you should have HTTPS if it doesn't like it says contact support so I mean I'm not gonna sit here and wait for it to propagate correctly but it should it should and if it doesn't again just contact support so that's it guys so we've deployed three different web sites I know this is like 20 20 minute video or whatever obviously I had to explain stuff but you could literally deploy in a minute or so and you can see adding a domain is very easy you just add your a record your cname and you should be all set okay and I might do another video on expanding on net liffe I using some server-side functions and implementing a form and stuff like that but I wanted this to be kind of an introductory video all right so that's it guys hopefully hopefully you enjoyed this video if you did please leave a thumbs up and that's it enjoy your weekend hey guys one of the best if not the best resource I can refer you to for starting a freelance business is at study web development comm slash freelancing the Creator Kyle shared it with me and I can personally vouch that this bundle is well worth it you get 130 page guide to freelancing and it comes with things like invoice templates client proposal HTML and CSS templates a portfolio website access to a private Facebook community and much more so use the code Brad 25 to get 25% off today

Channel: Traversy Media

Views: 188,976

Rating: 4.9471021 out of 5

Keywords: netlify, deploy website, react deployment, deploy react, website deployment, web hosting, website hosting, website domain

Id: bjVUqvcCnxM

Length: 22min 5sec (1325 seconds)

Published: Sat Sep 29 2018