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?

Can you show your app's directory structure including the location of the app.yaml and main.py files? — Dan Cornilescu
– Dan Cornilescu, Commented Jun 20, 2019 at 3:10
@DanCornilescu Edited, if you checkout the links above you will find appengine_config .py and vendor.py. These basically look towards a generated /lib folder in the directory root for dependencies. — user1222324562
– user1222324562, Commented Jun 20, 2019 at 15:59

user1222324562 · Accepted Answer · 2019-06-20 18:10:52Z

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

BlackFox · Accepted Answer · 2019-06-25 14:37:28Z

1

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.

edited Jun 25, 2019 at 14:37

answered Jun 20, 2019 at 16:07

BlackFox

8381 gold badge10 silver badges26 bronze badges

2 Comments

user1222324562 Over a year ago

My intention is to keep everything small and simple under one GAE project. I'm trying to get over the hurdle where I can run an angular app or rest api, but not both. This must be an app.yaml routing issue, right?

user1222324562 Over a year ago

Especially since in the above angular example, you can do so with webapp2

Collectives™ on Stack Overflow

Use Flask Restful Google App Engine with Angular

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related