NOTE This file was generated by Descript 1 00:00:00,256 --> 00:00:01,545 Hi guys and welcome back. 2 00:00:01,576 --> 00:00:05,926 We're starting with our microblog work here for backend development. 3 00:00:05,926 --> 00:00:09,286 So we're going to set up the microblog project with Flask 4 00:00:09,496 --> 00:00:12,286 and there's a few things that we have to do, so let's get to it. 5 00:00:12,822 --> 00:00:17,092 The first thing we want to do when we start a Flask app that has templates is 6 00:00:17,092 --> 00:00:19,582 we want to create the templates folder. 7 00:00:20,058 --> 00:00:23,778 Templates must be the folder name as that's the default that Flask 8 00:00:23,778 --> 00:00:27,049 is going to expect and it's where it's going to look for templates. 9 00:00:27,229 --> 00:00:30,618 So we'll move home.html over to our templates. 10 00:00:31,105 --> 00:00:34,645 Then we also want to create a static folder and this should also 11 00:00:34,645 --> 00:00:39,945 be in the same folder as templates and as app.py will be in a moment. 12 00:00:40,488 --> 00:00:43,608 Inside static, we want to create a css folder. 13 00:00:43,848 --> 00:00:44,928 Although this is optional. 14 00:00:44,928 --> 00:00:48,108 You don't have to call it css if you don't want but it's where I'm going to 15 00:00:48,108 --> 00:00:54,088 put my styles.css . Then my logo, I'm just going to put directly into static. 16 00:00:54,611 --> 00:00:58,061 So now we have the static folder which contains a CSS folder. 17 00:00:58,361 --> 00:01:02,501 In there, we've got styles.css and out of there but still inside 18 00:01:02,511 --> 00:01:04,271 static, we've got our logo. 19 00:01:04,748 --> 00:01:06,548 Then we're going to create app.py. 20 00:01:06,871 --> 00:01:09,391 This is where our Flask app code is going to live. 21 00:01:09,916 --> 00:01:14,046 Notice that VSCode tells me that we don't have a Python interpreter selected. 22 00:01:14,346 --> 00:01:15,396 And this is a very good point. 23 00:01:15,486 --> 00:01:19,416 We have to create a virtual environment and we have to tell VSCode or 24 00:01:19,416 --> 00:01:23,166 PyCharm, if you're using PyCharm, which virtual environment to use. 25 00:01:23,466 --> 00:01:27,496 So I'm going to do pyenv local 3.9.0. 26 00:01:27,516 --> 00:01:29,436 That's the Python version we're using. 27 00:01:29,526 --> 00:01:32,826 And I'm using pyenv to manage my Python versions, but you don't have 28 00:01:32,826 --> 00:01:34,386 to use pyenv if you don't want. 29 00:01:34,764 --> 00:01:38,704 What pyenv local 3.9.0 does, is it creates this .python-version 30 00:01:38,754 --> 00:01:41,434 in the directory that says 3.9.0. 31 00:01:41,724 --> 00:01:47,514 And now whenever I do pyenv exec, this is going to run whatever command 32 00:01:47,514 --> 00:01:54,289 I type after this using the Python 3.9.0 version in this sub shell. 33 00:01:54,579 --> 00:01:59,349 So here I can do Python for example and that is going to run Python 3.9.0. 34 00:01:59,718 --> 00:02:03,568 What this does is it runs the Python command, but make sure that it 35 00:02:03,568 --> 00:02:07,338 is Python 3.9.0, that it's going to be used with this executable. 36 00:02:07,843 --> 00:02:09,433 Let me just quit that and clear. 37 00:02:09,463 --> 00:02:16,633 And what I'll do is pyenv exec python -m venv to use the venv built-in module 38 00:02:16,633 --> 00:02:17,863 that creates virtual environments. 39 00:02:18,073 --> 00:02:20,083 And I'm going to call it .venv. 40 00:02:20,593 --> 00:02:24,193 So again, this runs the venv module that comes with Python and creates a new 41 00:02:24,193 --> 00:02:27,033 virtual environment using Python 3.9.0. 42 00:02:27,313 --> 00:02:29,453 And it calls the virtual environment .venv. 43 00:02:29,833 --> 00:02:31,783 And you can see that has been created up here on the left. 44 00:02:31,993 --> 00:02:36,253 The reason why I call it .venv and not just venv is because the dot 45 00:02:36,463 --> 00:02:38,593 folders are normally hidden folders. 46 00:02:38,803 --> 00:02:41,143 So that's why I'm putting the dot in front. 47 00:02:41,661 --> 00:02:45,921 Now the window that suggested I select that new virtual environment 48 00:02:45,921 --> 00:02:47,991 as a virtual environment has disappeared because I talked too much. 49 00:02:48,201 --> 00:02:52,761 So I'm going to select a interpreter there and I'm just going to type in .venv and 50 00:02:52,761 --> 00:02:56,931 you can see VSCode will then tell me that this is the environment that we're using. 51 00:02:57,434 --> 00:02:59,204 So now we've got the virtual environment. 52 00:02:59,204 --> 00:03:02,384 We've got our folders and we've got our Python file. 53 00:03:02,384 --> 00:03:05,414 The last thing we have to do is we have to install Flask. 54 00:03:05,414 --> 00:03:09,664 The first thing to do in order to install Flask is to activate the venv. 55 00:03:09,974 --> 00:03:14,694 So we'll do on windows source .venv/Scripts/activate. 56 00:03:15,014 --> 00:03:20,626 If you are on Mac or Linux, this will be .venv/bin/activate. 57 00:03:21,039 --> 00:03:23,919 So we're going to activate that and you see we get these brackets in 58 00:03:23,919 --> 00:03:27,129 front of every line and that means we are in the virtual environment. 59 00:03:27,159 --> 00:03:30,526 I'm going to clear this and then we can do pip install Flask. 60 00:03:30,993 --> 00:03:34,503 Now pip is the pip inside the virtual environment because we've 61 00:03:34,503 --> 00:03:35,853 activated the virtual environment. 62 00:03:35,853 --> 00:03:39,023 So this is going to install it, only locally for this venv. 63 00:03:39,509 --> 00:03:42,599 You can see that it's installs a few things that Flask depends on as well. 64 00:03:42,929 --> 00:03:46,619 And now that we've got the virtual environment selected, we've got the 65 00:03:46,619 --> 00:03:50,789 Flask library installed and we've got it selected here in VScode. 66 00:03:51,089 --> 00:03:56,429 We can do from flask import Flask and Visual Studio Code should not complain 67 00:03:56,759 --> 00:04:00,419 if all has worked well, because it knows that flask is installed in the 68 00:04:00,419 --> 00:04:02,039 virtual environment you've selected. 69 00:04:02,541 --> 00:04:05,595 The first steps for a flask app is just an app equal Flask 70 00:04:05,615 --> 00:04:07,475 and then dunder name in there. 71 00:04:07,475 --> 00:04:09,425 And we're going to create our end point. 72 00:04:09,815 --> 00:04:14,261 Which is just going to be home let's say which returns, render template 73 00:04:14,261 --> 00:04:15,941 of the template that we've created. 74 00:04:15,941 --> 00:04:17,511 So that's home.html. 75 00:04:17,531 --> 00:04:20,231 So we're going to do home.html in there. 76 00:04:20,751 --> 00:04:22,561 Now we do have to import render_template. 77 00:04:22,581 --> 00:04:23,571 So let's do that. 78 00:04:23,661 --> 00:04:27,141 And we also have to make sure that this is assigned an end point. 79 00:04:27,311 --> 00:04:30,104 So we do app.route forward slash. 80 00:04:30,604 --> 00:04:35,884 Here we've created the function that will run when a user visits this endpoint and 81 00:04:35,884 --> 00:04:39,544 that endpoint will render the template home dot HTML that we've got in here. 82 00:04:39,874 --> 00:04:44,824 So when we run this app and we visit the URL, we should see the 83 00:04:44,824 --> 00:04:46,264 exact same thing printed out. 84 00:04:46,504 --> 00:04:49,624 Except for a small issue, which I'll come to in just a second. 85 00:04:49,924 --> 00:04:52,267 So first of all, let's do flask run. 86 00:04:52,267 --> 00:04:55,063 Make sure that you have your virtual environment activated and then copy 87 00:04:55,063 --> 00:04:59,723 these here, go into there and you can see we've got the site up and running. 88 00:05:00,083 --> 00:05:02,003 However, there are a few issues. 89 00:05:02,033 --> 00:05:05,153 The first one is the CSS is not being enabled. 90 00:05:05,393 --> 00:05:06,803 So we can go into the template. 91 00:05:07,043 --> 00:05:09,793 Notice that here we've got styles.css, but what we want to 92 00:05:09,793 --> 00:05:14,733 do is /static/css/styles.css. 93 00:05:15,493 --> 00:05:19,433 The slash static end point is not defined in app.py. 94 00:05:20,323 --> 00:05:24,403 It is the default end point for static assets and it matches 95 00:05:24,523 --> 00:05:26,383 the name of this static folder. 96 00:05:26,713 --> 00:05:31,513 So you must call your static folder static and then Flask will automatically 97 00:05:31,543 --> 00:05:36,793 open it up and make anything inside it available to request via the browser 98 00:05:37,063 --> 00:05:39,793 just by preceding it with slash static. 99 00:05:40,303 --> 00:05:41,533 So this will now work. 100 00:05:41,533 --> 00:05:43,733 If we restart our app and we refresh the page. 101 00:05:43,753 --> 00:05:45,583 You can see we've got this in here. 102 00:05:46,096 --> 00:05:48,136 Things are not looking all that great. 103 00:05:48,406 --> 00:05:51,076 But that's just because we are a bit zoomed in, in there. 104 00:05:51,256 --> 00:05:51,946 Let me zoom out. 105 00:05:52,216 --> 00:05:53,266 And that looks a little bit better. 106 00:05:53,546 --> 00:05:54,646 Still not perfect though. 107 00:05:54,646 --> 00:05:56,986 We do need the logo as well. 108 00:05:57,196 --> 00:06:00,626 So let's grab that where we've got logo.svg. 109 00:06:00,646 --> 00:06:04,206 We do need slash static slash logo.svg. 110 00:06:04,696 --> 00:06:07,442 Once again, let's restart and refresh this. 111 00:06:07,442 --> 00:06:09,002 And now we've got that in there. 112 00:06:09,542 --> 00:06:11,852 Quite a lot of changes that we've done in this lecture. 113 00:06:11,852 --> 00:06:14,522 We've created the static and templates folder. 114 00:06:14,552 --> 00:06:17,582 We've created app.py which renders the template. 115 00:06:17,912 --> 00:06:21,182 We've created the virtual environment and installed Flask in it. 116 00:06:21,722 --> 00:06:24,392 And then we've ran the app to make sure it works. 117 00:06:24,883 --> 00:06:27,793 We've also had to change a couple of things in the HTML template 118 00:06:27,913 --> 00:06:30,283 to make sure that we're accessing the correct static assets. 119 00:06:31,167 --> 00:06:31,467 All right. 120 00:06:31,467 --> 00:06:32,937 Thank you for joining me in this video. 121 00:06:32,997 --> 00:06:33,927 I hope you've enjoyed it. 122 00:06:33,957 --> 00:06:36,027 And you've got your micro blog set up. 123 00:06:36,297 --> 00:06:37,887 Let's continue in the next one. 124 00:06:38,217 --> 00:06:38,877 I'll see you there.