Structure a flask with an angular.js

Question

How to structure flask app with angular.js front-end? What is best practice? Should I use webserver like ngnix to host static files even when I'm working on development?

With flask default, I can serve index.html like below:

@app.route('/')
def index():
    return make_response(open('static/index.html').read())

or

@app.route('/')
def index():
    return send_from_directory('static', 'index.html')

But, there is a problem where I cannot point js files without '../static' prefix. I just want to point angular.js and all others like:

<script src="lib/angular/angular.js"></script>

not

<script src="../static/lib/angular/angular.js"></script>

Can I change all static file prefix in flask? Or is there a good way to solve this problem?

Thanks.

possible duplicate of [Typical Angular.js workflow and project structure (with Python Flask)](http://stackoverflow.com/questions/11522151/typical-angular-js-workflow-and-project-structure-with-python-flask) — Guillaume Vincent, Mar 25 '14 at 20:24

score 4 · Accepted Answer · answered Apr 19 '13 at 08:41

4

If you really want to, you can:

app = Flask(__name__, static_url_path='')

Although I'd just use the absolute URL:

/static/lib/angular/angular.js

answered Apr 19 '13 at 08:41

Blender

289,723
53
439
496

With angular.js, I think "app = Flask(__name__, static_url_path='')" is good because "/lib" is more suitable than "/static/lib" in point of front-end developers' view. – ccoroom Apr 19 '13 at 09:09
@ccoroom: How are you going to host the static files? – Blender Apr 19 '13 at 09:09
I don't have much idea yet. This is just a development setting. But, I feel weird path begins with '/static'. my html files already live in the folder? – ccoroom Apr 25 '13 at 08:26
@ccoroom: Why? Why don't you place them in the `templates` folder? – Blender Apr 25 '13 at 18:01
@Blender using tools like http://yeoman.io and http://gruntjs.com you get to have nice code organization and a build process to concat/minify/cdnify etc. static assets. Typically source is under `/app` and the build produces output under `/dist`. Flask needs to know to serve static assets from `/dist` or `/app` depending if running in dev or production and you dont want your paths to assets to change e.g. having a path to a tempalte to have to change depending on the directory being served. – craigb Sep 18 '13 at 18:59

score 3 · Answer 2 · answered May 01 '13 at 06:33

3

I think that best practices would be to let your web server serve all of your static content (angularjs, other js files, html, css, images, etc).

And then use some type of convention (i like going with the '/api' path) to serve and receive data to and from your flask server.

For example, in your apache config:

<VirtualHost *:80>
    DocumentRoot /path/to/static/files
    WSGIScriptAlias /api /path/to/flask/flask.wsgi
    ...
</VirtualHost>

answered May 01 '13 at 06:33

SeanPlusPlus

8,663
18
59
84

Yea I agree. Here is snippet I am using with nginx: location /static { autoindex on; alias /path/to/directory/static; } – jdsantiagojr Jul 05 '13 at 15:21

Structure a flask with an angular.js

2 Answers2