Setup a Flask Application in VS Code and Run a Basic App

everyone and welcome to the channel and today's video is going to be about how we can set up a flask environment in visual studio code and how we can run a basic application and so what is flask flask is just a basic uh flask is essentially just a python web application framework that you can use to create websites and apis so let's get right into the tutorial so before starting you will need to make sure that you'll have python installed on your machine and you can go ahead to the official python website and download the latest version and after and select the os that you have and perform the installation and after you've performed the installation to check if you've successfully installed python onto your machine you can go to the command prompt and type the command python hyphen iphone version and yeah so it says i have python 3.9.2 downloaded so we're good to go so once we have python set we can go to vs code open the folder open a folder and we can go to our desktop we can create a new folder here and i'm just going to call this new folder flask demo so once you've created this folder you can select it and the folder and the environment has opened up inside visual studio code so now what we want to do is create a virtual environment so you can think of a virtual environment like an isolated environment on your machine that you're creating so that all your python all so all the files related to this project like html files python files configuration files installations dependencies are all stored in one containerized isolated environment into your machine so that it doesn't interfere with other projects and other system settings so it's really uh useful when we it's really useful and really important that we have uh whenever we're working in a project that we have a virtual environment set so we'll be going ahead and setting that up first so we just need to press ctrl and tilde to launch the terminal and once we do that we can go ahead and type pip install virtual env so once we do that it's going to install and it says requirement already satisfied since i have since i already have it installed so once we do that we can create a virtual environment and we'll just call it virtual so the command is virtual env and then we need to name our virtual environment we need to give it a name so the standard convention is env so we'll because we'll be using that as well and now that we have created a virtual environment the next thing that we need to do is activate the environment or enter into it so what we'll be doing is we'll be writing the command env scripts slash activate.bat and uh so and as you all can see we have entered into our virtual environment here so just another note is that if you're on the map if you're on mac os the command to activate your virtual environment is source space env bin slash activate so yes keep that in mind if you're on mac os and yeah so then once you have everything ins once we have once we have our virtual environment created and once you've entered into the environment we can perform our installation so we can just go ahead and write pip install flask and uh yeah so the antivirus is just making some checks and uh but this is this will barely take around 10 seconds and yeah as you can see in the background here flask has been successfully installed with all the packages so yeah so that's great so essentially what we want to do is make all our installations in this virtual environment so that it is separate from our machine yeah so that's so then yeah so then we can see that it's been installed and yeah so it's been successfully installed so once you've installed flask what we want to do is we want to create our main app file so we're just going to call it app.py and here we're just going to write the most basic flask application to demonstrate how how we can get a quick flask application up and running so we can write from flask import flask and then we can just give it a name which is the name of the file app and yeah once i've done that we can just write app equal to flask underscore name yeah so once that is set this is just setting up the application for us and then we can use the app decorator and create a creator out so this route is the index root so this will be using this this index root is created so that when we launch our application we do not get a 404 error we get the content that we intended to so we can create this and then we can create a function to define what will be displayed so we do that and then we just return hello hello world yeah so once you've done that successfully we can yeah so just a little more is that we need to write if underscore name equal to equal to just kind of and app.run and we're just gonna set debug to true here so that we get to know the errors but remember when you're in a when you launch a flask application into a production environment you always have to set debug to false so once we do that we can go ahead and launch our application by typing in the command flask run and uh so again the antivirus is just making a check it's completely normal yeah so we can see the background that it's running at localhost port 5000 so we can just go ahead and open port 5000 on a browser and make sure it displays hello world so once this check is complete you can just go over here and we can see hello world is successfully displayed here yeah so once once that's done now what we want to do is we want to make sure this hello world is just coming from a html page we'll be exploring more static content and how we can go about that so we want to create a folder here called static no this is a file we're just going to go ahead and delete this and we want to create a called static and and inside we want to create a new folder called css and yeah so once we have that ready we can just yeah once you have that ready we can just create a new folder called templates or to within this uh separately we can just create a new folder called templates and we can have a new file inside that called index dot html so once index.html has been created we can what we can do is that we can just write some boilerplate html let's just change this to flask application and yeah and we can just have each one here that just displays hello world but we want to make sure that the hello world is coming from our template so we're just going to write hello world this is from the template yeah so we can go ahead and save this and we want to just add a little css so we can just go ahead here and we're going to create a file it's called index dot css you can write basic css here let's just say font style is italic and let's just give font family as times new roman great so this is set the html is set and we can just link this so we just got to make a few changes here we have to import render underscore template and uh then we also have to import your underscore fault to link the css file to the html file so once you've done that once you've done that we just need to change this render underscore template index.html and we are done with the app.py file so once we're done with this we can just go ahead to this page and we can just write the link command here the link tag sorry we can just write the link tag here and we can just say link link rel style sheet href and now here we're going to be using ginger syntax so ginger ginger syntax is uh just a template language that's used in flask to render content back to the html file so we can just do url underscore for the function that we had imported earlier and we can just write static here and then what we can then what we need to write is we need to give the file name so we give the file name as along with the directory so we need to give the file name css slash index dot css and uh we should be good to go so yeah just need to shut this yeah so once this is done the html should have been the css should have applied to the html file let's run it and check yeah so we can see that it has been italicized and it's time zeromen so i hope this video gave you a clear explanation on how you can set up a basic flask application and run the basic app and yeah so thanks a lot for watching and please like the video and subscribe to the channel it really motivates me to put more content

Channel: Code Void

Views: 148,168

Keywords:

Id: GHvj1ivQ7ms

Length: 10min 20sec (620 seconds)

Published: Mon Apr 05 2021