Jump toUpdate content
How to Configure Flask on Ubuntu Bionic Beaver
- Flask
- Ubuntu-Bionic
- configure
- -
- compute
- -
- instances
Flask Overview
Flask is a web application framework written in Python. Flask is easy to get started with as a beginner because there is little boilerplate code for getting a simple app up and running.
- You have an account and are logged into the Scaleway console
- You have configured your SSH key
- You have created an Instance which is running Ubuntu Bionic Beaver (20.04 LTS)
Installing Python
If you don’t have Python installed on your computer, download the installer from the Python official website.
To make sure your Python installation is functional, you can open a terminal window and type python3, or if that does not work, just python.
python3
which returns
Python 3.8.10 (default, Nov 26 2021, 20:14:08)
[GCC 9.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
To exit the interactive prompt, you can type exit() and press Enter. On the Linux and Mac OS X versions of Python you can also exit the interpreter by pressing Ctrl-D. On Windows, the exit shortcut is Ctrl-Z followed by Enter.
Setting up Flask
In Python, packages such as Flask are available in a public repository, from where anybody can download and install them. The official Python package repository is called PyPI, which stands for Python Package Index.
(Optional) If you do not have
pip
installed, launchapt install python3-pip
Install Flask
pip install Flask
Create a folder called
FlaskApp
.mkdir FlaskApp
Navigate to the FlaskApp folder and create a file called
app.py
.cd FlaskApp
nano app.pyPaste the following content to the
app.py
file.from flask import Flask
app = Flask(__name__)
@app.route("/")
def main():
return "Welcome to the first Flask App!"
if __name__ == "__main__":
app.run(host='0.0.0.0')Save the changes and execute
app.py
.~/FlaskApp# python3 app.py
which returns
* Serving Flask app "app" (lazy loading)
* Environment: production
WARNING: Do not use the development server in a production
environment.
Use a production WSGI server instead.
* Debug mode: off
* Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)Open you web browser and type the
server_ip:port
It should display
If you run the server you will notice that the server is only accessible from your own computer, not from any other in the network. This is the default because in debugging mode a user of the application can execute arbitrary Python code on your computer. If you have the debugger disabled or trust the users on your network, you can make the server publicly available simply by adding —host=0.0.0.0 to the command line or editting your app.py
to match `app.run(host=‘0.0.0.0’)“ This tells your operating system to listen on all public IPs.
Creating URL routes
URL Routing makes URLs in your Web app easy to remember.
We will create several URLs routes:
- /hello
- /writers/
- /writers/tutorials/
Copy the code below and save it as
app.py
app = Flask(__name__)
@app.route("/")
def index():
return "Index!"
@app.route("/hello")
def hello():
return "Hello Cloud Riders!"
@app.route("/writers")
def writers():
return "Thanks to the Scaleway Tech Writers!"
@app.route("/writers/<string:name>/")
def getWriters(name):
return name
if __name__ == "__main__":
app.run(host='0.0.0.0')Restart the application using
python3 app.py
Try the URLs in your browser:
- http://server_ip:5000/
- http://server_ip:5000/hello
- http://server_ip:5000/writers
Each route should display what is defined in the
app.py
above, for instance http://server_ip:5000/hello displays:
Styling Flask Pages
In Flask, templates are written as separate files, stored in a
templates folder that is inside the application package. So after
making sure that you are in the FlaskApp
directory, create the
directory where templates will be stored.
As explained above, we created a new application called hello.py
running on port 80, with the following configuration:
from flask import Flask, flash, redirect, render_template, request,
session, abort
app = Flask(__name__)
@app.route("/")
def index():
return "Flask App!"
@app.route("/hello/<string:name>/")
def hello(name):
return render_template(
'test.html',name=name)
if __name__ == "__main__":
app.run(host='0.0.0.0', port=80)
Create a directory called templates
mkdir templates
Open a
test.html
file and paste the followingnano test.html
Paste the following
{% extends "layout.html" %} {% block body %}
<div class="block1">
<h1>Hello {{name}}!</h1>
<h2>Discover a New Cloud Experience</h2>
<p>
"The Disruptive Cloud Computing Platform: Deploy SSD Cloud Servers in
seconds!!"
</p>
</div>
{% endblock %}Open a
layout.html
file and paste the following<html>
<head>
<title>Website</title>
<style>
@import url(http://fonts.googleapis.com/css?family=Amatic+SC:700);
body{
text-align: center;
}
h1{
font-family: 'Amatic SC', cursive;
font-weight: normal;
color: #FD6C9E;
font-size: 2.5em;
}
</style>
</head>
<body>
{% block body %}{% endblock %}Launch the application
python3 hello.py
the application should display
Passing Variables
Let’s try and display random Scaleway catch phrase instead of always the same one. We will need to pass both the name variable and the quote variable.
In the
templates
directory, edit thetest.html
to match the following{% extends "layout.html" %} {% block body %}
<div class="block1">
<h1>Hello {{name}}!</h1>
<h2>Discover a New Cloud Experience</h2>
<p>{{quote}}</p>
</div>
{% endblock %}Save and exit
In the application called
hello.py
update the configuration to look like this:from flask import Flask, flash, redirect, render_template, request, session, abort
from random import randint
app = Flask(__name__)
@app.route("/")
def index():
return "Flask App!"
#@app.route("/hello/<string:name>")
@app.route("/hello/<string:name>/")
def hello(name):
# return name
quotes = [ "Pay as You Go - Enjoy a new cloud experience starting at 0.004euros per hour.",
"Multiple Datacenters - Maximize your services reliability by running your infrastructure through autonomous facilities spread across multiple regions.",
"Over 5 Tb/s of internet bandwidth - Deliver your content anywhere thanks to our multiple high-end transit providers and the best peerings.",
"Limitless Infrastructure Combinations - Additional volumes, movable IPs, security groups and hot snapshots are available on all our servers.",
"Developer Tools - Interact with Scaleway and take control of the cloud in minutes with our many tools, resources and third-party applications.",
"Hourly Billing - All our cloud resources are billed per hour with monthly capping. Scaleway pricing is predictable and transparent, with no hidden costs."$
randomNumber = randint(0,len(quotes)-1)
quote = quotes[randomNumber]
return render_template(
'test.html',**locals())
if __name__ == "__main__":
app.run(host='0.0.0.0', port=80)As you can notice, we updated the
quotes
variable with an array of multiples quotes. These can be accessed as quote[0], quote[1], quote[2] and so on. The function randint() returns a random number between 0 and the total number of quotes, one is subtracted because we start counting from zero.We also added a locals() function which always returns a dictionary of the current namespace.
Save and exit
Run the application
hello.py
. It will return one of these quotes at random.python3 hello.py