Flask On Google App Engine

October 3, 2017

Create a Google Cloud Project (Remember the Project ID).

Install Google Cloud SDK. You can also use SDK for App Engine (Choose Standard environment and Python).

Create a directory for your project.

mkdir flask-app
cd flask-app

Install Flask libraries

For Google App Engine Standard Environment, it’s recommended to use Pyhon2.7.

Create requirements.txt with the following content.

# Latest version: https://pypi.python.org/pypi/Flask
Flask==0.12.2
# Prevent ImportError: cannot import name SpooledTemporaryFile
werkzeug==0.12.2

It’s recommended to create a virtualenv for the python libraries used in this project. Optionally, you could use virtualenvwrapper as well.

Install virtualenv and create a virtualenv named env.

sudo pip install virtualenv
virtualenv env 

Activate env.

source env/bin/activate

Install flask and dependencies into lib directory.

pip install -t lib -r requirements.txt

Deactivate env.

deactivate

Create appengine_config.py. The following code will include the lib folder as vendor libraries.

from google.appengine.ext import vendor

vendor.add('lib')

Create Flask application

Make a directory to create flask application.

mkdir app
cd app

Create python file app/__init__.py.

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('home.html')

Create directory app/templates.

mkdir templates
cd templates

Create template file app/templates/home.html.

<html>
  <head>
    <title>My Flask App</title>
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
  </head>
  <body>
    <h1>Hello</h1>
    <div>My Flask App</div>
  </body>
</html>

Create a static directory at project directory for css styles and other static assets.

cd ..
cd ..
mkdir static
cd static
mkdir css
cd css

Create static/css/style.css.

h1 {
  color: red;
}

Configure app.yaml

Create app.yaml.

runtime: python27
api_version: 1
threadsafe: true

handlers:
- url: /static
  static_dir: static
- url: /.*
  script: app.app

Project directory structure

├── app
│   ├── templates
│   │   └── home.html
│   └── __init__.py
├── env
├── lib
├── static
│   └── css
│       └── style.css
├── appengine_config.py
├── app.yaml
└── requirements.txt

Test the application

Use dev_appserver.py to test the application on localhost. You shall be promopted to download and install the component if it is not available.

dev_appserver.py app.yaml

By default it shall run on port 8080, you can change the port with --port parameter.

dev_appserver.py --port 8088 app.yaml

Note: if you bump into ImportError: cannot import name SpooledTemporaryFile, you need downgrade werkzeug to 0.12.2 by executing pip install --target lib --upgrade werkzeug==0.12.2. Reference.

ImportError: cannot import name SpooledTemporaryFile

Deployment

Use gcloud app deploy for deployment, specifiying the project and version is recommended.

gcloud app deploy --project <PROJECT_ID> -v 1

If you bump into the following error, run gcloud app create to initialize App Engine application.

The current Google Cloud project [PROJECT_ID] does not contain an App Engine application. Use gcloud app create to initialize an App Engine application within the project., you need to run the following command.

gcloud app create --project <PROJECT_ID>

You can view your website at https://<PROJECT_ID>.appspot.com.

References:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.