NOTE This file was generated by Descript 1 00:00:00,480 --> 00:00:02,190 Hi guys and welcome back. 2 00:00:02,220 --> 00:00:06,300 In this section we're going to start learning about Flask and 3 00:00:06,300 --> 00:00:08,700 MongoDB for backend development. 4 00:00:08,700 --> 00:00:12,210 So in this video, let me show you how to get started with Flask and we'll 5 00:00:12,210 --> 00:00:15,200 create a hello world app using Flask. 6 00:00:16,249 --> 00:00:20,863 Flask is a light weight WSGI application framework. 7 00:00:21,053 --> 00:00:24,495 A framework is a code library that allows us to write application 8 00:00:24,495 --> 00:00:25,785 code a bit more easily. 9 00:00:26,055 --> 00:00:29,235 And Flask helps us build reliable, scalable, and 10 00:00:29,235 --> 00:00:31,035 maintainable web applications. 11 00:00:31,515 --> 00:00:34,895 Flask is known as a micro framework because it doesn't do much. 12 00:00:35,105 --> 00:00:40,805 It allows us to receive user data and send data back as per user requests. 13 00:00:41,296 --> 00:00:44,596 It does a few more things and it comes with a few features that we 14 00:00:44,596 --> 00:00:45,916 will explore throughout the course. 15 00:00:46,216 --> 00:00:50,176 But one of the main benefits of Flask is that because it doesn't do that much for 16 00:00:50,176 --> 00:00:55,426 you, you can write your applications in pure Python pretty easily, and it doesn't 17 00:00:55,426 --> 00:00:59,446 tell you how you should be writing your code, unlike some other frameworks. 18 00:00:59,915 --> 00:01:02,585 So let's get started with learning Flask. 19 00:01:03,054 --> 00:01:06,744 You'll need to install Python 3 in your environment and 20 00:01:06,744 --> 00:01:08,364 create a virtual environment. 21 00:01:08,604 --> 00:01:13,164 I'm using pyenv to do this, and I'm going to leave a blog post linked in 22 00:01:13,164 --> 00:01:16,194 the resources section of this lecture, where you can learn more about using 23 00:01:16,194 --> 00:01:18,564 pyenv to manage your Python versions. 24 00:01:19,081 --> 00:01:22,861 Once you've got pyenv installed or any other way of 25 00:01:22,861 --> 00:01:23,911 managing your Python versions. 26 00:01:23,911 --> 00:01:25,321 You can create a virtual environment. 27 00:01:25,621 --> 00:01:30,131 I'm going to do that with pyenv exec python -m venv .venv. 28 00:01:30,669 --> 00:01:32,499 And that is going to create a virtual environment. 29 00:01:32,559 --> 00:01:36,279 Notice that earlier on, VS Code told me that I had no Python interpreter 30 00:01:36,279 --> 00:01:40,299 selected, but now it tells me that a virtual environment has been created. 31 00:01:40,299 --> 00:01:42,373 We're going to select that and then we can close this. 32 00:01:42,840 --> 00:01:46,290 That just tells VS code that we have a virtual environment, a Python 33 00:01:46,290 --> 00:01:48,540 version selected for this project. 34 00:01:48,720 --> 00:01:52,590 And whenever we install anything in that virtual environment, it's going to see it 35 00:01:52,590 --> 00:01:57,788 in the application development and it's going to allow us to use the IntelliSense. 36 00:01:58,298 --> 00:02:01,628 We do have to activate the virtual environment here in the terminal 37 00:02:01,628 --> 00:02:05,708 as well so we can do that with source .venv/Scripts/activate, 38 00:02:06,118 --> 00:02:09,838 and then we're activated here and we can do pip install Flask. 39 00:02:10,501 --> 00:02:16,411 Once that's done, we can close this and we can start writing our Flask app here 40 00:02:16,531 --> 00:02:18,631 in a file called app.py that I've created. 41 00:02:18,681 --> 00:02:20,631 That is the default for Flask as well. 42 00:02:21,161 --> 00:02:24,791 Here, what we were going to do is say from Flask, from the Flask package, 43 00:02:24,821 --> 00:02:31,151 we're going to import the Flask class and the Flask class is what makes up 44 00:02:31,181 --> 00:02:34,031 the main part of any Flask program. 45 00:02:34,511 --> 00:02:38,591 We have to do app equal Flask, and then pass in the name of the app. 46 00:02:38,621 --> 00:02:40,901 I'm going to use dunder name as the name. 47 00:02:41,611 --> 00:02:45,301 And what this does is it creates a new Flask app or a new Flask object, 48 00:02:45,661 --> 00:02:47,911 and it gives it a name that is unique. 49 00:02:48,001 --> 00:02:52,261 And here I'm using dunder name because dunder name is always unique in Python. 50 00:02:52,321 --> 00:02:54,511 If you're not sure what dunder name is, don't worry. 51 00:02:54,511 --> 00:02:57,961 It's just a unique name that every file in Python has. 52 00:02:57,961 --> 00:03:00,691 And it can be one of several different names. 53 00:03:00,691 --> 00:03:03,611 But for the purposes of this video, it doesn't really matter. 54 00:03:04,108 --> 00:03:08,418 Then we're going to do @app.route and we're going to pass in the route 55 00:03:08,508 --> 00:03:12,398 of this endpoint and we're going to do, for example, hello world. 56 00:03:13,028 --> 00:03:14,078 I'm going to define the function here. 57 00:03:14,078 --> 00:03:17,488 I'm going to return hello world as a string. 58 00:03:17,628 --> 00:03:19,111 So what's happening in here. 59 00:03:19,684 --> 00:03:24,874 First of all, we've told the app that we want to register an endpoint to it. 60 00:03:24,954 --> 00:03:27,304 And the end point is just the forward slash end point. 61 00:03:27,834 --> 00:03:30,594 And under this decorator, which this is what it is. 62 00:03:30,894 --> 00:03:32,154 We're going to define a function. 63 00:03:32,184 --> 00:03:36,564 This function will run and its returned value sent to the user 64 00:03:36,894 --> 00:03:39,174 whenever the user visits this endpoint. 65 00:03:39,394 --> 00:03:43,814 So now what we have to do is run the Flask app and see what happens when we do this. 66 00:03:44,311 --> 00:03:45,825 There are a couple of things we want to do. 67 00:03:45,825 --> 00:03:50,355 The first thing is we want to tell Flask before we run it, which Python 68 00:03:50,355 --> 00:03:53,025 file contains the Flask app definition. 69 00:03:53,445 --> 00:03:57,758 So we're going to do export FLASK_APP app.py. 70 00:03:58,302 --> 00:04:01,842 If you're using Bash, which is what you'll be using, if you are 71 00:04:01,872 --> 00:04:06,402 on WSL or Mac or Linux . In my case, I'm using it here because 72 00:04:06,402 --> 00:04:07,978 I've got GIT for windows installed. 73 00:04:08,308 --> 00:04:11,453 Then you can do export Flask app equal app. 74 00:04:11,903 --> 00:04:16,853 But if you're using the cmd.exe app on windows, you're going to do set instead 75 00:04:16,853 --> 00:04:19,363 of exports set Flask app equal app.py. 76 00:04:19,943 --> 00:04:22,763 And if you're using power shell, you're going to do $env: 77 00:04:23,323 --> 00:04:26,633 FLASK_APP = "app.py" like that. 78 00:04:26,903 --> 00:04:27,173 Okay. 79 00:04:27,173 --> 00:04:29,903 So that's how you set environment variables in the powershell. 80 00:04:30,410 --> 00:04:31,790 But here we're using bash. 81 00:04:31,820 --> 00:04:36,440 So we continue and we do export FLASK_ENV = development. 82 00:04:36,470 --> 00:04:38,330 That's the other thing that we have to use. 83 00:04:38,360 --> 00:04:39,710 And again, you're using set. 84 00:04:39,770 --> 00:04:44,129 If you're using cmd.exe Or the $env notation, if you're using PowerShell. 85 00:04:44,714 --> 00:04:47,954 Once that's done and making sure you are in your virtual environment, your 86 00:04:47,954 --> 00:04:49,154 virtual environment is activated. 87 00:04:49,424 --> 00:04:51,074 We're going to do Flask run. 88 00:04:51,524 --> 00:04:57,074 When we do Flask run that instructs the Flask command line interface to go into 89 00:04:57,074 --> 00:04:59,234 Flask app and find the Flask app there. 90 00:04:59,504 --> 00:05:03,584 And then it starts a local server that allows Flask to run. 91 00:05:03,824 --> 00:05:09,014 And we can interact with this web address there to make requests 92 00:05:09,014 --> 00:05:10,124 to the Flask application. 93 00:05:10,607 --> 00:05:13,127 You can see that I've brought up this browser window here. 94 00:05:13,187 --> 00:05:14,837 And when I access the page. 95 00:05:14,837 --> 00:05:16,127 We get "Hello world!" 96 00:05:16,127 --> 00:05:16,517 back. 97 00:05:17,064 --> 00:05:21,444 Okay, let's stop this app and I'm going to add a different end point. 98 00:05:21,474 --> 00:05:23,484 Instead of just the forward slash end point. 99 00:05:23,484 --> 00:05:26,994 I'm going to add slash hello, and we're going to type Flask run again. 100 00:05:27,327 --> 00:05:31,707 Now, if we go back to the browser and I refresh this page, we're 101 00:05:31,707 --> 00:05:33,447 going to get an error - not found. 102 00:05:33,837 --> 00:05:38,607 That's because by default, when you don't have anything at the back of the URL. 103 00:05:38,757 --> 00:05:40,617 That means forward slash. 104 00:05:40,917 --> 00:05:44,187 And here in this app, we don't have a forward slash end point 105 00:05:44,187 --> 00:05:47,307 defined what we have is slash hello. 106 00:05:47,817 --> 00:05:51,477 So we need to access slash hello, since that is what the Flask app has. 107 00:05:52,047 --> 00:05:56,727 If we do that, we now get this function being run and we get the return value. 108 00:05:57,222 --> 00:05:58,812 Let's make this a little bit more exciting. 109 00:05:58,812 --> 00:06:03,732 We're going to return a HTML string instead of just a normal string. 110 00:06:04,072 --> 00:06:08,885 So we're going to do @app.route and we're going to define a fancy endpoint and 111 00:06:08,885 --> 00:06:10,715 this is going to be hello world fancy. 112 00:06:10,745 --> 00:06:11,465 Just like that. 113 00:06:11,615 --> 00:06:15,755 And here we're going to return a multiline string. 114 00:06:15,969 --> 00:06:18,999 That is going to contain some HTML text. 115 00:06:19,309 --> 00:06:22,409 Okay you can see we've got the HTML there, the h1, which 116 00:06:22,409 --> 00:06:23,849 has greetings and hello world. 117 00:06:24,139 --> 00:06:27,569 Note that this is not a very well formed HTML string. 118 00:06:27,599 --> 00:06:30,389 There is no doc type, for example, there's no head element. 119 00:06:30,659 --> 00:06:31,469 But it doesn't really matter. 120 00:06:31,469 --> 00:06:33,179 The browser will be able to figure it out. 121 00:06:33,709 --> 00:06:36,499 And once we've got this and we save. 122 00:06:36,739 --> 00:06:40,549 We're going to be able to request either the forward slash end point, 123 00:06:40,579 --> 00:06:44,269 which will give us hello world or the forward slash fancy endpoint, 124 00:06:44,269 --> 00:06:46,189 which will give us this HTML string. 125 00:06:46,724 --> 00:06:50,314 Noticed that as soon as I saved, the debugger restarted. 126 00:06:50,344 --> 00:06:54,604 That's because earlier on we set the FLASK_ENV to development, and that 127 00:06:54,604 --> 00:06:57,784 tells Flask that whenever we make a change, we should refresh the server. 128 00:06:57,904 --> 00:07:02,194 So normally we don't have to restart the server except for specific circumstances. 129 00:07:02,694 --> 00:07:04,014 So we're now restarted. 130 00:07:04,224 --> 00:07:07,014 Let's go over to our end point and see what we get. 131 00:07:07,484 --> 00:07:08,324 So here we are. 132 00:07:08,444 --> 00:07:10,004 I am in slash hello. 133 00:07:10,034 --> 00:07:13,424 Naturally, this gives us a not found because our end points are now 134 00:07:13,554 --> 00:07:15,374 forward slash and forward slash fancy. 135 00:07:15,734 --> 00:07:19,244 So we're going to go back to forward slash and we get hello world as we expect. 136 00:07:19,574 --> 00:07:23,804 And we can go to slash fancy and we get the greetings and the hello world. 137 00:07:24,340 --> 00:07:29,439 The browser received a HTML string and the browser converted that HTML 138 00:07:29,439 --> 00:07:33,919 string into the HTML representation of that or what that would evaluate to. 139 00:07:33,999 --> 00:07:37,959 So here, we've got an h1 element and here we've got a paragraph element. 140 00:07:38,455 --> 00:07:42,055 You can double check that by inspecting this and seeing what's there. 141 00:07:42,535 --> 00:07:46,585 And you can see now we have the HTML element, the empty head that 142 00:07:46,585 --> 00:07:50,665 the browser created for us and then the h1 and the paragraph. 143 00:07:52,150 --> 00:07:54,130 All right, so that's everything for this video. 144 00:07:54,130 --> 00:07:56,920 We've created our hello world app with flask. 145 00:07:57,070 --> 00:07:59,620 I hope you've enjoyed it and I'll see you in the next one.