Create your first route in a Flask project

- [Narrator] Now that we've created a directory for our project, it's time to start writing some code. You need some sort of text editor to be able to edit and create new code. I'm going to be using Atom, which you can get for free at Atom.io. But feel free to use any code editor that you would like. So let's go ahead and open up Atom. And once that opens up, we're going to go ahead and open up our directory. So I'm going to move to my desktop, open up URL shortener. And we should see the two files that Pipenv has created for us. The Pip file and the Pipfile.lock. These simply just say, what different packages we have installed. As you can see, the only thing that we have right now is flask. So let's go ahead and create a new file and we are going to save this. Just simply as hello.py. Now this is where we're going to be writing our very first flask code. And in order to write flask code, we need to import flask into our project. So up at the top here, we're going to say from lowercase flask, import capital Flask. And make sure that second one is capital. And once you've done that, we need to create our own app. Now the terminology here is that whenever you have a flask project ultimately at the end of the day, there's going to be an app or an application which serves your website. So just know, that's when someone talks about a flask app this is what they're talking about is at some point you've got to have a file that creates a flask app. And the way that we do that, is we simply just say, all lowercase app is equal to capital Flask, which we just imported. And then we have to pass in as an initializer a variable called underscore, underscore name, underscore, underscore. Now this is simply just the name of the module that is currently running in flask. And if this is confusing at all, let's go ahead and just below this line of code print out whatever this variable is going to be. So we'll go ahead and just copy and paste that in that print statement. And let's go ahead and move back to our terminal and make sure that in your terminal that you're inside of the project and you've done your Pipenv shell to make sure that you have access to your different packages there. Now that we're there, let's go ahead and say export, in all caps FLASK underscore app equal to and we need to give it the name of our file. So this is simply just telling flask, hey when you run, I want you to look for this name of file when you run the web server. So we'll go ahead and hit enter on that. And now that we've done that, we can say flask, run. And when we hit enter, you can see this starts our flask app up at the top there. It says that the name of it is hello by default, this is a production environment. And you'll notice down below, it printed our hello, which was that underscore, underscore name, underscore, underscore. So now that we see that that's working let's go ahead and move back to our code. And once we're there, we can get rid of this print statement. This was just to help you understand more of what that variable was and how it creates that flask app. Now with our flask app, it's not much unless it can actually serve some information via a website. So we have to create something called a route. Now in the next video, we're going to go into more detail about what a route is. But a route simply just says, when someone visits this webpage, we should return back the following text. So here we're going to type at, lowercase app dot route and then we're going to specify which URL we want to create a route for. And in this case, we want one for the home page. So if we just do a single slash, this means that someone has visited the base URL. And we want to provide some information. Next we have to give a name and a function for this route. So we're going to saw def home to signify our home page here. Then this is just a regular Python function here. And ultimately we just have to return back some sort of object to be displayed to the user. In this case, let's simply just return a string. Flask does all the work of turning this string into a proper HTTP response to be visible on a webpage. So we're going to just make a string here and say, hello flask with an exclamation point. So let's go ahead and save this. Now that we've added some new code. We need to make sure that we go back to our terminal, stop the server that's currently running. If we do a Control C we can stop that. And then just simply type flask, run again. That'll get things up and running with our new changes here. And now that we've done that, let's go ahead and check and see what our website looks like. So you can see here in the terminal, flask has told us where we can access our website. It's this HTTP 127 dot and all that great information. So we'll go ahead and copy that URL and let's go ahead and take our web browser. And now enter in this URL. And once we've done that, you can see there's the hello flask that we wanted to be returned. So what have we done here? We have created a new flask project and inside of it created a flask app. In which we created one single route to say, if you go to the home page, return back the following text. Now if we mess with the URL at all, if we say, slash hello or something like that it's not going to find it. If we do a slash about, that's not going to work either. But if the user just simply goes to the homepage we do know what information to display there. And one last pro tip is that if you've ever seen this 127 number, it just simply means refer to the local machine, your computer that you're using to find this web content. This can also be replaced by local hosts up to you about how you want to specify either that number or local host. But thought you should be aware of those two being the same thing.