GAE app.yaml routing with Flask-Restless

Question

I am developing an app with AngularJS frontend + GAE backend (Python and Flask). I am having troubles to setting app.yaml for routing my API endpoints created with Flask-Restless extention. My app.yaml file looks like this:

application: myAppID
version: 1
runtime: python27
threadsafe: true
api_version: 1

handlers:
# handler 1
- url: /favicon\.ico
  static_files: favicon.ico
  upload: favicon\.ico

# handler 2
- url: /api/.*
  script: main.app

# handler 3
- url: /test
  script: main.app

# handler 4
- url: (.*)/
  static_files: app\1/index.html
  upload: app #this is the frontend folder for Angular

# handler 5
- url: (.*)
  static_files: app\1
  upload: app #this is the frontend folder for Angular

In Angular, the routes configuration looks like this:

App.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', 'RouteHelpersProvider',
function ($stateProvider, $locationProvider, $urlRouterProvider, helper) {
  'use strict';

  $locationProvider.html5Mode(false);

  // default route
  $urlRouterProvider.otherwise('/app/dashboard');

  // other routes ...
}]);

The main.py file looks like this:

from flask import Flask
import os
from werkzeug import debug
from flask import jsonify
from google.appengine.ext.webapp.util import run_wsgi_app

app = Flask('myApp')

if os.getenv('SERVER_SOFTWARE') and os.getenv('SERVER_SOFTWARE').startswith('Google App Engine/'):
    app.debug = False
else:
    app.debug = True

if app.debug:
    app.wsgi_app = debug.DebuggedApplication(app.wsgi_app, True)

@app.route('/test')
def test():
    return jsonify(test={"json": "test"})

import models

run_wsgi_app(app)

models is the file that contains Flask-SQLAlchemy models and Flask-Restless endpoints.

The Angular part loads correctly, for example this URL works fine:

• A) http://localhost:8080/#/app/dashboard

But the GAE backend part responses with a 500 error for URLs like these:

• B) http://localhost:8080/api/person
• C) http://localhost:8080/test

If I remove the handler 4 and handler 5 then B and C URLs works fine but Angular frontend stop working.

What I'm doing wrong?

Answer 1

Im on the go, so writing from my phone isn't that fun...

Any way, what i did in my app is that i have only one handler that triggers the flask app.

In the flask app usually the / route will return the angular web app as a static file.

You need to configure your Flask app , that it will know about the statics (HTML, JS etc.) Folder.

EDITED:

app.yaml should look like this:

handlers:
- url: .*  # This regex directs all routes to main.app
   script: main.app

main.app is the flask app.. now lets see how to serve the angular app from the route '/'

from flask import Flask, render_template
app = Flask(__name__, static_folder='/templates') # This sets /templates to be the folder for all JS HTML CSS files

@app.route('/')
def wellcomePage():
    return app.send_static_file('index.html')

angular routing configuration in your app.js file:

app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'templates/views/home.html'
        }).... Some More Routes..

Note that templateUrl: 'templates/...'

Please take a look at my app. I think it will help you understand what I'm trying to say here...

SE Hub at github

Ill edit this answer when i get to a freaking keyboard :)

Let me know if this helps.