How to Configure Flask on Ubuntu Xenial

• account

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.

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
Copy code

which returns

Python 3.5.2 (default, Nov 23 2017, 16:37:01)
[GCC 5.4.0 20160609] on linux
Type "help", "copyright", "credits" or "license" for more information.
Copy code

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.

1. (Optional) If you do not have pip installed, launch

   apt install python-pip
   Copy code

2. Install Flask

   pip install Flask
   Copy code

3. Create a folder called FlaskApp.

   mkdir FlaskApp
   Copy code

4. Navigate to the FlaskApp folder and create a file called app.py.

   cd FlaskApp
   nano app.py
   Copy code

5. Paste 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')
   Copy code

6. Save the changes and execute app.py.

   ~/FlaskApp# python app.py
   Copy code

   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)
   Copy code

7. Open you web browser and type the server_ip:port

   It should display

   

Creating URL routes

URL Routing makes URLs in your Web app easy to remember.

We will create several URLs routes:

• /hello
• /writers/
• /writers/tutorials/

1. 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')
   Copy code

2. Restart the application using

   python app.py
   Copy code

   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)
Copy code

1. Create a directory called templates

   mkdir templates
   Copy code

2. Open a test.html file and paste the following

   nano test.html
   Copy code

3. 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 %}
   Copy code

4. 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 %}
   Copy code

5. Launch the application

   python hello.py
   Copy code

   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.

1. In the templates directory, edit the test.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 %}
   Copy code

2. Save and exit

3. 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)
   Copy code

   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.

4. Save and exit

5. Run the application hello.py. It will return one of these quotes at random.

   python hello.py
   Copy code