How to build a web application using Flask and deploy it to the cloud
Rajiv Ranjan
Python | Django | Flask | Fast API | REST API | PostgreSQL | EMM & MDM Developer. Experience in creating apps, scalable APIs, and data models, Api integration, debugging and maintaining code.
What is Flask?
It makes the process of designing a web application simpler. Flask lets us focus?on what the?users are requesting and what sort of response to give back.
Learn more about?micro frameworks.
How Does a Flask App Work?
The code lets us run a basic web application that we can serve, as if it were a website.
from flask import Flask
app = Flask(__name__)
@app.route("/")
def home():
return "Hello, Rajiv"
if __name__ == "__main__":
app.run(debug=True)
This piece of code is stored in our main.py.
Line 1:?Here we are importing the Flask module and creating a Flask web server from the Flask module.
Line 3: __name__ means this current file. In this case, it will be main.py. This current file will represent my web application.
We are creating an instance of the Flask class and calling it app. Here we are creating a new web application.
Line 5:?It represents the default page. For example, if I go to a website such as “google.com/” with nothing after the slash. Then this will be the default page of Google.
Line 6–7: When the user goes to my website and they go to the default page (nothing after the slash), then the function below will get activated.
Line 9:?When you run your Python script, Python assigns the name “__main__” to the script when executed.
If we import another script, the?if statement will prevent other scripts from running.?When we run main.py, it will change its name to __main__ and only then will that if statement activate.
Line 10:?This will run the application. Having?debug=True?allows possible Python errors to appear on the web page. This will help us trace the errors.
Let’s Try Running main.py
In your Terminal or Command Prompt go to the folder that contains your main.py.?Then do?py main.py?or?python main.py.?In your terminal or command prompt you should see this output.
The important part is where it says?Running on https://127.0.0.1:5000/.
127.0.0.1 means this local computer. If you do not know the meaning of this (like I didn’t when I started —?this article is really helpful), the main idea is that 127.0.0.1 and localhost refer to this local computer.
Go to that address and you should see the following:
More Fun with Flask
Earlier you saw what happened when we ran main.py with one route which was app.route(“/”).
Let’s add more routes so you can see the difference.
from flask import Flask
app = Flask(__name__)
@app.route("/")
def home():
return "Hello, Rajiv"
@app.route("/test")
def test():
return "Your test in progress ~~~"
if __name__ == "__main__":
app.run(debug=True)
In?lines 9–11. we added a new route, this time to?/test.
Now run the main.py again and go to?https://localhost:5000/test.
HTML, CSS, and Virtual Environments
HTML and Templates in Flask
First create a new HTML file. I called mine?home.html.
Here is some code to get you started.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask Tutorial</title>
</head>
<body>
<h1> Hello, Rajiv </h1>
</body>
</html>
领英推荐
Important Point To Remember
The Flask Framework looks for HTML files in a folder called?templates.?You?need to create a templates?folder and put all your HTML files in there.
Now we need to change our main.py so that we can view the HTML file we created.
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template("home.html")
@app.route("/test")
def salvador():
return "Your test in progress ~~~"
if __name__ == "__main__":
app.run(debug=True)
We made two new changes
Line 1:?We imported?render_template()?method from the flask framework.?render_template()?looks for a template (HTML file) in the templates folder. Then it will render the template for which you ask. Learn more about?render_templates() function.
Line 7:?We change the return so that now it returns?render_template(“home.html”). This will let us view our HTML file.
Now visit your localhost and see the changes:?https://localhost:5000/.
Moving Forward with Flask and virtualenv
Now that you are familiar with using Flask, you may start using it in your future projects. One thing to always do is use virtualenv.
Why use virtualenv?
You may use Python for others projects besides web-development.
Your projects might have different versions of Python installed, different dependencies and packages.
We use virtualenv to create an isolated environment for your Python project. This means that each project can have its own dependencies regardless of what dependencies every other project has.
Getting started with virtualenv
First, run this command on your command prompt or terminal:
python -m venv virtualenv
Wait a moment ~~~~~~~~ Now, your virtualenv created.
Activating the virtual environment
Now go to your terminal or command prompt. Go to the directory that contains the file called?activate. OR Go to the virtualenv directory --- type commnand
For Windows Environment:
name of virtual environmnet\Scripts\activate
For OS X and Linux Environment:
$ name of virtual environmnet/bin/activate
Now, your environment activated
The next step is to install flask on your virtual environment so that we can run the application inside our environment. Run the command:
pip install flask
Run your application and go to?https://localhost:5000/
We finally made our web application. Now we want to show the whole world our project.
(More information on virtualenv can be found in the following guides on?virtualenv?and?Flask Official Documentation)
Let’s send it to the Cloud
To show others the project we made, we will need to learn how to use Cloud Services.
Deploy Your Web Application to the Cloud