Getting the App Engine running with Flask: Part 1

Source: Google Images

In the previous article, we pondered why and how Google App Engine could be an awesome solution for hosting your web applications and backends. Now, let us see it in action!

Let’s try to host a simple Flask application on the App Engine to see how it works out.

To deploy the application on App Engine, we have two major steps to take care of:-

1. Preparing your app (which we will cover in this article)
2. Deploying it

Let’s go through these steps one by one. This article takes care of the former.

Step 1: Preparing your App:-

Now, before we start preparing, let me introduce you to (drumroll, please) Flask if you haven’t heard of it:-

Introduction to Flask

Flask is a Python-based framework to host web applications. It’s lightweight, flexible, and very friendly for people new to the back-end. For more details, feel free to check out their documentation!

Welcome to Flask — Flask Documentation (1.1.x) (palletsprojects.com)

The application which we are going to deploy now is a simple one. The app asks the user for a name and then displays a greeting with that name. The initial file structure of the application is given in the following picture:-

Initial file structure for the app

In the folder demo-app , we have two files (app.py, requirements.txt) and a folder (templates). Inside the templates folder, we have two files (index.html and mainpage.html). Let’s go through each file one by one:-

app.py

The app.py is the heart of the application. It contains the code that runs the server, and responsible for serving clients with web content. The code inside app.py is the one you see next:-

The app runs on port 8080, runs in debug/development mode (which we can turn off in production if we want to), and has two routes:-

• GET /: This route renders the page that asks for the user’s name and sends it to the server.
• POST /mainpage: This route receives the entered name by the user from the server and displays a specialized greeting to the user.

index.html

index.html is the landing page for the application. It requests the user to type their name and send it to the server.

mainpage.html

This page just retrieves the user’s name from the server and displays a greeting, as mentioned before.

requirements.txt

This file specifies the requirements to be installed on the python runtime environment for the app to run successfully. It contains only one line:-

Flask==1.1.2

Now that we had a sneak peek inside our app, it’s time to prepare it for hosting!

Creating the configuration file

Now, to deploy the app on App Engine, we have to create a configuration file, that specifies the hardware requirements and other important factors ( Such as environment variables, routes). The name of this configuration file is app.yaml, which describes the app’s requirements for deployment.

YAML stands for ‘YAML Ain’t a Markup Language’ (yes, it is a recursive acronym), which is a data serialization language (similar to JSON), which can also be read by humans. Learn more about YAML here:-

The contents of app.yamlis as follows. For our deployment, we will keep it short and simple. Let’s walk through it line by line:-

# Specifies the runtime environment
runtime: python37 
# Specifies the instance class (Select it based on expected traffic)
instance_class: F2
# The Entry point for the application
entrypoint: python app.py

• runtime: As the name suggests, the runtime environment is specified for the app. For our flask application, we use Python 3.7.
• instance_class: instance_class specifies the instance you prefer to use. A few possible options are F1, F2, and F4. Each instance class has a different RAM limit, CPU speed, and costs incurred. More information on these individual instances can be found here. For our purposes, Instance Class F2 is sufficient.
• entrypoint: Entry point is the command that is used to get the application up and running. Here, the entry point is app.py .

The lines starting with # are comments, and are ignored (just as in any other programming language)

More properties/configurations can be defined in the app.yaml file.

Wrapping up

Now, place the newly created app.yaml file along with the existing application files, so that the directory structure of the repo is as follows:

demo-app/
    app.yaml
    app.py
    requirements.txt
    templates/
        index.html
        mainpage.html

And that’s it! We have successfully prepped our app, and it’s ready to be deployed!

Here is the continuation of the above, emphasizing the deploying part.

And for your reference, a code repository containing the above files can be seen here.