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) — Guillaume Vincent
– Guillaume Vincent, Commented Mar 25, 2014 at 20:24

Blender · Accepted Answer · 2013-04-19 08:41:34Z

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, 2013 at 8:41

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ccoroom Over a year ago

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.

Blender Over a year ago

@ccoroom: How are you going to host the static files?

ccoroom Over a year ago

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?

Blender Over a year ago

@ccoroom: Why? Why don't you place them in the templates folder?

craigb Over a year ago

@Blender using tools like yeoman.io and 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.

SeanPlusPlus · Accepted Answer · 2013-05-01 06:33:32Z

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 1, 2013 at 6:33

SeanPlusPlus

9,10318 gold badges63 silver badges84 bronze badges

1 Comment

jdsantiagojr Over a year ago

Yea I agree. Here is snippet I am using with nginx: <code> location /static { autoindex on; alias /path/to/directory/static; } </code>

Collectives™ on Stack Overflow

Structure a flask with an angular.js

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related