3: Hello Flask


Where are you going to do your coding? If you try to run your app, what other software is required? How are you going to save or publish your work? Configuring your IDE, dependencies, and VCS is essentially your workspace.

Learning Targets

  • I can set up a Python web development environment.

  • I can create and view a blank Flask app.

Before we get into the structure and mechanics of our code, let’s build the most basic of Flask apps. It’ll help set some context as we then start to learn particular skills. It’s important that you start from scratch as it builds confidence knowing you can start from the ground-up.

Dev Environment

One of the hardest things in all of programming is setting up your development environment.

Cloud IDE or Local?

Properly configuring a development environment can be a real pain. Rather than installing your language interpreters and dependencies, you can use a website to remote control a server preconfigured with most of the tools you need.

Linux Shell Commands

Practice CLI on Codecademy

  1. pwd -show the location where you are in the terminal

  2. cd -is used to navigate between directories or folders

  3. mkdir -is used to make a new directory

  4. ls -list structure, show the list of items you have

  5. clear -clears the screen

  6. mv “name of item” -moves items around the directory

  7. cat - catenate, lets you read files

  8. touch “name of item”- create a new, empty file

Virtual Environments

Managing dependencies will be a constant challenge in programming. Over and over again, the work you’re doing will need to access other files. Keeping the relationships organized and making sure the necessary connections are always functioning is work.

This varies a lot depending on your development environment

  1. Before you do anything, update your installer tool: sudo apt-get update

  2. Get the latest version of python that apt-get easily allows, (manually installing the very latest version never seems worth it). This is likely to change a lot: sudo apt-get install python3.6 python3.6-venv python3.6-doc binfmt-support

  3. Tell our new Python to create a venv: python3.6 -m venv /home/ubuntu/workspace/venv

  4. Enable venv so we install and check for our libraries in this folder: source venv/bin/activate

  5. Make sure your python package installer is update: pip install --upgrade pip

  6. Tell python’s package manager to install the Flask library: pip install flask

  7. Create the file if it’s not already there: touch hello_flask.py

Environment Variables

In order for our flask run to know which file to use, we specify with export FLASK_APP=flasky.py

We use .env files to save our environmental variables so we don't have to export them. You can totally use .env files instead of Flaskinni's use of private.py.

Hello Flask

  1. Right click in the flask_init folder and select create new file called hello_flask.py. If it’s already created, just double click to open the file

  2. Type this into the editor:

import os # connects the OS library so we can lookup our own IP address
from flask import Flask # this connects our framework of tools we'll need
app = Flask(__name__) # here we create our app in memory. It's maybe the most important line of code
@app.route('/') # if anyone tries to go to the homepage, their request will be routed to the method below
def index():
return 'Hello from Flask'
if __name__ == '__main__':
host = os.getenv('IP', '')
port = int(os.getenv('PORT', 5000))
app.debug = True
app.run (host=host, port=port)

What's Missing?

If you can understand some of the elements that are missing from this simple example, you’ll have a greater appreciation for the core of our Flask app and the many components that we’re about to study.

No Templates and Few Routes

Our initial application, hello flask, had one singular route @app.route('/') which is very basic. Just a homepage, that’s it. On the other side, “Flaskinni” includes numerous routes so you see blog and account pages just to name a few. Each route in Flaskinni calls templates with method calls like render_template('index.html'). These are just as their name suggests, templates or outlines of the final HTML page a user sees. Templates are a big deal (⅓ of our whole MVT structure).

Want to know the difference between ‘GET’ and ‘POST’? You see them mentioned as a kwarg on line 16 in the picture below? Well, you should know the name Tim Berners Lee. GET and POST are two of the HTTP requests that travel over our network and provide us the Internet. Simply put, GET is a request for a page and POST is when the user is submitting a form. Knowing the types of HTTP requests gets really important if you ever decide to use Flask-RESTful to use this web app to power mobile apps, too.

No Models or Database

In the Hello Flask application, there is no database or model schema being used. There are no objects like user, admin, blog post in the app. Also in the Hello Flask app, we had no database, but in Flaskinni there is a database, and a schema that shows how the database will be set up. Also in Flaskinni there is code that creates database tables and is able to send the data to the database in the format laid out by the schema.

No Interactivity

Our initial Hello Flask application had no interactivity whatsoever as illustrated by the one simple message that is sent to the user. Our app only responds to GET requests, never a POST request. In other words, the user is only getting static information and is never sending information back to the server or requesting more specific information. For example in the Flaskinni application a user can post a blog post or can request or a certain blog post.

Few Libraries

Libraries are expansion packs, they're files containing compiled code that allow the app to reference them later in other files. Libraries allow the app the run faster and have more capabilities. Instead of calling methods over and over while writing the app, the user can call the library file. The linking of libraries allows a file to gain the capabilities of the library module without having to define those methods again.