Custom Error Pages and Version Control - Flask Fridays #3

what's going on guys john elder here from codingame.com and in this video we're gonna look at custom error pages and version control with flask and python all right guys like i said in this video we're going to look at custom error pages and version control but before we get started if you like this video you want to see more like it be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out coding.com we have dozens of courses with hundreds of videos to teach you to code use coupon code youtube1 to get 30 off membership it's all my courses videos and books one time fee is just 49 which is insanely cheap okay we are moving right along with last friday the best day of the week and i hope you guys are gonna have a good weekend i have got absolutely nothing planned this weekend very nice so in this video we're going to look at creating custom error pages so you go to a page that doesn't exist for instance asda you get this you know 404 error error page not found and you know web servers have error codes like air 404 or 500 there's a server error internal server error you may have seen these errors throughout the internet over the years as you've been you know checking out web pages you go to a page that doesn't exist you get an error and you want to create custom error pages that are nicer than this and we'll make them look nicer than this later but in this video i'm going to show you how to create the custom error pages and then later on we'll make them look nice so you know you can put your own branding and stuff and maybe you can redirect to another page or show a site map with you know that page doesn't exist but check out these pages or whatever you want to do and i'll show you how to do that in this video we're also going to take a minute just to set up version control we haven't done that yet it's usually something you want to do at the beginning of any project so i'll show you how to do that if you already know how to do version control with git and github you can skip over that it'll be the last part of the video but for now we're going to work on these error codes so let's head over to our code and this is the hello.pi file we've been working on up until now and to create custom error pages we just have to create a new a couple of new routes and functions so let's come down here and create custom error pages and the first one we'll create is invalid url can't find a page you can go to a web page that doesn't exist and so to do this we just we create an app instance but instead of creating an actual route flask has sort of a mechanism to deal with these things that we can call on and it's just app.error handler then we pass in the code that we want 404 and you can look up these uh server error codes there's a wikipedia page that lists them there's you know dozens of them 400 404 you know 500 500 whatever uh there's a couple of main ones and we're just going to do the two sort of most popular ones 404 and 500 but this is how you do it so that will create that now we just create our function so let's go define and this is a page underscore not underscore found and we need to pass in the error right and then we just do the same thing we do up here almost so i can just copy this return thing here so we want to return render template which one do we want to render we want to render 404. now we haven't created that yet we'll do that in just a second and we don't need to pass in any variables like we did earlier so okay now there's one more thing at the end of this you got to slap a comma and then put the actual error code so 404. this is this will get passed into this function so then this page not found function sort of is looking for this argument to be passed and so you do that so that's really all there is to it so we can copy this whole thing and just come down here and let's say uh internal server error it's a common one and that one is error 500. so the the server kind of dies on you something happens internally it's unhandled exception anything like that this will throw a 500 error and then here we want to redirect to page 500 and then pass 500. so really that is all there is to it now we just need to create these two pages in the regular way we create any template and we learned how to do that in the last video we come up here to templates right click new file and i'm just going to file save as and we'll call this one 404.html then i'm going to do it again so templates new file save as 500.html and then inside of these we can put anything we want so just for now i'm going to put like a line break let's center this and let's go h1 let's just type in 404 error and then down here let's just go page not found again this doesn't look pretty try again but it will get the job done so i'm going to go ahead and copy this save this file come over here to our 500 and then for here let's go 500 internal server error and instead of page not found let's just go try again okay so that looks good so let's head back over to our terminal make sure we're in our c flask or drive make sure our virtual environment is turned on make sure the server is running we can come back over here to our web page we can go to any page that doesn't exist so uh join.html we don't have that page oh we have an error right there what did i do ah right here no colon right there so of course okay it's friday we always make mistakes on friday flask friday is not immune to the mistakes so okay so app error handler no colon there no colon there go ahead and save this head back over here hit reload boom 404 error page not found and you know this is joined.html we can put just any kind of gobbledygook in there and again page not found try again so pretty easy to do these custom error pages and you know every website should have this just a very common thing so now i want to talk about version control and if you're familiar with any kind of coding you're probably already familiar with version control it allows us to back up our code keep track of it over time if there's a mistake we can roll it back to a previous version that worked it's good for teams it's good for solo people it's just the best practices when it comes to coding and it'll also help us because we can push our code up to github and then later on we can also push our same git repository up to web hosting for instance heroku for our web hosting so we really sort of need this if we want to make this a real website up on the internet right now we're just running this on localhost but it's just something you're always going to want to do so head back over here let's control c to break out of our server now our virtual environment is turned on i'm going to go ahead and deactivate it and we'll turn it back on in a minute and the reason this is is because we need to create some ssh keys so we're going to create a git repository to save all of our get code our version control code then we're also going to push that up to github and to do that we need an ssh key a secure ssh key that allows the two to connect securely and for them to be able to verify you are who you say you are and you're pushing the code to the right account and all that good stuff so we need to create an ssh key and if you haven't done that before this is how we do it so let's cd into the tilde forward slash directory and if we pwd this is the main sort of default directory that should come up whenever you open git bash if you're on a windows computer and mine is c users code to me because coda me is my windows logged in username yours will say something different but that's fine so the first thing we need to do is make a directory to hold our ssh key so mkdir and now this needs to be a hidden directory so dot ssh and the dot makes it a hidden directory so we could do that it will create that now we need to move into that directory to create our key so cd change directory dot ssh and you can see we are now in there we can confirm that with pwd we're in c users codeme data so okay so so far so good we can ls we can see there's nothing in there so to create an ssh key for windows users it is just ssh key gen.exe and that's really all you have to do now it's saying where do we want to save this we want to save it right here so i'll just hit enter it's asking for a password i don't ever put one so i just hit enter again hit enter again and it's been created now if you put a password in there every time you try to use this thing it'll ask for that password and if you forget that password you're gonna have to regenerate the key all over again and it won't be usable so this is already a secure thing i don't see a need to put a password on it so i never do so okay we've generated our ssh key and we can tell that by typing ls and we can see here is the key there's two of them a private one and a public one the public one is the one we're interested in that's the one we're going to need for github so we can actually see it we could type the catalog command and we need to do this so catalog id underscore rsa dot pub and we hit enter and this is our ssh key so we need to copy this so highlight it like this drag your mouse highlight the whole thing and then right click and copy now we need to head over to github and add this key to our github account now if you don't have a github account go ahead and sign up it's completely free go ahead and do that then when you're logged into your account come over here to settings and then look through here for ssh and gpg key so we click on that and you can see i've got a bunch of them already we want to add a new one and then we just come down here right click and paste in that key and we hit enter it's going to ask for your password again it's been a while since i logged in and boom it's been added so now anytime you try to connect to github from your terminal it'll use that key it will recognize that it's you and everything will be fine okay so let's head back over to the terminal and let's set up our version controls so we can clear the screen we need to move back into our flask project so cdc forward slash flasker and yep there it is now before we get started we're going to push all of this stuff up to github but we don't need to push our virtual environment up to github that really doesn't have anything to do with our flask project per se i mean it's an important part of the project but we don't need to save that for version control purposes so we need to tell git to ignore that whole directory and we can do that by creating a git ignore file so to do that i'm just going to type touch dot git ignore and then the period in front of this just like our ssh directory means that this file is hidden so okay we can do that now if we type in ls you can see it doesn't even show up there but if we head back over to our sublime text you see boom there it is git ignore if we open it there's nothing in there so inside of here we can type in dot get ignore and then vert and then the forward slash we're saying hey we want to we want git to ignore this vert directory so go ahead and save this control s or come up here and file save and then go ahead and close this now we're done with that we can ignore that forever more right but it needs to be there and now it's there and that should be good so okay now let's set up our version control so head over to kodamy.com forward slash get and here are the instructions for sitting setting up version control for any project and i've been using these five commands for like 20 years i don't remember what they do or why we use them i just remember every time i want to set up git for a project and you should do this for every project you create we just copy in these commands into the terminal and we have to modify the first two with our name and email address but the rest of them we just copy and paste in there so all right let's go ahead and do this let's copy this first one head back over to our terminal and we need to turn on our virtual environment first so let's go source vert scripts activate and we can see now our version our virtual environment has been turned on right so that's good so let's type in that first command so let's paste it in it's git config dash dash global user dot name and then type in your name why does it need your name because version control keeps track of the changes of your code over time so it needs to know who you are so it could say hey john elder made these changes to the code right so it needs to know your name so okay that's the first one and now let's come over to the second one and this is email address and again same deal here we need your actual email address so it can keep track of who you are and stuff okay and the other three we could just copy and paste so one at a time we just come through here ctrl c to copy or right click and copy right click and paste boom there's one then there's this one and the last one i do always remember it's get init and that stands for initialize this will turn get on and it'll start everything so we paste this in here hit enter and you'll notice now it says master here on our prompt that means that git has been initialized that means git is working that means this is we're on our master branch it's the main branch now this will change in just a second when we set up github but for now it says master and that's good so okay we've created a git repository now we need to sort of turn it on right we've sort of installed it now we need to turn it on and to do that we type in git add period and then we type in git commit dash am and then put a little message here so i'm going to say initial commit so a commit is anytime you're saving your code you're committing it to the repository and so whenever you do that you want to type a little message to explain why you're doing it so if we made a major change to our index.html page i would type in changedindex.html page right just a little descriptive message to say what you just did and we'll see in a minute why that's important so okay we can hit enter there it's added six files and 85 insertions you can see a list of all the stuff hello.pi our templates files you'll notice there's no mention of vert because we set up that git ignore file so okay we've now committed it now we need to push this to github and to do that we have to set up a repository on github the first time after that it'll remember it but for the first time we have to set it up so let's head back over to github and come over to our account here and we can click on your repositories and you can see i've got a bunch of repositories now we just click on new and let's go ahead and name this i'm going to call this flasker or yeah flasker that works all right now this can be public or private and both of these are free i tend to keep all my stuff public because i'm a teacher and i want my students to be able to see it even if i wasn't i would probably keep it public unless it's like some super secret startup that you're working on and you don't want the code to be visible it when it's public anybody in the world can see your code that's not such a bad thing especially if you're trying to create a reputation for yourself if you're trying to get a job your potential new boss is going to want to see your github code before they hire you it's an interview topic then you know you might come in for a coding interview and they might sit down pull up your github and then go through it and say okay tell me about this and you can talk about it right it's a common interview thing so keeping your stuff public is not a bad idea i tend to do that but if you need to keep it private for whatever reason you can click private here and either way it's free so just come down here and click create repository and when you do you get this next page that shows you the next instructions so to set this thing up we've already added our ssh key here so we're all good there but we need to add these three commands to our terminal because we've already got an existing repository on our command line in our terminal we need to push it from there so that's these are the instructions to push an existing repository from the command line you can ignore all of this stuff we just care about this stuff so all we have to do is copy each of these and paste them in so copy head back over to our terminal paste okay then the next one is get branch in main now this is kind of new github just started doing this a few months ago it used to be before i hit enter you notice this main our our master branch is called master they want our master branch to be called maine and the reason why they did that is social engineering master is a an evil connotation it sort of refers to slaves and masters and that's not politically correct anymore of course not so now they've changed it to say main and you can see now it says main i i don't know whatever makes them happy so we'll do it finally we need to push our code and we use this third command for that and copy this paste it in hit enter and now this will push it's saying are you sure you want to do this yes we do it's found our ssh keys and it pushed our code so we should be done we can head back over to github now and hit reload on this page and here's all of our code right so it's github flat planet i don't think the world is flat i just find it hilarious that some people do so that's my username and then flasker this is our repository and you can see we can click on any of these things and this is our actual code it's saved it's backed up it's safe here if our computer explodes here our code is safe up on github if our house burns down our office burns down our code is safe on github before girlfriend throws our computer out the window which has been known to happen our code is safe on github and you'll notice this initial commit that's that message we typed in earlier so this really nice at a glance you can see changes so for instance if we change this to uh something else so let's come back over to our code let's make a material change right so internal server error i want to also put thing i don't know there's a major change we added one word right or maybe we came up here try again [Music] maybe we typed in uh something went wrong try again okay so we save this let's take this off of here because that's a silly thing okay so we made a change to our 500.html page we added this little thing what do we do now get wise right we want to back this up we want to push it to github how do we do it from here on out so anytime you want to make a change and save it to your github or your git repository this is what you do go through these three steps you type in git add period this adds everything from your project to get now we need to commit it so git commit dash am and now we type our little message let's go uh tweaked 500.html page right okay and you can see only one file changed one insertion one deletion we deleted a little thing on the index page now we need to push this up to github and to do that forevermore we just type git push hit enter it's doing its thing and it's done now we can head back over here and hit reload and you can see here it says tweak 500.html because somewhere in this directory that's what we did so this is nice right at a glance we can see changes over time to our code if we need to hunt something down it's a great way to do it that's why we type in those little comments that's why they should be descriptive and that's the whole purpose of that so now we can click on this and we can see yep here it is tweaked500.html because this is the file we changed all the rest of these files we didn't change so they still say initial commit we can click on this and we can see something went wrong and sure enough it did that now if we want to see the changes over time to this file we can click on history and we can see here is the initial commit here's the tweaked one we can click on this one we can see here's that original code before the changes and it's not just that page it's everything so we can come through here to our 500.html you can see it it only says try again there versus if we come back here to this one well it's the most current one so if we want to see it we have to come back here and we can see it right there so very cool and really really easy and just get in the habit of backing up your code every once in a while i tend to back up my code right before i'm about to do something big because then if i do something big and i mess it up i can just redownload the code before i messed it up then after i do a big thing and i confirm that it works then i'll save it again after that i don't save it every five minutes i don't save it every 10 minutes i don't save it every hour usually unless there's a specific reason to generally if i'm working on code i do it at the beginning of whatever i'm doing and then at the end so if i'm working on a website for eight hours when i start i'll i'll save it when i finish i'll save it unless there's been a big thing sometime in the middle of there where i'm like yeah i should probably back this up just in case then i'll do it then too but you know for the most part you don't have to do it like every time you make some little tiny change just whenever you do a big change be sure and back it up and push it to github github and you should be good to go so those are custom error pages very important and we're going to see some strategies to using these for all kinds of fun things in the future very easy to do and uh pretty cool and that's version control you should always do this for every project you create every time you create a new project you'll go through this whole thing again you don't have to create an ssh key every time you can use this same ssh key forever for all your projects but if you haven't done it you need to create one right other than that every time you create a new project you're going to have to go through those five steps that we saw on the codeme.com website these five things every time you create a new project this will set up your version control for that project you should not share version control between projects your version control should just be for one project if you have a new project you set up a whole new version control just for that project i know some people want to be like i set up version control three projects to go i want to use it for this one how do i do that no no you don't want to do that you always create a new version control and then you'll come to github here and like i said you'll have a bunch of repositories you can see i've got 64 repositories i've got 64 projects hosted on there you don't want one project with everything in it you want separate projects separate repositories for each project so pretty simple and pretty cool so that's all for this video if you like to be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm and check out kobe.com you can use coupon code youtube1 to get 30 memberships you pay just 49 to access all my courses over 47 courses hundreds of videos in the pds of all my bestselling coding books join over 100 000 students learning to code just like you my name is john elder from codingme.com and i'll see in the next video

Channel: Codemy.com

Views: 4,905

Keywords: flask error, flask error handling, flask error handler, flask error codes, flask error 404, flask error 400, flask error 405, flask internal server error 500, flask error 500, flask error pages, flask 404 error page, flask 500 error page, flask version control, codemy.com, john elder, john elder flask, codemy flask, flask git, flask github, flask ssh key, flask version control git, flask using version control, flask .gitignore, flask gitignore, flask git push

Id: 3O4ZmH5aolg

Length: 23min 12sec (1392 seconds)

Published: Fri Jan 29 2021