How to Make a Website with Python (Flask app tutorial)

I'm going to show you how to make a flask website with python3 and we're going to start with a very basic Hello World website and then make a static HTML website make it Dynamic with some variables and for loops and then finally make it a multi-page website and we're going to go through this workflow just so you understand the fundamental concepts at each step in the tutorial so that way by the end of the video you have a really good understanding of flask development now I'm going to use vulture a vulture server a VPS server in this tutorial you can use any server that you want but if you don't have a server I have free account credits for vulture below which will get you set up exactly as we're going to do in this video so if you have a server go ahead and Skip forward in the tutorial otherwise let's go ahead and get on into it all right I'm here at my vulture dashboard I'm going to deploy a server by clicking this button we just need a simple Cloud compute server regular performance you can pick any server that's located near you I'm going to pick Silicon Valley and then the I suppose the server image I'm going to pick Ubuntu 22.04 this five dollar per month plan is more than enough for our purposes I'm going to disable auto backups and then that looks good so I'll go ahead and deploy This Server it'll take a couple minutes and when this says it's ready then I'll catch back up with you okay now that our server is running as you can see right here let's click on into it and you may or may not get this message that it's still setting up if so you might have to wait a little bit longer but let's take note of our IP address our username and our password we're going to use this information to log in to the server via SSH so if you're on windows open up a command prompt and actually have other videos about SSH and everything which is what we're going to use to log in otherwise if you're on Mac you can open up a terminal window and you're going to Simply type SSH root which is the username at the IP address I'm going to copy that right here and then paste it in hit enter and then it's going to say do you want to continue connecting do you trust it yes hit enter and then the password for root is this right here so I'm going to copy that and then paste it in and we should be logged into our remote Ubuntu system so here we go let's make sure as is always good practice to update our list of packages with sudo apt update and then let's do a sudo apt upgrade to upgrade all the packages on the system and we don't even have to do anything because they're already up to date so next let's do pseudo apt install Python 3 dashvenv we're going to make a python virtual environment and this package is going to allow us to do that and the reason we do a python virtual environment is to make sure all of our code for our flask app is contained in its own area and we're not interfering with the system packages so with that installed we can do Python 3 dash mvenv for virtual environment and then we're going to make a virtual environment in a new director in our home directory called M and we're going to call the virtual environment Teton okay so that's going to go ahead and do its thing and when that's done we can activate the virtual environment with source and then we're going to go to that same path and B now it exists Teton bin activate okay so now we are in our python virtual environment if you do which python3 you'll see that it is getting the python3 binary from our virtual environment which is perfect okay so with that said we can install the flask package via the PIP package manager and we can do that with Pip install flask hit enter and that'll go ahead and install flask into our python virtual environment now let's go ahead and create our hello world flask app what we're going to do is make a directory with make the make dirt command and let's call it hike okay and let's go into the hike directory with CD and obviously there's nothing in here right now but let's make a file called Peak dot Pi okay I'm going to use the Vim text editor you can use Nano or another text editor I have other videos on how to use Vim if you're interested but for the sake of this tutorial let's just edit this file called peak.pi and what we're going to do is make pretty much the most basic hello world flask app that you can possibly have so you can follow along we're going to from do from flask import flask the flask object we're going to instantiate a flask object and assign it to the app variable so app equals flask and then we're going to pass in the name of this python module which we're currently in and that is in the underscore underscore name underscore underscore variable okay so we're going to add an approot a root for our app and it's going to be at slash so basically when anybody goes to our IP address maybe with a port colon port and then the slash this is what we're going to execute this this definition that we're going to this function that we're going to Define right now called Index this is what we're going to execute Okay and like I said it's going to be simple we're just going to Simply return the text hello world world yeah w-o-r-l-d okay something like that all right now the the only other gotcha here is um if we want to run this script directly without because this is just the development server we need this a little bit of code down here two lines if name just like we have above equals Main underscore underscore Main then we want to run the app with app dot run we're going to pass in the host as 0.0.0.0 and then the port as the default development port for flask which is 5000. now this is this is strictly for development purposes um I'll have another video about how to deploy it into a production environment but this is just allowing us to test it really quick without doing too much infrastructure changes so let's save that and let's run it let's run it and see what happens let's do Python and then Peak dot pi hit enter and it says if we go to our IP address colon 5000 we should be able to access the website so let's do that and unfortunately nothing's happening and I already know that's the case because we have if you're using vulture a firewall running okay so I'm going to control C out of that if we do ufw which is the Ubuntu firewall status oops ufw status you'll see that the only ports that are open right now are the ports for SSH which is Port 22. we have to tell UFO ufw to allow Port 5000 with ufw allow 5000. excuse me so now ufw status we see that Port 22 is open and Port 5000 is open so if we run our flask app again and visit in a web browser we will see Hello World just like we expected that's great and all but let's go ahead and make some actual HTML let's serve some HTML code instead of just plain text so let's control C out of our development server okay and let's make actually you know what let's make a directory called templates and inside that directory let's make a file called index.html and in here I'm just going to write some basic HTML structure so I'm going to have an HTML tag inside of there we'll have the body tag inside of there we'll have a header one element and this is going to say let's go on a hike okay you can do whatever you want this is just an example we'll close out all of our tags body and then HTML so this is some pretty basic HTML but it's going to show us let's go on a hike in big bold text and actually I just noticed these should both be header one elements okay so let's save that and now let's in our peak.pi file let's tell it to serve that template so let's open that back up and instead of returning hello world let's return render template which we're going to import in a second that index.html file so we also we imported flask before we also have to import render template okay so it's a function that comes with the PIP package that we installed with the flask package so it's going to render the index.html file so now if we save that and run I can use the up Arrow key to run that flask app again hit enter we're still accessible at this IP address colon 5000 if we refresh the page we'll see that we are now serving HTML let's go on a hike okay so that is a static HTML website let me kind of show you an introduction to passing variables into our template so I'm going to open this back up Ctrl C out of the development server in in our template index.html file let's add another line here let's make a paragraph element and we're going to use the variable syntax inside of this template which is open curly open curly and then the name of a variable which we will Define inside of peak.pi so let's do mountain and then close curly close curly and then close the paragraph element so basically we're going to Define a variable called Mountain inside of our peak.pi file and we're going to pass it in via the render template let's do that now so we'll save this file open up peak.pi and instead of just rendering the template template and passing in the index.html file we're also going to pass in that variable called mountain and let's call it Everest okay so this is going to be defined inside of our template so instead of seeing those curly brackets we should see a new line with Everest so let's try it out let's save that start up our development server with python.peak.pi refresh the page and indeed we see a new line with Everest now one mountain is cool but multiple mountains are even cooler so let's go ahead and make a for Loop to Loop over multiple mountains so let's first Define oops let's first Define our mountains inside of peak.pi so we can do that in a list variable so let's do mountains equal let's say Everest uh what do we got K2 and Kilimanjaro okay i l i m Kila Min Charo did I spell that right get a lot of crap for not spelling that right killer Manjaro okay um and now instead of passing in just one mountain like we did before let's pass in all of the mountains Okay so the mountain variable inside of the template will now be a list of these three mountains so over in our template let's go ahead and instead of just doing a paragraph element here let's actually oops instead of doing a paragraph element here let's go ahead and make an unordered list which is just bullet point so we'll Define that with UL we'll open up our UL tag here and then we'll close it down here and in between there we'll add our list items so kind of like we did before with the curly bracket curly bracket to access the variable we can do something similar curling bracket percent sign for a for Loop so four each mountain in the mountain variable we want to create we want to print out into the HTML or we want to define the HTML as a list element and then like we did before curly curly to access the variable Mt and then close curly curly close our list item and then finally last line we have an end the for Loop all right so let's pick this apart we have our standard if you if you get rid of all these curlies and percent signs we have a standard unordered list with a list item in it and as we saw before this is the Syntax for accessing a variable which we are defining in each iteration of our for Loop so Mountain has average K2 and Kilimanjaro and then that's going to execute three times the first time it's going to be Everest Kilimanjaro and then K2 that makes sense let's try it out let's save that execute python peak.pi our development server is running let's refresh the page and just like we expected we see that bulleted list with Everest K2 and Kilimanjaro okay I know what you're saying I spelled Kilimanjaro wrong I I see that now let me fix that quick and then after I do fix that let's um make a multi-page website which is actually pretty easy to do so what we're going to do let's start out start back in the template file so template index.html instead of just printing out a list item well we're gonna and and just the the value in there we're gonna actually make it a link to a page that's specific for each one of the mountains so you can link with the a tag in HTML so a href equals slash Mountain which is uh our new page m-o-u-n-t-a-i-n and then the name of the mountain itself kind of like we just did before and then the text that you're going to see okay so this is the link that's the link and then the text that you're going to see is the mountain itself just like that and then we'll close the a tag so thinking back to what standard HTML looks like this is simply just a link that goes to Mountain slash some mountains name and the text for the link is going to be the name of the mountain that looks good let's save that and that over in uh peak.pi we have to make just like we have a page for the index here we have to make another page for the mountains and we don't have to make an individual page for the mountain like each Mountain we don't have to page forever sk2 and Kilimanjaro we just have to make a generic Mountain page which is going to be a template for all of the mountains so we'll do app.root and like we specified in the index it's going to be slash Mountain slash Mt okay so we'll explain the syntax in a bit let me it'll make sense once we write it out and then we're going to define the mountain function and that's actually taking that argument of mountains so let me let me finish it like I said I was going to do return this is okay so basically what do we got going on here we have a a root for our app that is existing at slash mountain and then this is basically a way to define a variable called Mt in these bracket or in these uh less than greater than signs and then we're passing that variable into our Mountain function and we are printing it out just like we did in the first hello world example simple we don't need a template just we're going to print it out this is Everest this is Kilimanjaro this is K2 so that's all we should need for a multi-page website in flask so let's save that run our develop run our development server with python peak.pi and when we refresh the page these should all turn into links like it does here and now when we click on each one of these links we should go to this URL slash Mountain slash the name of the the mountain and that happens the URL slash mountain Everest this is Everest same thing for K2 slash Mountain K2 this is K2 and Kilimanjaro there we go now the last thing I want to point out here is this big warning this is a development server do not use it in production deployment the next video here is going to show you exactly how to take what we did today and put it into production deployment I'll see you guys over there subscribe thank you for watching thank you

Channel: Tony Teaches Tech

Views: 15,995

Keywords: flask app, flask app example, flask app run, flask python 3 tutorial, flask python tutorial, flask render_template, flask template, flask tutorial, flask tutorial python 3, how does flask work python, how flask works python, how to create a flask app in python, how to create a website using python flask, how to install flask on python, how to use flask python, python flask tutorial, run flask app, running flask app

Id: qaBo_IiE4Gc

Length: 17min 34sec (1054 seconds)

Published: Thu Mar 09 2023