[nerva]

So what's a good (clean) way to create the frontend for Flask apps? I have a decent sized Flask app and I've created a mess with all the templates, static CSS/JS now.

What JS framework do you tie it to, if you use Flask to just create an API/manage sessions?

[mwhite]

You could try using Flask-Restless with Backbone-Relational and then integrate with something like React using something like https://github.com/magalhas/backbone-react-component

https://flask-restless.readthedocs.org/en/stable/

http://backbonerelational.org/

[mwhite]

On second thought, I'm not sure if a backbone-react mixin is even necessary. You can explicitly subscribe and unsubscribe to events with only a couple lines of code in componentWillMount() and componentWillUnmount().

[mslate]

I host my Flask API on one server and serve a single page app (Angular) on another.

The trick with that is having to host them from separate domains and deal with CORS, however it also allows you to distribute your SPA via CDN instead of using Flask app servers to serve up that static content. This is what we do at my full-time gig, but same holds for Flask.

[derefr]

I used this architecture myself for a while, but I don't think I would implement a new project in terms of it at this point. Given a caching reverse-proxy like CloudFlare, there's no disadvantage in serving your client from the app itself. Meanwhile, you get the advantage of being able to test the server during development by just hitting the single ip:port it's running on—and have your automated testing do the same with subrequests, by using the Host header from the request context—without having to make all your test-harness code "infrastructure-aware", teaching it about ports and figuring out ways to pass them in and route them through Docker and map them to domains instead of ports in production and such.

[sandGorgon]

I'm just starting out in Javascript development and have been struggling with build system - how do you achieve cache busting hashes, etc which are necessary to use for a CDN?

We are using webpack and it seems hard to do it.

[mslate]

I highly recommend surge.sh for easy static hosting--their cache-busting strategy is explained here:

https://surge.sh/help/using-lucid-caching-automatically

[sandGorgon]

we use cloudfront and nginx for most of our infrastructure - kinda hard to move to surge right now.

ETags is not viable for this kind of a setup - it pretty much means triggering a nginx reload which is what a cache-busting signature avoids.

[bndw]

You can serve any sort of frontend from Flask. Personally, I prefer Emberjs and have been serving Ember apps from Flask for sometime now. It's as easy as pointing your Flask app's `template_folder` at the compiled frontend folder. If you're using Emberjs, this is the `dist` folder.