Use Flask Restful Google App Engine with Angular

Question

I am trying to marry this angular python project and this restful flask project.

Directory

- /app
    - css/app.css
    - js/app.js
    - index.html
- app.yaml
- main.py
- appengine_config.py
- vendor.py
- requirements.txt

app.yaml

application: your-application-id-here
version: 1
runtime: python37
api_version: 1
threadsafe: yes

handlers:
- url: /rest/.*
  script: main.APP

- url: /(.+)
  static_files: app/\1
  upload: app/.*

- url: /
  static_files: app/index.html
  upload: app/index.html

main.py

from flask import Flask
from flask.ext import restful


APP = Flask(__name__)
api = restful.Api(APP)


class HelloWorld(restful.Resource):
    def get(self):
        return {'hello': 'world'}


api.add_resource(HelloWorld, '/rest/query/')


@app.errorhandler(404)
def page_not_found(e):
    """Return a custom 404 error."""
    return 'Sorry, Nothing at this URL.', 404


@app.errorhandler(500)
def page_not_found(e):
    """Return a custom 500 error."""
    return 'Sorry, unexpected error: {}'.format(e), 500

Everything in the app/ folder is exactly the same from the python angular project.

If I comment out the following from app.yaml, I can access /rest/query and get the expected output.

- url: /(.+)
  static_files: app/\1
  upload: app/.*

- url: /
  static_files: app/index.html
  upload: app/index.html

However, when it is not commented out I get a 404 for /rest/query. At / I am able to see the static index.html page, loaded with the angular hooks. No data is populated since app.js cannot query /rest/query.

How can I set up a GAE Flask restful project that uses Angular?

Answer 1

I'm not a big fan of this workaround but I moved the routing to happen from app.yaml to main.py

main.py

from flask import Flask, render_template
from flask.ext import restful


class HelloWorld(restful.Resource):
    def get(self):
        return {'hello': 'world'}


app = Flask(__name__)
api = restful.Api(app)
api.add_resource(HelloWorld, '/rest/query')


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


@app.errorhandler(404)
def page_not_found(e):
    """Return a custom 404 error."""
    return 'Sorry, Nothing at this URL.', 404


@app.errorhandler(500)
def page_not_found(e):
    """Return a custom 500 error."""
    return 'Sorry, unexpected error: {}'.format(e), 500

app.yaml

application: application-id-here
version: 1
runtime: python37
api_version: 1
threadsafe: yes

handlers:
- url: /static
  static_dir: static

- url: /.*
  script: main.app

directory

- /static
    - css/app.css
    - js/app.js
    - partials/...
- /templates/index.html
- app.yaml
- main.py
- appengine_config.py
- vendor.py
- requirements.txt

Answer 2

The way I had to do this I deploy a flask api with a database as a web service and stand alone app.

Next you have to add CORS to allow your service to talk to another app, in this case a frontend client using the angular framework.

Then I deploy my angular app that will accept api calls to your backend web service.

My project uses sql server and .net core web api for the web server deployed to azure. And an Angular app deployed to google cloud. I also have another angular app deployed to azure.

I am working on a new api and dB for for my google cloud angular frontend app to make things easier to test and develop.