Integrate Angular App with Flask App

[AlJohri]

Integration can be done in two main ways, I have some experience with both.

1. Enable CORS on both Angular and Flask and keep them in separate folders. Run "grunt serve" and "python manage.py runserver" separately. Maintain a variable on $rootScope with a URL to the server. If Angular's URL is "localhost", "127.0.0.1", or "0.0.0.0" set flask URL to the same thing. Otherwise store a heroku app URL.
   • Much nicer code separation.
   • Easier testing.
   • Much easier frontend development too in my opinion (i.e. you can develop frontend with livereload)
   • I think the dev cycle is easier too because you can use things like "grunt build" to output a minified and ready to role version of your app. Its a bit hacky at the moment in option 2 because no one really has open sourced a seed project for AngularJS + Grunt/Bower/Yeoman + Flask.
   • To elaborate, Grunt does fabulous things by merging two folders and serving them
     using "grunt connect". It merges the /app/static folder with /app/.tmp so if you specify /app/static/styles/main.css in your index.html file, despite the fact that it doesn't exist, it'll find the file at /tmp/styles/main.css and serve it up.
2. Use python flask's WSGI server to serve both flask and angular together. Put angular files within a static folder of flask.
   • Easier to start server.
   • Less computing resources overhead
   • Makes much more sense from a production standpoint.
   • Can still use Grunt to automate tasks with a modified Gruntfile (for the most part, still working out some kinks...)

Python WSGI hackery to simulate Grunt Connect

app.wsgi_app = SharedDataMiddleware(app.wsgi_app, { '/': os.path.join(os.path.dirname(__file__), 'static') })
app.wsgi_app = SharedDataMiddleware(app.wsgi_app, { '/': os.path.join(os.path.dirname(__file__), 'static/.tmp') })

P.S. Here's some sample CORS code:

pip install flask-cors
pip freeze > requirements.txt

from flask.ext.cors import origin
# Set up Cross Origin Requests
@app.after_request 
@origin("*") #allow all origins all methods everywhere in the app
def after(response): return response

Some code to send all requests that are undefined to AngularJS

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
    print path
    return render_template('index.html')

@Diffeomorphism Thoughts?

https://github.com/AlJohri/pickupapp-flask

[Diffeomorphism]

For now I think option 1 is the best way to go about it. I wonder if we could just define several resources and change the request URL accordingly based on whether we're on a local server or in production. I'm not too familiar with the intricacies of CORS but I can't imagine it would be too difficult to work around.

[Diffeomorphism]

http://better-inter.net/enabling-cors-in-angular-js/

For reference.

[Diffeomorphism]

Hey, so I got Angular side of the CORS stuff configured, no problemo. However it also requires the server to return the appropriate headers. The error I'm getting upon making a request is the following:

XMLHttpRequest cannot load http://localhost:5000/api/games/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:9000' is therefore not allowed access.

I believe this can be fixed by adding the appropriate headers on the server side, but I'm not sure how to do that. It should be fixed by adding Access-Control-Allow-Origin and Access-Control-Allow-Credentials headers to the response, so if you could figure out how to do that, that'd be awesome. I think it probably has something to do with that flask-cors download.

[AlJohri]

@Diffeomorphism, I included the code that fixes the error you're describing. I believe Tigis already implemented it. To reiterate:

pip install flask-cors
pip freeze > requirements.txt

from flask.ext.cors import origin
# Set up Cross Origin Requests
@app.after_request 
@origin("*") #allow all origins all methods everywhere in the app
def after(response): return response